آموزش ASP.NET MVC5 – فصل۴

 آموزش ASP.NET MVC5 – فصل۴ 

 

سلام دوستان ، امیدوارم تا بدین جای مقالات آموزشی ASP.NET MVC5 بخوبی توانسته باشیم شما را با دنیای MVC آشنا کرده باشیم و قدمی کوچک در یادگیری شما در این زمینه برداشته باشیم . لطفا ما را از دیدگاه های خود درباره مقالات وب سایت محتوا (نویسنده : احسان صفری) با خبر سازید .

در جلسه سوم با فریمورک قدرتمند Bootstrap آشنا شدیم . بخش های جلسه سوم عبارت بودند از :

  1. آموزش ASP.NET MVC5 – فصل۳ – بخش۱
  2. آموزش ASP.NET MVC5 – فصل۳ – بخش۲

 

آموزش طراحی Layout در ASP.NET MVC5

 

تفاوت MasterPage و Layout :

Layout در MVC دقیقا شبیه مفهوم MasterPage در ASP.NET webform می باشد . برای دوستانی که با Masterpage آشنایی ندارند عرض میکنم که وقتی Masterpage تعریف میکنیم ، یک یا چند بخش دارد بنام ContentPlaceHolder . در هر صفحه ای که از این فایل ارث می برد ، مطالب داخل ContentPlaceHolder داینامیک می شود یعنی صفحه به صفحه مطلبش تغییر می کند ولی کدها و منوهای بیرون ContentPlaceHolder ثابت هستند و در هر صفحه عینا تکرار می شوند .

نکته : در معماری ASP.NET MVC بجای Masterpage مفهوم Layout را داریم و بجای Page ها View داریم و بجای ContentPlaceHolder عبارت RenderBody .

 

محل ذخیره سازی Layout ها :

مکان تعریف Layout در فولدر Shared در زیر فولدر Views می باشد . برخلاف PartialView ها که باید در روت root فولدر shared باشند ، Layout را می توانیم هم در روت تعریف کنیم و هم در فولدر دلخواه خود داخل فولدر Shared . 

توصیه ما اینست که داخل فولدر shared فولدری بنام Layouts تعریف کنیم و Layout ها را آنجا ایجاد کنیم تا با partialview ها قاطی نشوند .

 

نحوه ایجاد Layout :

در برنامه ویژوال استودیو ، فولدر Shared را در زیر فولدر views ایجاد میکنیم و سپس فولدر Layouts را در زیر فولدر Shared ایجاد میکنیم. حالا روی فولدر Layouts راست کلیک کرده و Add–>New Item را انتخاب میکنیم . از منوی سمت چپ باید web انتخاب شده باشد و در لیست سمت راست ، گزینه MVC5 Layout Page را انتخاب میکنیم . نام آنرا نیز بنابر توصیه مایکروسافت ، با یک underline و سپس کلمه Layout تعریف میکنیم .

بعد از ایجاد Layout صفحه ای با کد زیر نمایش داده  می شود :

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
</head>
<body>
    <div>
    @RenderBody()
    </div>
</body>
</html>

 

افزودن فایل CSS سفارشی:

در بخش head باید css سفارشی خود را add کنیم :

<link href="~/Content/Site.css" rel="stylesheet" />

و در ابتدا کد بدنه layout را بصورت زیر تعریف میکنیم :

<div id="layout">
    <div id="header">
        &nbsp;
    </div>

    <div id="subHeader">
        &nbsp;
    </div>

    <div id="main">
        @RenderBody()
    </div>

    <div id="subFooter">
        &nbsp;
    </div>

    <div id="footer">
        &nbsp;
    </div>
</div>

تمام بخشهای هدر و فوتر static و بخش main داینامیک است یعنی در هر view محتویات داخل آن تغییر میکند .

 

تعریف View برای استفاده از Layout:

حالا در این مرحله میخواهیم یک View تعریف کنیم که از Layout فوق خوراک بگیرد . برای اینکار مانند قبل روی فولدر Views و زیرفولدر مثلا Home راست کلیک کرده و گزینه Add–>View را انتخاب میکنیم . در پنجره باز شده ، مطابق شکل زیر ، باید تیک گزینه Use a layout or masterpage را بزنیم و آدرس Layout فوق را در محل مربوطه وارد کنیم :


MVC Layout

 

فرآیند نمایش خروجی به کاربر :

زمانی که کاربر یک اکشن از کنترولر را صدا میکند ، ابتدا وارد Default Constructor کنترولر میشود بعد به اکشن میرود . سپس به view مربوط به اکشن میرود و در view کد html آن ساخته میشود و میبیند که view از layout استفاده میکند ، این کد html ساخته شده را داخل layout قسمت renderBody قرار میدهد و در نهایت HTML نهایی را بصورت یکپارچه به سمت کلاینت (مرورگر کاربر) میفرستد .

خروجی ما در صورت استفاده از view و layout این مقاله به شکل زیر می شود :


MVC Layout Sample

 

مطالبی که تا اینجا در زمینه Layout یاد گرفتیم ، مانند MasterPage در ASP.NET webform بود . ولی تا انتهای این مقاله، با امکانات جالب و کارآمد Layout آشنا خواهیم شد.

 

کاربرد RenderBody و RenderSection در Layout:

در ASP.net webform اگر بخواهیم چند بخش از صفحه را داینامیک اعلام کنیم یعنی در صفحات مختلف محتویات متفاوتی داشته باشد ، باید در MasterPage چند تا  contentPlaceHolder تعریف کنیم . ولی در MVC قضیه متفاوت است . بدین صورت که در Layout یک بخش اصلی داریم بنام RenderBody و قسمتهای اضافی (که میخواهیم علاوه بر بدنه اصلی ، داینامیک باشد) با RenderSection تعریف می شوند . بنابر این ما باید در فایل Layout یک و فقط یک RenderBody داشته باشیم و هیچ یا چند تا RenderSection .

نحوه تعریف دستور RenderSection:

دستور RenderSection پارامتر ورودی بنام name میگیرد که مثلا برای بخش header میتوانیم بدین صورت تعریف کنیم :

@RenderSection(name: "HeaderSection")

نکته : اگر در Layout بخش RenderSection تعریف کنیم ولی در View ای که از این layout خوراک میگیرد renderSection را تعریف نکنیم با خطا مواجه می شویم . پس باید دقیقا به تعداد RenderSection های فایل layout در view نیز RenderSection را تعریف کنیم .

تعریف section در view:

برای تعریف section در view باید بصورت کد زیر عمل کنیم :

 
 @section HeaderSection
{
   Home
}
                                 

بنابراین در این مثال کد layout ما بصورت زیر است :

<div id="layout">
    <div id="header">
        @RenderSection(name: &quot;HeaderSection&quot;) 
    </div>

    <div id="main">
        @RenderBody() 
    </div>

    <div id="footer">
        &nbsp;
    </div>
</div>

و کد view آن نیز بصورت زیر می باشد :

@{
    ViewBag.Title = &quot;Learn 3&quot;;
    Layout = &quot;~/Views/Shared/Layouts/_Layout3.cshtml&quot;;
}
@section subHeaderSection
{
  <a href="~/Home/Index">Home</a>
}

<h2>
    Learn 3
</h2>

<p>
    Hello World! 
</p>

توضیح : بخش renderSection که در view به رنگ آبی مشخص شده است میرود بجای rendersection فایل layout می نشیند و بقیه کدهای view (تگ h2 و p) داخل renderBody نمایش داده میشوند .

نکته : برای یادگیری بیشتر به وبلاگ asp.net مراجعه شود .

 

تعریف Section بصورت اختیاری (Optional):

ویژگی جالب و متفاوت Layout ها در mvc (نسبت به masterpage ها در asp.net webform) اینجاست که میتوان section خاصی را optional (اختیاری) کرد یعنی این که اگر در view این section تعریف نشده بود error ندهد . برای اینکار باید پارامتر دیگری به RenderSection در layout بدهیم بنام required . مقدار پیش فرض آن true است . اگر آنرا false کنیم ، دیگر تعریف ان در  view اجباری نیست :

 
  @RenderSection(name: "HeaderSection", required: false)
                                 

تعریف مقدار پیش‌فرض برای Section:

امکان دیگری که Layout در اختیار ما قرار میدهد اینست که میتوان محتوای پیش فرض برای section تعریف کنیم . یعنی اگر section خاصی که در layout تعریف شده است ، در view تعریف نشده باشد ، مقدار پیش فرضی که در layout تعیین کردیم نمایش داده می شود :

<div id="Header">
    @if (IsSectionDefined(name: &quot;HeaderSection&quot;)) { @RenderSection(name: &quot;HeaderSection&quot;) } else { <text>Default Header Section!</text> }
</div>

فایل ViewStart :

در این فایل میتوان نام layout را تعریف کنیم . نام این فایل رزرو شده است و باید خودمان ایجاد کنیم . برای ساختن این فایل روی پوشه Views راست کلیک کرده و گزینه add–>view را انتخاب میکنیم . در پنجره ظاهر شده ، تیک هیچکدام از گزینه ها را نمیزنیم و نام فایل view را دقیقا بصورت زیر مینویسیم :

_ViewStart

در view باز شده layout ای که قبلا ایجاد کردیم را تعریف میکنیم :

 
   Layout = "~/Views/Shared/Layouts/_Layout7.cshtml";
                                 

ایجاد View برای استفاده از Layout واقع در ViewStart:

برای ایجاد view ای که از این layout خوراک بگیرد بصورت زیر عمل میکنیم :

مانند قبل روی پوشه Home (یا هر پوشه دیگری) که داخل پوشه Views است راست کلیک کرده و add—>view را میزنیم . سپس مانند شکل زیر در پنجره باز شده تیک user a layout را میزنیم ولی چیزی در باکس زیر آن نمی نویسیم . همانطور که در ذیل این باکس مشاهده میکنید ، میگوید "اگر نام layout در فایل viewStart ست شده است ، این باکس را خالی بگذارید" و در نهایت add را میزنیم . روش توصیه شده ایجاد view نیز همین روش است (بجای اینکه در بالای view نام layout را به صراحت تعریف کنیم بهتر است آنرا در viewStart ست کنیم)

mvc viewStart

نکته : با استفاده از فایل viewstart میتوان چند تا layout تعریف کنیم و در مناسبت های گوناگون ، layout متناسب آنرا نمایش دهیم (بصورت runTime) .

برای یادگیری بیشتر ، این تمرین را به خود شما واگذار میکنم laugh در صورتی که سوال یا ابهامی داشتید لطفا به ما اعلام کنید. با تشکر wink

جلسه چهارم از سری آموزشی MVC در اینجا به پایان میرسد .

 


برچسب‌ها:

LayoutMaster Pageتعریف Sectionتعریف Viewدستور RenderSectionطراحیطراحی Layoutطراحی Layout در MVCفایل ViewStartکاربرد RenderBody

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

سیزده + یازده =