یادگیری سی شارپ از مفاهیم پایه تا پروژه محور: شی‌گرایی، کار با SQL و LINQ، ORMها (Entity Framework)، ساخت پروژه مدیریت رستوران با گزارشات حرفه‌ای و امکانات کامل!
مشاهده بیشتر
یادگیری MVC Core از مبانی تا پیشرفته: شی‌گرایی، Routing، Entity Framework، امنیت، تست یونیت، Razor، Ajax، و پروژه‌های کاربردی! یک دوره کامل برای تسلط بر توسعه وب با ASP.NET Core. به صورت حضوری و آنلاین!
مشاهده بیشترمشخصات مقاله
-
1217
-
0.0
-
4522
-
0
-
0
آموزش ایجاد Layout View در ASP.Net MVC
آموزش ایجاد Layout View در ASP.Net MVC :
برای ایجاد یک فایل الگو (Layout View) در ویژوال استودیو، در منوی Solution Explorer پروژه ، بر روی پوشه shared folder کلیک راست کرده و سپس گزینه های Add و New Item را انتخاب نمایید. همانند تصویر زیر، در پنجره Add New Item، گزینه MVC 5 Layout Page (Razor) را انتخاب کرده و در قسمت layout page name نام “_my Layout Page.cshtml” را تعیین کرده و دکمه Add را بزنید :
برنامه فایل _myLayoutPage.cshtml را با کدی همانند کد زیر، برای شما ایجاد خواهد کرد :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
</head>
<body>
<div>
@RenderBody()
</div>
</body>
</html>
سپس تگ <footer> را با استفاده از متد Reuder Section(“footer”, true) به همراه style های مورد نظر خود، ایجاد نمایید. توجه داشته باشید که با به کار بردن پارامتر true، بخش footer section را اجباری (Required) تعیین کرده ایم. به این معنی که هر view ای که از قالب myLayoutPage به عنوان LayoutPage خود استفاده می کند، بایستی دارای بخش 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>
حال بیایید از فایل _myLayoutPage.cshtml در Index View کلاس HomeController استفاده کنیم.
می توانید یک Index View خالی را با کلیک درون متد اجرایی (action method) کلاس HomeController و انتخاب گزینه Add View اضافه نمایید. هماند تصویر زیر یک تمپلیت خالی Empty Scaffolding را در بخش Template انتخاب نموده و فایل _myLayoutPage را به عنوان Layout View تعیین نمایید. در پایان بر روی دکمه Add کلیک کنید :
عملیات فوق، فایل Index.cshtml را ایجاد خواهد کرد :
@{
ViewBag.Title = "Home Page";
Layout = "~/Views/Shared/_myLayoutPage.cshtml";
}
<h2>Index</h2>
در نتیجه، اکنون شما یک Index View را ایجاد کرده اید که از الگو _myLayoutPage.cshtml به عنوان Layout View استفاده می کند. در مرحله بعدی، بخش footer.Section را به همراه style های مورد نظرمان به صفحه اضافه خواهیم کرد، زیرا در _myLayoutPage، فوتر یک بخش اجباری (Required) است :
@{
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>
حال، برنامه را اجرا کرده وخواهید دید که Index View حاوی بخش های body و footer، همانند تصویر زیر است :
از عملیات فوق نتیجه می گیریم، می توان یک layout view جدید را با متدهای Reudering مختلف، ایجاد نماییم.