ASP.NET - MVC - Layout View
Layout View
Một ứng dụng có thể chứa các phần chung trong giao diện người như logo, tiêu đề, menu trái , menu phải hoặc footer. ASP.NET MVC đã giới thiệu một giao diện Bố cục chứa các phần UI chung này, do đó chúng ta không phải viết cùng một mã trong mỗi trang. Giao diện bố cục giống như trang chính của ứng dụng webform ASP.NET.
Ví dụ: Giao diện người dùng ứng dụng có thể chứa Header, Thanh menu bên trái, thanh menu bên phải và phần footer vẫn giữ nguyên trong mỗi trang và chỉ phần Center thay đổi.
Layout cho phép bạn xác định một mẫu trang web chung, có thể được kế thừa trong nhiều view để cung cấp giao diện nhất quán nhiều trang trong một ứng dụng. Layout bố trí giúp loại bỏ mã hóa trùng lặp và tăng cường tốc độ phát triển và bảo trì dễ dàng. Giao diện bố trí cho giao diện người dùng ở trên sẽ chứa phần Header, Menu bên trái, Thanh bên Right và Phần Footer. Nó chứa một placeholdernằm ở Center để dễ dàng thay đổi nội dung.
Trong Razor các layout có cùng phần mở rộng giống các view khác cshtml hoặc .vbhtml. Các layout này được chia sẻ với nhiều views vì vậy nó phải được lưu trong thư mục Shared. Ví dụ: khi chúng ta tạo ứng dụng MVC đầu tiên của mình trong phần trước, nó cũng đã tạo _Layout.cshtml trong thư mục Shared như hiển thị bên dưới.
Sau đây là _Layout.cshtml được tạo tự động.
<!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>
Như bạn có thể thấy, layout chứa html, header và body là các thẻ html bình thường, sự khác biệt duy nhất là gọi các phương thức RenderBody () và RenderSection (). RenderBody hoạt động như một trình giữ chỗ cho các views khác. Ví dụ: Index.cshtml trong thư mục home sẽ được chèn và hiển thị trong layout, trong đó phương thức RenderBody () sẽ được gọi.
Sử dụng Layout
Bạn phải tự hỏi rằng làm thế nào để View biết nên sử dụng Layout nào?
Bạn có thể đặt layout theo nhiều cách, bằng cách sử dụng _ViewStart.cshtml hoặc thiết lập đường dẫn của layout bằng thuộc tính layout trong view riêng lẻ hoặc gọi layout trong phương thức.
_ViewStart.cshtml
Theo mặc định, ViewStart.cshtml nằm trong thư mục Views. Nó thiết lập trang layout mặc định cho tất cả các view trong thư mục và các thư mục con bằng thuộc tính Layout. Bạn có thể chỉ định đường dẫn hợp lệ của bất kỳ trang Layout nào cho thuộc tính Layout.
Ví dụ: Tập tin _ViewStart.cshtml trong thư mục Views, đặt thuộc tính Layout thành "~/Views/Shared/_Layout.cshtml". Vì vậy, bây giờ, _layout.cshtml sẽ là layout của tất cả các view nằm trong thư mục Views và thư mục con. Vì vậy, Các trng mặc định sẽ kế thừa từ _ViewStart.cshtml trong thư mục Views.
Tập tin ViewStart.cshtml cũng có thể nằm trong thư mục con của thư mục View. Mặc định các trang layout cho tất cả các view chỉ nằm trong thư mục con cụ thể.
Ví dụ: Tập tin _ViewStart.cshtml trong thư mục Home, đặt thuộc tính Layout thành _myLayoutPage.cshtml. Vì vậy, _ViewStart.cshtml sẽ chỉ ảnh hưởng đến tất cả các views trong thư mục Home. Vì vậy, bây giờ, các Views: Index, About và Contact sẽ được hiển thị trong _myLayoutPage.cshtml thay vì _Layout.cshml mặc định.
Cài đặt thuộc tính Layout cho từng views
Bạn cũng có thể ghi đè trang layout mặc định được đặt bởi _ViewStart.cshtml bằng cách đặt thuộc tính Layout trong mỗi view .cshtml riêng lẻ. Ví dụ: view Index sử dụng _myLayoutPage.cshtml khi đó ta đổi _ViewStart.cshtml thành _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 »</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 »</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 »</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 »</a></p>
</div>
</div>
Gọi trang Layout trong phương thức ActionResult
Bạn cũng có thể chỉ định trang layout nào trong View() bằng phương thức.
Ví dụ sau trong phương thức View() hiển thị Index bằng cách sử dụng _myLayoutPage.cshtml.
public class HomeController : Controller
{
public ActionResult Index()
{
return View("Index", "_myLayoutPage");
}
public ActionResult About()
{
return View();
}
public ActionResult Contact()
{
return View();
}
}
Các phương thức hiển thị
ASP.NET MVC hiển thị các Views sử dụng các phương thức sau:
Phương thức | Giải thích |
---|---|
RenderBody() | Hiển thị phần của view con không nằm trong phần được đặt tên. Layout phải có phương thức RenderBody (). |
RenderSection(string name) | Hiển thị nội dung của phần được đặt tên và chỉ định xem phần đó có bắt buộc không. RenderSection () là tùy chọn trong Layout. |
Hình dưới đây minh họa việc sử dụng các phương thức RenderBody và RenderSection.
Như bạn có thể thấy trong hình trên, _Layout.cshtml bao gồm phương thức RenderBody () và phương thức RenderSection (). Các phương thức RenderSection chỉ định tên của một phần như LeftSection, MiddleSection và RightSection trong hình trên. Index.cshtml định nghĩa phần được đặt tên bằng cách sử dụng @section trong đó tên của từng phần khớp với tên được chỉ định trong phương thức RenderSection của _Layout.cshtml, chẳng hạn như @Section RightSection, v.v. Vào thời gian chạy, các phần được đặt tên của Index.cshtml như LeftSection, RightSection và MiddleSection sẽ được hiển thị tại vị trí thích hợp nơi phương thức RenderSection được gọi. Phần còn lại của chế độ xem Chỉ mục, không nằm trong bất kỳ phần nào được đặt tên sẽ hiển thị nơi phương thức RenderBody () đang được gọi.