یادگیری سی شارپ از مفاهیم پایه تا پروژه محور: شی‌گرایی، کار با SQL و LINQ، ORMها (Entity Framework)، ساخت پروژه مدیریت رستوران با گزارشات حرفه‌ای و امکانات کامل!
مشاهده بیشتر
یادگیری MVC Core از مبانی تا پیشرفته: شی‌گرایی، Routing، Entity Framework، امنیت، تست یونیت، Razor، Ajax، و پروژه‌های کاربردی! یک دوره کامل برای تسلط بر توسعه وب با ASP.NET Core. به صورت حضوری و آنلاین!
مشاهده بیشترمشخصات مقاله
-
1415
-
0.0
-
5312
-
0
-
0
آموزش کار با صفحات الگو ASP.Net MVC Layout Page
آموزش کار با Layout View در ASP.Net MVC :
در این درس به آموزش کار با صفحات layout view یا صفحات الگو در چهارچوب کاری ASP.Net MVC خواهیم پرداخت.
یک نما الگو یا Layout View چیست ؟
هر اپلیکیشن تحت وب یا سایت ممکن است بخش های مشترکی در UI خود داشته باشد که در تمامی صفحات به صورت یکسان، تکرار می شوتد. از جمله این بخش ها می توان به لوگو، هدر صفحه، منوی سمت راست و چپ و یا قسمت فوتر اشاره کرد.
چهارچوب کاری ASP.Net MVC دارای یک امکان به نام صفحات الگو یا Layout View است که شامل بخش های مشترک در UI شده و به این صورت دیگر نیاز نخواهید داشت تا این قسمت ها را در هر صفحه مجددا بنویسید. صفحات الگو یا Layout View کاملا عملکردی مشابه مسترپیج ها در زبان ASP.Net دارند.
برای مثال، یک برنامه یا صفحه وب، همانند تصویر زیر، ممکن است شامل بخش های مشترک هدر، منوسمت چپ، منو راست و بخش فوتر باشد که در تمامی صفحات به صورت مشترک تکرار می شوند و فقط بخش مرکزی Centre Section دینامیکی تغییر می کنند.
Layout View امکان ایجاد یک تمپلیت مشترک جهت سایت را فراهم می کند. از این تمپلیت را می توان به تمامی View های وب سایت اعمال کرد تا ظاهری یکسان و منسجم در کل صفحات داشته باشیم. صفحات الگو (layout view)، کدنویسی تکراری را در طراحی سایت حذف نموده و سرعت به روزرسانی و اعمال تغییر در ظاهر صفحات را بسیار افزایش می دهد. Layout view برای عکس مثال فوق، شامل یک هدر، منو سمت چپ، نوار سمت راست و یک فوتر مشترک است. همچنین این view شامل یک جا نما (Placeholder) برای بخش میانی صفحه بوده که همانند تصویر زیر، محتوی آن برای هر view به صورت دینامیکی تغییر می کند :
فایل های Razor Layout View، همانند سایر MVC View ها دارای پسوند .chhtml و .vbhtml هستند. Layout Views به صورت مشترک بین سایر View ها به کار می رود، بنابراین بایستی در پوشه Shared Folder قرار بگیرند. برای مثال، همانطور که در درس ایجاد اولین برنامه MVC مشاهده کردید، برنامه به صورت پیش فرض یک فایل به نام _Layout.cshtml را در پوشه Shared Folder، هماند تصویر زیر ایجاد کرد :
همچنین کد اولیه صفحه layout view به صورت زیر بوده است :
<!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>© @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 همانند صفحات معمولی html، شامل عناصر Doctype، head و body بوده و تنها فرق آن ها وجود دو متد ()RenderBody و ()RenderSection است. متد ()RenderBodey همانند یک جا نما (Placeholder) برای view عمل می کند. برای مثال، فایل Index.cshtml در پوشه home folder در جایی که متد ()RenderBody فراخوانی می شود، در صفحه اضافه شده و نمایش داده خواهد شد. درباره این متدهای اجرا کننده در ادامه آموزش خواهیم داد.
آموزش استفاده از Layout View در ASP.Net MVC :
در این بخش به آموزش این مسئله خواهیم پرداخت که هر View چگونه می تواند بفهمد از چه Layout View ای استفاده نماید.
شما می توانید Layout View را برای هر صفحه به صورت های مختلفی تعیین نمایید :
- استفاده از فایل ViewStart.cshtml.
- تعیین آدرس layout page در خاصیت Layout Property هر View به صورت جداگانه.
- تعیین نام layout view در متد اجرایی action method.
آموزش نحوه استفاده از فایل _ViewStart.cshtml :
فایل _ViewStart.cshtml به صورت پیش فرض در پوشه Views قرار دارد. این فایل آدرس layout page پیش فرض را برای تمامی view های موجود در پوشه views و پوشه های زیرمجموعه آن با استفاده از خاصیت Layout Property تعیین می کند.
برای مثال، فایل _ViewStart.cshtml موجود در پوشه Views تصویر زیر، مقدار خاصیت Layout Property را برابر با آدرس U~/Views/Shared/_Layout.cshtml قرار می دهد. بنابراین از این به بعد، فایل _Layout.cshtml فایل الگو یا layout view کلیه view های موجود در پوشه Views و پوشه های زیرمجموعه آن خواهد بود. بنابراین، به صورت پیش فرض، کلیه View ها، چهارچوب خود را از _ViewStart.cshtml پوشه View به ارث خواهند برد :
آموزش تنظیم Layout Property در View :
می توانید فایل الگو layout page پیش فرض تعیین شده توسط _ViewStart.cshtml را با تعیین خاصیت Layout Property در هر View به صورت اختصاصی، نادیده گرفته و layout مورد نظر خود را به صفحه اعمال کنید. برای مثال، صفحه Index view زیر از فایل الگو _myLayoutPage.cshtml، علی رغم تعیین فایل _ViewStart.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="www.asp.net" class="btn btn-primary btn-lg">Learn more »</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="www.go.microsoft.com/fwlink/?LinkId=301865">Learn more »</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="www.go.microsoft.com/fwlink/?LinkId=301866">Learn more »</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="www.go.microsoft.com/fwlink/?LinkId=301867">Learn more »</a></p>
</div>
</div>
آموزش تعیین Layout Page در متد اجرایی action method :
می توانید با استفاده از متد اجرایی ()View در هنگام تولید صفحه، فایل Layout page را برای view مورد نظر، تعیین کنید.
در کد مثال عملی زیر، با استفاده از متد 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();
}
}
آموزش متدهای تولید صفحه Rendering Methods :
چهارچوب کاری ASP.Net MVC از متدهای اجرایی زیر، برای تولید View های فرزند استفاده می کند :
تصویر زیر، استفاده از متدهای RenderBody و RenderSection را در عمل آموزش داده است :
همانطور که در کد فوق مشاهده می کنید، فایل Layout.cshtml شامل متدهای ()RenderBody و ()RenderSection می باشد. متدهای ()RenderSection نام بخش های مختلفی از صفحه مثل LeftSection، MiddleSection و RightSection را تعیین کرده اند. فایل Index.Cshtml قسمت ها (section) های مختلف را با استفاده از @section تعیین کرده که در آن، نام هر section هم نام با نام تعیین شده در متد ()REnderSection فایل _Layout.cshtml است، برای مثال، @Section RightSection و ... . در زمان اجرا، قسمت های با نام فایل Index.cshtml مثل LeftSection و RightSection در جاهایی متناظری که متد RenderSection فراخوانی شده اند، قرار خواهند گرفت.
بقیه بخش های Index View که در هیچ کدام از قسمت های با نام Section نیستند در جایی که متد ()RenderBodey فراخوانی شده است، قرار می گیرند.
برای درک بهتر متدهای Render Methods، در درس بعدی به ایجاد یک layout view پرداخته ایم.
نکاتی که بایستی به خاطر بسپارید :
- صفحه الگو یا Layout View شامل بخش های مشترک صفحات یک سایت یا UI هستند. این فایل ها همانند متدپیج در زبان ASP.Net می باشند.
- می توان فایل _ViewSart.cshtml را به عنوان layout page پیش فرض سایت تعیین نمود. این فایل به تمامی view های پوشه Views و زیرپوشه های آن اعمال خواهد شد.
- می توانید با تعیین یک فایل به عنوان الگو در خاصیت Layout Property هر View، فایل layout view پیش فرض برای صفحه را نادیده گرفته و قالب مورد نظر خود را اعمال کنید.
- فایل های Layout View از دو متد برای تولید صفحات استفاده می کند : متد ()RenderBody و متد RenderSection.
- در یک فایل layout view، متد ()RenderBody را فقط یک بار می توانید استفاده کنید، در حالی که از متد ()RenderSection به دفعات دلخواه و با نام های مختلف می توان در مکان گوناگون صفحه استفاده کرد.
- متد ()RenderBody، کلیه محتویات یک View را که در بخش های دارای نام (named section) نیستند، را تولید می کند.
- متد ()RenderSection، بخش هایی از صفحه را که در قسمت های دارای نام (named section) هستند را تولید می کند.
- قسمت های RenderSection را می توان اجباری (Required) و یا دلخواه (optional) تعیین کرد. اگر یک RenderSection، اجباری تعیین شود، view های فرزند آن الگو، بایستی حاوی Section مورد نظر، باشند.