بررسی ماهیت و کاربرد Layout View ها در ASP.NET MVC

بررسی ماهیت و کاربرد Layout View ها در ASP.NET MVC

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

برای تمامی کسانی که در توسعه ی نرم افزارهای وب فعالیت دارند این موضوع بسیار قابل لمس است که قسمتهای مشترکی در واسط کاربری یا همان UI برنامه وجود دارد که در قسمتهای مختلف برنامه مشترکاً استفاده خواهد شد. برای مثال قرار دادن یک Logo و یا Header، قراردادن Navigation Bar در سمت چپ و یا حتی در سمت راست Web Application و قرار دادن Footer بخشهایی هستند که در تمامی قسمتهای یک Web Application مشترکاً استفاده می شوند.

در فریم ورک ASP.NET MVC مفهوم Layout View معرفی شد که با استفاده از آن می توانید قسمتهای مشترکی که در User Interface برنامه وجود دارند را تعریف کرده تا مجبور نباشید کدهای تکراری را در تمامی  View های برنامه قرار بدهید. در واقع ماهیت Layout View در فریم ورک ASP.NET MVC شبیه به Master Page ها در ASP.NET Web Forms می باشد.

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

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

برای مثال فرض کنید یک Web Application از یک Header و یک Menu Bar و همچنین یک قسمت Footer و دیگر قسمتهای مشترکی که در تمامی صفحات باید وجود داشته باشند تشکیل شده است. در این Web Application فقط قسمت مرکزی است که بصورت پویا تولید شده و به کاربر نشان داده می شود. تصویر زیر این موضوع را نشان می دهد.

layout view 1 - بررسی ماهیت و کاربرد Layout View ها در ASP.NET MVC

با استفاده از Layout View در فریم ورک ASP.NET MVC می توانیم یک Template و یا الگوی مشترک را استفاده کرده و در دیگر View ها از آن استفاده کنیم تا ظاهر برنامه و صفحات مختلف آن یک قالب یکسان یا شبیه به هم را داشته باشند. با استفاده از Layout View از نوشتن کدهای تکراری نیز جلوگیری می شود که این خود هم باعث سرعت یافتن فرایند توسعه و راحت تر شدن فرایند نگهداری برنامه می شود.

layout view 2 - بررسی ماهیت و کاربرد Layout View ها در ASP.NET MVC

برای تصویری که در قسمت بالا مشاهده می کنید می توانیم یک Layout View ایجاد کنیم که شامل یک Header و یک Menu Bar در سمت چپ و همچنین یک Menu Bar در سمت راست و یک Footer باشد. علاوه بر این قسمت وسط که اصطلاحاً به آن Placeholder نیز می گوئیم بصورت پویا تولید شده و تک تک صفحات ساخته می شوند. در فریم ورک ASP.NET MVC تمامی View ها پسوند cshtml و یا vbhtml دارند و Layout View نیز از این قضیه مستثنی نیست. شاید جالب باشد بدانید که از آنجائیکه Layout View ها بصورت مشترک توسط دیگر View ها مورد استفاده قرار می گیرند باید در درون فولدر Shared قرار داده شوند.

برای مثال با ساختن یک Web Application با  ASP.NET MVC فایل _Layout.cshtml در فولدر  Shared شبیه به تصویر زیر ساخته خواهد شد.

layout view 3 - بررسی ماهیت و کاربرد Layout View ها در ASP.NET MVC

کدی که در قسمت زیر مشاهده می کنید محتوای فایل _Layout.cshtml را نشان می دهد.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

همانطور که در کد بالا مشاهده می کنید Layout View نیز حاوی مواردی از قبیل DOCTYPE و Head و Body می باشد. تفاوت اصلی Layout View با View های معمولی استفاده از متدهای RenderBody() و RenderSection() می باشد. متد RenderBody() شبیه به یک Placeholder عمل می کند که دیگر View ها در آن قرار داده می شوند. برای مثال Index.cshtml که در فولدر Home قرار داده شده است در مکانی که متد RenderBody() صدا زده می شود تزریق و نشان داده خواهد شد. در رابطه با متدهای دیگری که در کار کردن با Layout View ها وجود دارند در قسمتهای بعدی صحبت خواهیم کرد.

استفاده کردن از  Layout View

سوالی که ممکن است در این قسمت مطرح بشود اینست که یک View چگونه می تواند تشخیص بدهد که از کدام Layout View استفاده کند. برای تنظیم کردن یک Layout View برای استفاده شدن توسط یک View روشهای مختلفی وجود دارد. یکی از آنها استفاده کردن از _ViewStart.cshtml است و دیگر روش تنظیم کردن یک Property با نام Layout در تک تک View ها و سپس لحاظ کردن نام Layout View مورد نظر به عنوان مقدار این Property می باشد.

استفاده کردن از _ViewStart.cshtml

فایل _ViewStart.cshtml بصورت پیش فرض در فولدر Views قرار دارد. با استفاده از این فایل می توانید Layout View پیش فرضی که باید توسط دیگر View هایی که در این فولدر و زیر فولدرهای آن قرار دارند را تنظیم کنید. به منظور انجام اینکار از یک Property با نام Layout استفاده می کنید و مسیر  Layout View مورد نظر خود را برای آن در نظر می گیرید. برای مثال تصویر زیر فایل ViewStart.cshtml را در فولدر Views نشان می دهد که مقدار پروپرتی Layout آن با مقدار “~/Views/Shared/_Layout.cshtml” تنظیم شده است.

viewstart - بررسی ماهیت و کاربرد Layout View ها در ASP.NET MVC

بنابراین فایل _Layout.cshtml به عنوان Layout View پیش فرض تمامی View هایی که در فولدر Views و زیر فولدرهای آن قرار دارند استفاده خواهد شد.

علاوه بر این می توانید در هرکدام از زیر فولدرهای مربوط به فولدر Views یک فایل _ViewStart.cshtml مجزا ایجاد کرده و از طریق آن Layout View مربوط به View های موجود در آن فولدر را تنظیم کنید. برای مثال در تصویر زیر فایل _ViewStart.cshtml را مشاهده می کنید که در فولدر Home قرار داده شده است و پروپرتی  Layout آن به _myLayoutPage.cshtml تنظیم گردیده است.

viewstart home - بررسی ماهیت و کاربرد Layout View ها در ASP.NET MVC

با انجام اینکار تمامی View هایی که در فولدر Home قرار دارند از این فایل به عنوان  Layout View خود استفاده خواهند کرد. بنابراین View های Index و About و Contact با استفاده از _myLayoutPage.cshtml به عنوان Layout View خود، کار خود را دنبال خواهند کرد.

تنظیم کردن پروپرتی Layout در View ها بصورت تک تک

علاوه بر استفاده از فایل _ViewStart.cshtml می توانیم Layout View مربوط به تک تک View ها را نیز با استفاده از پروپرتی Layout آنها تنظیم کنیم. برای مثال کد زیر یک View با نام Index را نشان می دهد که از _myLayoutPage.cshtml به عنوان Layout View خود استفاده کرده است.

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

<div class="jumbotron">
    <h1>ASP.NET</h1>
    <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
    <p><a href="http://asp.net" class="btn btn-primary btn-lg">Learn more &raquo;</a></p>
</div>

<div class="row">
    <div class="col-md-4">
        <h2>Getting started</h2>
        <p>
            ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
            enables a clean separation of concerns and gives you full control over markup
            for enjoyable, agile development.
        </p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301865">Learn more &raquo;</a></p>
    </div>
    <div class="col-md-4">
        <h2>Get more libraries</h2>
        <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more &raquo;</a></p>
    </div>
    <div class="col-md-4">
        <h2>Web Hosting</h2>
        <p>You can easily find a web hosting company that offers the right mix of features and price for your applications.</p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301867">Learn more &raquo;</a></p>
    </div>
</div>

دقت کنید که هرچند در فایل _ViewStart.cshtml ما از فایل _Layout.cshtml به عنوان Layout View استفاده کرده ایم اما اولویت پروپرتی Layout در تک تک  View ها بیشتر است و در واقع مقدار این Property در این View مقدار تنظیم شده در فایل _ViewStart.cshtml را رونویسی و یا اصطلاحاً Override می کند.

تنظیم کردن Layout View در Action Method ها

یکی دیگر از روشهای تنظیم کردن یک Layout View استفاده کردن از متد View در Action Method های مربوط به یک Controller می باشد. برای مثال در کد زیر که متد Index() را نشان می دهد با استفاده از متد View() یک Layout View با نام _myLayoutPage.cshtml را برای Render کردن نتیجه ی متد Index() مورد استفاده قرار گرفته است.

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View("Index", "_myLayoutPage");
    }

    public ActionResult About()
    {
        return View();
    }

    public ActionResult Contact()
    {
        return View();
    }
}

بررسی متدهای Render

در Layout View ها از دو متد با نامهای RenderBody() و RenderSection() به منظور Render کردن View هایی که در آن Layout View قرار داده می شوند استفاده می گردد. جدول زیر این دو متد را نشان می دهد.

Rendering Methods - بررسی ماهیت و کاربرد Layout View ها در ASP.NET MVC

علاوه بر این تصویر زیر نمایانگر نحوه ی استفاده کردن از متدهای RenderBody() و RenderSection() را نشان می دهد.

layout view rendering - بررسی ماهیت و کاربرد Layout View ها در ASP.NET MVC

همانطور که در تصویر بالا مشاهده می کنید فایل _Layout.cshtml شامل متد RenderBody() و RenderSectoin() می باشد. متد RenderSection() نام یک Section و یا بخش، برای مثال LeftSection و MiddleSection و  RightSection را تنظیم می کند. علاوه بر این در فایل Index.cshtml از Section ها با استفاده از علامت @ و سپس نام آن  Section استفاده می شود. البته این نام باید با نام تنظیم شده در متد RenderSection() از فایل ­_Layout.cshtml برابر باشد. در زمان اجرای برنامه این Section ها که برای مثال  LeftSection و RightSection و MiddleSection نام دارند توسط View های مشخص و قسمتهایی که در Index.cshtml تعریف شده اند Render خواهند شد. دیگر قسمتهای مربوط به فایل Index.cshtml که به Section های خاصی تعلق ندارند در مکانی که متد RenderBody() صدا زده شده است قرار خواهند گرفت. در رابطه با ایجاد کردن یک Layout View بصورت عملی و استفاده کردن از آن در قسمت بعدی از همین آموزش صحبت خواهیم کرد.

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

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

ارسال نظر

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