بررسی ایجاد کردن یک Layout View در ASP.NET MVC

بررسی ایجاد کردن یک Layout View در ASP.NET MVC

در این پست از وبسایت پرووید در رابطه با بررسی ایجاد کردن یک Layout View در ASP.NET MVC صحبت خواهیم کرد. معماری MVC از معمول ترین و پرکاربردترین معماری های ساخت وب اپلیکیشن ها می باشد.

به منظور ایجاد کردن یک Layout View در ASP.NET MVC بر روی فولدر Shared راست کلیک کرده و سپس گزینه ی Add و پس از آن New Item را انتخاب کنید. در پنجره ای که با عنوان Add New Item به شما نشان داده می شود بر روی Layout Page کلیک کنید و سپس یک نام مناسب برای مثال _myLayoutPage.cshtml را برای آن در نظر بگیرید و بر روی دکمه ی Add کلیک کنید. این موضوع در تصویر زیر نشان داده شده است.

create layout view 1 - بررسی ایجاد کردن یک Layout View در ASP.NET MVC

کد پیش فرض درون فایل _myLayoutPage.cshtml در قسمت زیر نشان داده شده است.

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

حال با استفاده از متد RenderSection() اقدام به اضافه کردن Section های مختلف می کنیم. برای مثال برای وارد کردن یک قسمت برای Footer برنامه از متد RenderSection(“footer”,true) استفاده کنید. دقت کنید که پارامتر دوم که از نوع Boolean می باشد با مقدار true تنظیم شده است. این باعث می شود که این Section بصورت اجباری تعریف بشود. به عبارت دیگر هر View ای در برنامه که قرار است از _myLayoutPage به عنوان Layout View خود استفاده کند باید یک قسمت به نام Footer در درون خود تعریف کند. کد زیر تغییرات انجام شده بر روی فایل _myLayoutPage.cshtml و تعریف شدن یک Section با نام Footer را نشان می دهد.

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div>
        @RenderBody()
    </div>
    <footer class="panel-footer">
        @RenderSection("footer", true)
    </footer>
</body>
</html>

حال قصد داریم که از این  Layout View به عنوان Layout View مربوط به فایل Index.cshtml که در فولدر Home قرار داده شده است و در HomeController مورد استفاده قرار می گیرد استفاده کنیم. به منظور اضافه کردن Index.cshtml به عنوان یک View بر روی متد Index از HomeController راست کلیک کرده و سپس گزینه ی Add View را انتخاب کنید. برای قسمت Template از گزینه ی Empty استفاده کنید و در قسمت Use a layout page از _myLayoutPage.cshtml استفاده کنید و دکمه ی Add را کلیک کنید. این موضوع در تصویر زیر نشان داده شده است.

layout view 4 - بررسی ایجاد کردن یک Layout View در ASP.NET MVC

بسته ی آموزش ویدئویی ASP.NET Web Forms و Entity Framework در قالب پروژه

از شما دعوت می کنیم که از بسته ی آموزش ویدئویی ASP.NET Web Forms و Entity Framework در قالب پروژه دیدن کنید.

کد زیر محتوای مربوط به فایل Index.cshtml را نشان می دهد.

@{
    ViewBag.Title = "Home Page";
    Layout = "~/Views/Shared/_myLayoutPage.cshtml";
}

<h2>Index</h2>

حال که قرار است Index.cshtml از _myLayoutPage.cshtml به عنوان Layout View خود استفاده کند نیازمند است که یک Section با نام Footer را در درون خود تعریف کند. به منظور تعریف کردن این قسمت باید از دستور @section footer استفاده کنید. این موضوع در کد زیر نشان داده شده است.

@{
    ViewBag.Title = "Home Page";
    Layout = "~/Views/Shared/_myLayoutPage.cshtml";
}

<div class="jumbotron">
    <h2>Index</h2>
</div>
<div class="row">
    <div class="col-md-4">
        <p>This is body.</p>
    </div>
    @section footer{
        <p class="lead">
            This is footer section.
        </p>
    }
</div>

حال می توانیم برنامه را اجرا کنیم و ببینیم که View اصلی برنامه که همان Index نام دارد حاوی قسمتهای Body و Footer می باشد. این موضوع در تصویر زیر نشان داده شده است.

layout view 5 - بررسی ایجاد کردن یک Layout View در ASP.NET MVC

پس به منظور ایجاد کردن یک Layout View و سپس استفاده کردن از آن در View های برنامه می توانیم براحتی یک  Layout View را ایجاد کرده و از متدهای RenderBody و RenderSection نیز استفاده کنیم.

امیدواریم که این آموزش از وبسایت پرووید نیز مورد توجه تمامی دوستان عزیز قرار گرفته باشد. از شما دعوت می‌کنیم که از دیگر آموزش های ما در رابطه با فریم ورک MVC استفاده کنید. لیست کامل این آموزش ها را می توانید در پست مربوط به آموزش کامل توسعه وب اپلیکیشن با ASP.NET MVC مشاهده کنید.

مرتضی گیتی
بدون نظر

ارسال نظر

نظر
نام
ایمیل
وب سایت