در نوشته فایل های نما و لایه ها در ASP.NET Core MVC درباره فایل نما و ساخت لایه ها آموزش داده ایم. در دنباله مباحث مربوط به لایه ها، در این نوشته می خواهم مروری بر لایه ها و دیگر مواردی که گفته شده است داشته باشیم. در اینجا می خواهیم لایه ها، جدا سازی بخش مختلف یک لایه در فایل های جدا، استفاده از لایه در فایل نما، ساخت و فرستادن یک نمونه از کلاس مدل به فایل نما، استفاده از HtmlHelper برای ساخت نشانی در فایل نما را مرور کنیم.

فایل Layout.cshtml_ در پوشه Views/Share

زمانی که یک پروژه MVC را می سازید، Layout.cshtml_ فایل لایه پیش فرض برای دیگر فایل های نمایی است که یا از قبل وجود دارند و یا اینکه شما آنها را بعدا خواهید ساخت. کد زیر محتوای این فایل را نشان می دهد که می توانیم آن را از دید تگ های اچ تی ام ال به چهار بخش تقسیم کنیم.

  • بخش اول: همه تگ های میان <head> و <head/> که شامال تگ title و چندین تگ meta و چندین تگ link است.
  • بخش دوم درون تگ body است که شامل همه تگ های درون <header> و <header/> می شود. این خودش شامل تگ nav و چندین تگ دیگر مانند div و ul و li و button و a و span است.
  • بخش سوم بازهم درون body است ولی در کد زیر این بخش شامل تگ div است که کلاس آن container است. یعنی تگ div که پس از <header/> آغاز شده است. در کد زیر می بینید که عبارت ()RenderBody@ نوشته شده است که آن را در نوشته فایل های نما و لایه ها در ASP.NET Core MVC آموزش داده ایم.
  • بخش سوم شامل تگ footer و چندین تگ script و همچنین شامل تگ های پایانی <body/> و <html/> نیز است.

شکستن فایل نما به چندین زیر فایل

توجه کنید فایل نمای پیش فرض ما همان Layout.cshtml_ است ولی می خواهیم این فایل را ساده کنیم. بنابراین می توانیم سه بخش اول، دوم و چهارم بالا را درون فایل جداگانه ای نگهداری کنیم و سپس هر یک از این فایل های جداگانه را در محل خودش در فایل Layout.cshtml_ پیوست کنیم. بنابراین برای آغاز کار سه فایل به نام های زیر در مسیر Views/Shared بسازید. بنابراین هر یک از فایل های زیر را بسازید و سپس کدهای اچ تی ام ال را برای هر بخش از فایل Layout.cshtml_ کپی و درون هر یک برزید. این کار باعث می شود تا هم فایل لایه اصلی ما یعنی Layout.cshtml_ کوچک شود و هم بتوانیم بخش های گوناگون آن را به خوانایی بیشتر در فایل های مجزا تغییر دهیم.

  • فایل Header.cshtml_ برای نگهداری بخش اول، یعنی تگ head و همه تگ های درون آن. البته بهتر است بگوییم این فایل شامل تگ <html> تا پایان تگ <head/> می شود.
  • فایل NavBar.cshtml_ برای تگهداری بخش دوم، یعنی تگ header و همه های تگ های درون آن که شامل تگ nav است. تگ nav برای ساخت NavBar در اچ تی ام ال است.
  • فایل Footer.cshtml_ برای نگهداری بخش چهارم، یعنی تگ footer و چندین تگ script و همچنین تگ های پایانی <body/> و <html/>

Partial View ها

در MVC مفهوم Partial View ها به یک یا چندین زیر فایل اشاره دارند که این زیر فایل ها می توانند درون فایل های دیگر استفاده شوند. اصطلاحا Partial View ها فایل های نمای با قابلیت استفاده مجدد هستند که کدهای یک فایل را به زیر فایل هایی می شکنند تا کدها کوچکتر و خواناتر شوند. بنابراین با توجه به آنچه که در بالا گفته شد، می توانیم یک فایل لایه را به Partial View ها بشکنیم و سپس آنها را درون فایل لایه پیوست کنیم.

بنابراین در کدهای بالا من می خواهم سه تا Partial View به نام های Header.cshtml_ و NavBar.cshtml_ و Footer.cshtml_ بسازم و سپس اینها را به درون فایل لایه پیش فرض پیوست کنم. همگی این فایل ها نیز درون دایرکتوری اشتراکی برای همه نما ها، یعنی Views/Shared ساخته می شوند.

فایل Header.cshtml_

فایل NavBar.cshtml

فایل Footer.cshtml_

در دو کد بالا برای Footer.cshtml_ و NavBar.cshtml_ می توانید ببینید که از دو TagHelper به نام های asp-action و asp-controller کمک گرفته ایم تا نشانی های URL برای متدهای کنترل گر به نام های Index و Privacy برای کلاس کنترل گر HomeController را بسازیم. درباره TagHelper های asp-action و asp-controller در نوشته ساخت URL با UrlHelper و TagHelper در ASP.NET Core MVC آموزش داده ام.

پیوست کردن Partial View به درون فایل نما

برای این کار می توانیم از متدهای HtmlHelper به نام های ()Partial و ()RenderPartial و ()RenderAction کمک بگیریم. فایل لایه نیز یک فایل نما است ولی خودش پایه ای برای دیگر فایل های نما هستند. همچنین فایل های Partial نیز فایل های نما هستند ولی خودشان می توانند بخش کوچکی از یک فایل نما باشند، پس در همگی می توانیم به کمک عبارت Html@ به متدهای کلاس HtmlHelper یا به کمک عبارت Url@ به متدهای کلاس UrlHelper دسترسی داشته باشیم.

HTML Helper در ASP.NET Core MVC – بخش یکم

HTML Helper در ASP.NET Core MVC – بخش دوم

HTML Helper در ASP.NET Core MVC – بخش سوم

پیوست کردن فایل با متد ()Partial از کلاس HtmlHelper

در کد زیر و به کمک عبارت ()Html.Partial@ سه فایل ساخته شده را در محل های خودش پیوست کرده ایم. توجه کنید پیوست ها از بالا به پایین است، پس اول فایل Header.cshtml_ و سپس  NavBar.cshtml_ و در پایان Footer.cshtml_ پیوست شده است. بنابراین در پایان باید محتوای فایل Layout.cshtml_ همانند زیر باشد. توجه کنید متد ()Partial از کلاس HtmlHelper برای افزودن یک زیر فایل لایه به درون دیگری است که نام مسیر کامل فایل را دریافت کرده است. همچنین توجه کنید که در آغاز مسیر ~ اشاره به دایرکتوری پروژه دارد، جایی که مسیر Views/Shared در آن قرار دارد. همچنین در نوشته فایل های نما و لایه ها در ASP.NET Core MVC درباره ()RenderBody@ گفتیم که این عبارت محلی را مشخص می کنید که در دیگر کدهای اچ تی ام ال در فایل های نما در اینجا نمایش داده می شوند.