۵
شهریور

جلسه ۲۹ : نمای طراحی در ASP.NET MVC

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزش تصویری

فهرست

مقدمه

با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش ASP.NET MVC ، را دنبال می کنند. یک برنامه ممکن است شامل بخش های رایج رابط کاربری باشد که از جمله می توان به بخش های آرم، هدر، نوار ناوبری سمت چپ، نوار راست یا بخش بالا و پایین صفحه اشاره کرد. ASP.NET MVC یک layout view (نمایه طراحی) را که حاوی این قسمت های مشترک است را معرفی کرد، با استفاده از layout view در ASP.NET MVC ما مجبور نیستیم همان کد را در هر صفحه بنویسیم. نمایه طراحی مشابه master page برنامه وب فرم ASP.NET است. در این بخش به بررسی مباحثی در خصوص نمای طراحی در ASP.NET MVC می پردازیم.

نمای طراحی در ASP.NET MVC

در این بخش به شما مباحثی را پیرامون layout view در ASP.NET MVC خواهیم آموخت.

یک صفحه وب معمولا شامل بخش های Header ، منوی راست یا چپ و footer است. این بخش ها در هر صفحه مشترک بوده و تنها بخش های مرکزی ، تغییر می کنند:

نمای طراحی در ASP.NET MVC

نمای طراحی در ASP.NET MVC اجازه می دهد تا شما یک قالب سایت مشترک را تعریف کنید که می تواند در چندین نمایه به ارث برده شود.

استفاده از نمای طراحی (layout view) به منظور حذف کدهای تکرار و افزایش سرعت برنامه بسیار ساده و آسان است.

در شکل فوق، نمای طراحی شامل بخش های Header ، منوی راست و چپ ، بخش مرکزی و Footer (پاصفحه) است، که بخش مرکزی پویا بوده و در هرصفحه وب متغیر است.

بخش مرکزی طراحی

نمای طراحی Rozar همانند نماهای دیگر نظیر .cshtml یا .vbhtml است. نمایه های طراحی مشترک در فولدر Shared ذخیره می شوند.

برای مثال زمانیکه ما اولین برنامه ی mvc خود را در بخش های قبلی ایجاد کردیم، نمایه Layout.cshtml_ را نیز در فولدر Shared ایجاد کردیم.

نمایه layout

در کد مثال زیر بصورت خودکار نمایه ی 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>

<!DOCTYPE html>

<html>

<head>

<title>@ViewBag.Title - My ASP.NET Application</title>

@Styles.Render("~/Content/css")

@Scripts.Render("~/bundles/modernizr")

</head>

<body>

</button>

@Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })

</div>

<li>@Html.ActionLink("Home", "Index", "Home")</li>

<li>@Html.ActionLink("About", "About", "Home")</li>

<li>@Html.ActionLink("Contact", "Contact", "Home")</li>

</ul>

</div>

@RenderBody()

<hr />

<p>© @DateTime.Now.Year - My ASP.NET Application</p>

</footer>

</div>

@Scripts.Render("~/bundles/jquery")

@Scripts.Render("~/bundles/bootstrap")

@RenderSection("scripts", required: false)

</body>

</html>

همانطور که در کد فوق مشاهده می کنید نمایه طراحی شامل بخش های اصلی Doctype ، head ، body است. و فقط بخش هایی که با متدهای ()RenderBody و ()RenderSection فراخوانی می شوند متفاوت است. RenderBody برای نمایش بخش های انعطاف پذیر طراحی بکار می رود.

به عنوان مثال Index.cshtml در فولدر home در نمای طراحی قرار می گیرد. در جایی که متد ()RenderBody فراخوانی می شود.

استفاده از layout view در ASP.NET MVC

می توانید با استفاده از _ViewStart.cshtml از طریق متد _ViewStart.cshtml نمای چیدمان را تنظیم کنید.

همچنین می توانید نام نمای طراحی را در متد اجرایی مشخص کنید.

_ViewStart.cshtml بصورت پیش فرض شامل فولدر Views می شود. که نمایه طراحی پیش فرض را برای تمام نمایه ها در فولدر قرار می دهد.

شما می توانید یک مسیر معتبر را برای هر طراحی صفحه در ویژگی Layout قرار دهید.

برای مثال فایل _ViewStart.cshtml در فولدر Views ، ویژگی Layout را به آدرس “~/Views/Shared/_Layout.cshtml” تنطیم می کند.

سپس _layout.cshtml به عنوان نمایه طراحی برای تمام نمایه ها در زیر فولدرها خواهد شد.

بنابراین تمام نمایه ها صفحه طراحی پیش فرض را _ViewStart.cshtml در فولدر Views می گیرند.

نمایه طراحی اصلی

همچنین فایل _ViewStart.cshtml می تواند در زیر فولدرهای View به عنوان طراحی پیش فرض برای تمام نمایه ها مشخص شود.

برای مثال فایل _ViewStart.cshtml در فولدر Home ویژگی Layout را با _myLayoutPage.cshtml تنظیم می کند.

بنابراین _ViewStart.cshtml بر روی تمام نمایه ها در فولدر Home تاثیر می گذارد.

بنابراین نمایه های _myLayoutPage.cshtml به جای _Layout.cshml بارگذاری می شوند.

نتایج نمایه طراحی

شما همچنین می توانید صفحه تنظیمات پیش فرض _ViewStart.cshtml را با تنظیم خصوصیت Layout در هر نمای .cshtml غیرفعال کنید. برای مثال، نمای Index زیر از _myLayoutPage.cshtml استفاده می کند، حتی اگر _ViewStart.cshtml _Layout.cshtml را تنظیم کند.

مثال :

@{
    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>

ViewBag.Title = "Home Page";

Layout = "~/Views/Shared/_myLayoutPage.cshtml";

}

<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 »</a></p>

</div>

<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 »</a></p>

</div>

<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 »</a></p>

</div>

<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 »</a></p>

</div>

در مثال زیر متد () View نمای Index view را با استفاده از _myLayoutPage.cshtml بارگذاری می کند:

مثال :

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

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

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

public class HomeController : Controller

{

public ActionResult Index()

{

return View("Index", "_myLayoutPage");

}

public ActionResult About()

{

return View();

}

public ActionResult Contact()

{

return View();

}

متدهای Rendering

فریم ورک MVC با استفاده از دو متد زیر نمایه های زیر مجموعه را بارگذاری می کند:

()RenderBody
(نام رشته)RenderSection

شکل زیر چگونگی استفاده از متدهای RenderBody و RenderSection را نشان می دهد:

چگونگی استفاده از متدهای RenderBody و RenderSection

همانطور که در شکل بالا می بینید، _Layout.cshtml شامل متدهای ()RenderBody و ()RenderSection است.

متد RenderSection نام بخش هایی از قبیل LeftSection، MiddleSection و RightSection را در شکل بالا مشخص می کند.

Index.cshtml هر بخش را با استفاده از section تعریف می کند که نام هر قسمت با نام مشخص شده در متد RenderSection از _Layout.cshtml، مانندSection RightSection و غیره مطابقت دارد.

در زمان اجرا، بخش های نامشخص از Index.cshtml مانند LeftSection، RightSection و MiddleSection در مکان مناسب که RenderSection نامیده می شود ارائه می شود.

بقیه بخش نمایش Index، که در هیچ کدام از بخش ها فراخوانی نمی شود، در صورت استفاده از متد () RenderBody فراخوانی خواهد شد.

نکات زیر را به خاطر بسپارید:

۱- Layout view (نمای اصلی طراحی) شامل بخش های عمومی یک طراحی است، که مشابه masterpage در ASP.NET عمل می کند.

۲- فایل _ViewStart.cshtml می تواند برای تشخیص مسیر نمای طراحی استفاده شود که به تمام نمایه های فولدر و زیر فولدرها اعمال خواهد شد.

۳- شما می توانید ویژگی های طراحی را در نمای شخصی تنظیم کنید تا ویژگی های پیش فرض در _ViewStart.cshtml استفاده نشود.

۴- نمای طراحی از دو متد ()RenderBody و ()RenderSection استفاده می کند.

۵- RenderBody فقط می تواند یکبار در نمای طراحی استفاده شود، در حالیکه متد RenderSection می تواند در زمانهای مختلف و با نام ها ی گوناگون فراخوانی شود.

۶- متد RenderBody تمام محتوای نمایه را در بخش نامگذاری شده بارگذاری می کند.

۷- متد RenderSection محتوای داخل یک نمایه را در بخش نامگذاری شده بارگذاری می کند.

۸- RenderSection را می توان بطور ضروری یا اختیاری تنظیم کرد. اگر ضروری باشد سپس تمام نمایه های زیر مجموعه باید شامل بخش نامیده شده باشد.

کلام آخر

با استفاده از نمای طراحی در ASP.NET MVC می توانید کدهای html تکراری را از صفحات وب خود حذف کرده و با اینکار هم سرعت طراحی را افزایش داده و هم حجم کدهای صفحات وب خود را به اندازه ی قابل توجهی کم کنید. در بخش بعدی به چگونگی ایجاد layout view می پردازیم.

به اشتراک بگذارید

layout view در ASP.NET MVC ,آموزش asp از مقدماتی تا پیشرفته ,آموزش asp.net mvc ,آموزش برنامه نویسی ,آموزش تصویری asp.net mvc ,دوره کامل آموزش asp.net mvc ,نمای طراحی در ASP.NET MVC

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۲۹ : نمای طراحی در ASP.NET MVC

مقدمه

نمای طراحی در ASP.NET MVC

استفاده از layout view در ASP.NET MVC

متدهای Rendering

کلام آخر

لیست مطالب دوره

مقدمات آموزش ASP.NET MVC

آموزش Html helper

اعتبارسنجی در ASP.NET MVC

نمای طراحی

تکنیک Bundling

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ