آموزش کار با Layout در ASP.NET CORE

در اصل Layout یک یا چند قالب اصلی برای ایجاد صفحات وب است که بخش‌های ثابت و مشترک بین صفحات مختلف را در خود نگه می‌دارد. به عبارت دیگر، Layout یک فایل Razor است که شامل ساختار HTML پایه و اجزای ثابت سایت می‌باشد و می‌تواند توسط سایر صفحات – Viewها استفاده شود. Layout یک ابزار قدرتمند در ASP.NET Core است که توسعه و نگهداری وب‌سایت‌ها را ساده‌تر و موثرتر می‌کند. در این آموزش Asp.Net Core به آموزش کار با Layout ها میپردازیم.

مزایای استفاده از Layout

• کاهش تکرار کد: نیاز به تکرار کدهای ثابت در هر صفحه را کاهش می‌دهد.
• مدیریت آسان: تغییرات در یک مکان اعمال می‌شود و در تمام صفحات منعکس می‌گردد.
• یکپارچگی ظاهری: به حفظ یکپارچگی و هماهنگی در طراحی کل سایت کمک می‌کند.

ساختار فایل‌های Layout

• فایل Layout.cshtml : این فایل اصلی‌ترین فایل Layout است که به طور معمول در اکثر پروژه‌ها استفاده می‌شود. و شامل کد های Html اصلی پروژه میباشد.
• فایل ViewStart.cshtml : این فایل به تنظیمات پیش‌فرض برای Viewها اختصاص دارد و معمولاً در پوشه Views قرار می‌گیرد. با استفاده از این فایل، می‌توانید Layout پیش‌فرض برای تمامی Viewها را مشخص کنید:
• فایل ViewImports.cshtml : این فایل به وارد کردن namespaceها و helperهای مشترک بین Viewها می‌پردازد و معمولاً در پوشه Views قرار می‌گیرد. همچنین می‌تواند شامل تنظیمات مربوط به Tag Helpers باشد.
• فایل Error.cshtml: برای نمایش صفحات خطا به کاربرانی که به مشکلاتی مانند خطاهای سرور یا درخواست‌های ناموفق برخورد می‌کنند، استفاده می‌شود.
• فایل _ValidationScriptsPartial.cshtml: ک فایل Partial View است و شامل اسکریپت‌های لازم برای اعتبارسنجی سمت کلاینت – Client-side validation می‌باشد.

ایجاد Layout جدید

ابتدا روی فولدر Shared کلیک راست کرده و از گزینه Add گزینه New Item را انتخاب میکنیم.

ایجاد Layout در Asp.Net Core

در پنجره جدید گزینه Show All Templates را انتخاب میکنیم.

ایجاد Layout جدید

و Layout را سرج کرده و گزینه Razor Layout را انتخاب میکنیم.

Razor Layout

متد RenderBody

متد RenderBody وظیفه دارد محتوایی که ما در View قرار میدهیم را بگیرد و به بخشی که در Layout ما این تابع را نوشته ایم فراخوانی کند. به صورت مختصر میتوان گفت که محتوای اصلی و متغییر سایت را فرا میخواند. این تابع در صفحه Layout باید درست در جایی باشد که ما میخواهییم محتوای سایت درون آن قرار گیرد. توجه داشته باشید که هر Layout فقط و فقط یک RenderBody میتواند داشته باشد.

تعریف در Layout

@RenderBody()

متد RenderSection

همه محتوای سایت ما در RenderBody قرار گرفته که این موضوع محدودیت برای ما ایجاد میکند برای حذف این محدودیت از RenderSection در کنار RenderBody استفاده میکنیم و بر عکس RenderBody میتوانیم بی نهایت RenderSection در یک Layout داشته باشیم. RenderSection یک مقدار True و یا False هم میگیرد اگر مقدار آن True باشد پر کردن این سکشن در View اجباری است و اگر آن را پر نکنیم ارور میدهد ولی اگر مقدار آن False باشد دیگر اختیاری است.

تعریف در Layout

@await RenderSectionAsync("HederText", required:true)

استفاده در View

@section HederText{
    <h2>Hello World</h2>
}

RenderBody و RenderSection در ASP.NET Core متدهایی هستند که در صفحات Razor استفاده می‌شوند تا محتوای صفحات فرزند را در فایل‌های Layout نمایش دهند. این متدها از کلاس‌های مربوط به Razor Page و View Engine آمده‌اند و به عنوان بخشی از زیرساخت‌های رندرینگ صفحات در ASP.NET Core عمل می‌کنند.