در این مقاله ابتدا کمی با مفهوم Master Page آشنا می شویم و سپس به مقایسه ی این مفهوم بین دو تکنولوژی MVC و ASP.net می پردازیم و نحوه ی به کارگیری آن را هم بررسی می کنیم.

در بخش ASP.net Web Forms مفهومی به نام master page وجود دارد که همه ی امور متداول در وب سایت ها را در آن قرار می دهیم و در صورت نیاز می توانیم یک User Control سفارشی شده برای قسمت های Header ، Footer  و منوی سمت چپ در نظر بگیریم.

ابتدا برای این که با مفهوم Master page آشنا شویم ، یک برنامه  Web Page ایجاد می کنیم.

بخش Solution Explorer را باز کنید و فایل Site.Master را باز کنید.

در فایل Site.Master ، همه ی بخش هایی که در صفحات پروژه مشترک هستند را قرار می دهیم  مثل منویی که در بالای همه صفحات قرار دارد.

و برای قسمت footer تصویرزیر را بررسی کنید، در قسمت footer بخش هایی مثل لینک های متداول ، لینک های مربوط به شبکه های اجتماعی و متن های مربوط به قوانین Copyright وجود دارد که در همه ی صفحات مشترک هستند.  بنابراین اگر بخواهیم تغییری در یکی از بخش ها ایجاد کنیم، کافی است در بخش footer این کار را انجام بدهیم و دیگر نیازی به تغییر همه ی صفحات نیست.

برای نمایش محتویات ما به یک container نیاز داریم. بنابراین باید از ContentPlaceHolder استفاده کنیم.

بنابراین ما یک طراحی مطابق شکل زیر خواهیم داشت. طراحی صفحه شامل یک Header ، Footer و یک Container  خواهد بود.

حالا صفحات Home, About, contact را باز کنید .در خط بالایی ، تکه کد موجود در عکس زیر را می بینید که بیانگر استفاده از master page است.

برنامه را اجرا کنید و همه ی صفحات را چک کنید. می بینید که در همه ی صفحات، بخش های موجود در MasterPaeg وجود دارند.

حالا یک برنامه ی MVC ایجاد می کنیم. می خواهیم مفهوم master page و طریقه ی کار با آن در MVC را بررسی کنیم.

بخش Solution Explorer را باز کنید و به پوشه  Views بروید، پوشه ی Home را باز کنید. فایل های About.cshtml ,    Contact.cshtml   و  Index.cshtmlدر آن وجود دارند که مشابه صفحات About.aspx, Contact.aspx و  Index.aspx در صفحات WebForm هستند.

یک پوشه دیگر به نام Shared نیز وجود دارد که  view هایی که بین همه ی صفحات به اشتراک گذاشته شده اند، در آن قرار دارند دقیقا مثل Site.Master.

در پوشه ی Views یک فایل _ViewStart.cshtml قرار دارد. در این فایل ما می توانیم قالب پیش فرض سایت را تنظیم کنیم. به طور مثال در اینجا ، '_Layout.cshtml' قالب پیش فرض است.

@{  
Layout = "~/Views/Shared/_Layout.cshtml";  
//Layout = "~/Views/Shared/LeftPanel.cshtml";  
      
}

حالا فایل _Layout.cshtml را بررسی کنید. محتویات آن دو بخش دارد، در div اول،  لینک های html مربوط به  Header قرار دارد و در بخش دوم div  مربوط به footer قرار دارد و در بین این دو قسمت ، یک @RenderBody() قرار دارد که به منزله ی container ما است. همه ی محتویات سایر صفحات در این قسمت قرار می گیرد.

حالا مطابق شکل زیر می خواهیم یک پنل در سمت چپ ایجاد می کنیم.

بر روی پوشه Shared کلیک کنید و یک view جدید به نام LeftPanel.cshtml ایجاد کنید.

 مطمئن شوید که قسمت Create as a partial view را فعال کرده باشید.

و تکه کد زیر را در آن قرار بدهید.

<hgroup>
    <h1 class="text-danger">پنل سمت چپ</h1>
    <h2 class="text-danger">اولین مرحله کار با موفقیت انجام شد</h2>
</hgroup>

حالا فرض کنید شما می خواهید این پنل را در صفحات خاصی نمایش بدهید.به عنوان مثال فقط در صفحه 'about.cshtml'.

برای این کار صفحه ی 'about.cshtml' را باز کنید و قسمت زیر را در آن وارد کنید.

@Html.Partial("LeftPanel")

این تکه کد باعث می شود تا Partial View ای که ایجاد کردیم فقط در صفحه   About نمایش داده شود.

حالا برنامه را اجرا کنید و به صفحه ی About بروید. می بینید که پنل سمت چپ در ان نمایش داده می شودولی در صفحه اصلی پنل سمت چپ را نخواهیم داشت.

حالا یک بخش مهم تر را با هم بررسی می کنیم، فرض کنید که می خواهیم یک بخش Static در قسمت content در View  ایجاد کنیم که بخشی از RenderBody() نیست و می خواهیم یک متن را در زیر footer برای ما نمایش بدهد.

برای انجام این کار ، تکه کد زیر را در فایل _Layout.cshtml و در زیر footer قرار می دهیم.

حالا برای این که این قسمت بتواند در صفحه، نمایش داده شود، تکه کد زیر را در قسمت انتهایی و زیر footer درج می کنیم.

@section Bottom{<h3>مرحله دوم کار با موفقیت انجام شد</h3>}  

خروجی کار به صورت زیر خواهد بود :

آموزش asp.net mvc