۵
شهریور

جلسه ۳۰ : ایجاد layout view در ASP.NET MVC

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

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

فهرست

مقدمه

با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش ASP.NET MVC ، را دنبال می کنند. در بخش قبلی توضیحاتی برای آشنایی مقدماتی با layout view در ASP.NET MVC و نحوه ی عملکرد آن ارائه کردیم. حالا سوال چگونگی ایجاد layout view در ASP.NET MVC مطرح می شود. مراحل ایجاد layout view در ASP.NET MVC بسیار ساده و آسان است. در ادامه ی آموزش این بخش ما چگونگی ایجاد layout view در ASP.NET MVC را ارائه کرده ایم.

ایجاد layout view در ASP.NET MVC

مراحل ایجاد layout view

برای ایجاد layout view در برنامه ی Visual Studio، روی فولدر shared راست کلیک کرده و مسیر ..select Add -> New Item را انتخاب نمایید.

در پنجره ی Add New Item گزینه ی (MVC 5 Layout Page (Razor را انتخاب کرده و پس از تایپ نام “_myLayoutPage.cshtml” برای صفحه ی layout روی Add کلیک کنید.

مراحل ایجاد layout view - 1

سپس شما فایل _myLayoutPage.cshtml را مشاهده خواهید کرد:

مثال :

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

<!DOCTYPE html>

<html>

<head>

<title>@ViewBag.Title</title>

</head>

<body>

<div>

@RenderBody()

</div>

</body>

</html>

حالا، تگ <footer> را با متد (RenderSection("footer",true به همراه سایر طراحی ها، اضافه کنید.

به این نکته توجه کنید که ما این بخش را ضروری می سازیم. این به این معنی است که هر نمایه که از فایل _myLayoutPage استفاده می کند، به عنوان layout view باید یک بخش footer داشته باشد.

مثال- افزودن RenderSection :

مثال :

<!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>

<!DOCTYPE html>

<html>

<head>

<title>@ViewBag.Title</title>

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

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

</head>

<body>

<div>

@RenderBody()

</div>

@RenderSection("footer", true)

</footer>

</body>

</html>

حالا می خواهیم از فایل _myLayoutPage.cshtml با Index view از HomeController استفاده کنیم.

شما می توانید یک Index view خالی را با راست کلیک روی متد اجرایی Index از HomeController و سپس Add View را انتخاب کنید.

Empty را در قالب scaffolding و _myLayoutPage.cshtml را به عنوان layout view انتخاب کرده و سپس روی Add کلیک کنید.

افزودن Index view

سپس فایل create Index.cshtml نمایش داده خواهد شد:

مثال :

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

<h2>Index</h2>

ViewBag.Title = "Home Page";

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

}

<h2>Index</h2>

حالا یک نمایه Index ایجاد کرده ایم که از _myLayoutPage.cshtml به عنوان یک layout view استفاده می کند.

حالا ما یک بخش footer نیز به طراحی اضافه می کنیم. زیرا _myLayoutPage به یک بخش 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>

ViewBag.Title = "Home Page";

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

}

<h2>Index</h2>

</div>

</div>

@section footer{

This is footer section.

</p>

}

</div>

در نهایت پس از اجرای برنامه Index view را مشاهده خواهید کرد که شامل body و footer است.

نتیجه ی اجرای Index View

کلام آخر

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

QR: جلسه ۳۰ : ایجاد layout view در ASP.NET MVC

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

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

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

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

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

جلسه ۳۰ : ایجاد layout view در ASP.NET MVC

مقدمه

ایجاد layout view در ASP.NET MVC

مراحل ایجاد layout view

کلام آخر

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

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

آموزش Html helper

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

نمای طراحی

تکنیک Bundling

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ