Layout View trong ASP.NET MVC
Trong hướng dẫn này, bạn sẽ tìm hiểu về Layout View trong ASP.NET MVC.
Một ứng dụng có thể chứa một phần giao diện người dùng cụ thể được giữ nguyên trong toàn bộ ứng dụng, chẳng hạn như phần đầu trang (header), thanh điều hướng bên trái (left navigation bar), thanh bên phải (right bar) hoặc phần chân trang (footer).
ASP.NET MVC đã giới thiệu Layout View chứa các phần giao diện người dùng phổ biến này để chúng ta không phải viết mã giống nhau trong mọi trang. Layout View giống như master page của ứng dụng ASP.NET Web Form.
Ví dụ: giao diện người dùng ứng dụng có thể chứa phần đầu trang, thanh menu bên trái, thanh bên phải và phần chân trang vẫn giữ nguyên trên mọi trang. Chỉ phần trung tâm thay đổi động, như hình dưới đây.
Layout View cho phép bạn xác định một mẫu trang web chung, mẫu này có thể được kế thừa trong nhiều view để cung cấp giao diện nhất quán trong nhiều trang của một ứng dụng.
Layout View loại bỏ mã hóa trùng lặp và nâng cao tốc độ phát triển và dễ dàng bảo trì. Layout View cho giao diện người dùng mẫu ở trên sẽ chứa các phần đầu trang, menu bên trái, thanh bên phải và chân trang. Nó có một trình giữ chỗ (placeholder) cho phần trung tâm thay đổi động, như được hiển thị bên dưới.
Layout View có phần mở rộng giống như các view khác là .cshtml hoặc .vbhtml. Layout View được chia sẻ với nhiều view khác, vì vậy nó phải được lưu trữ trong thư mục Shared
. Theo mặc định, Layout View _Layout.cshtml
được tạo khi bạn Tạo ứng dụng ASP.NET MVC bằng Visual Studio, như được hiển thị bên dưới.
Sau đây là mã mặc định của _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>© @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 View chứa các thẻ HTML Doctype, head và body. Sự khác biệt duy nhất là các cuộc gọi đến phương thức RenderBody()
và RenderSection()
. Các view con sẽ hiển thị ở nơi phương thức RenderBody()
được gọi.
Sử dụng Layout View
Các view sẽ được hiển thị trong trình giữ chỗ RenderBody()
được gọi là view con. Có nhiều cách để chỉ định Layout View nào sẽ được sử dụng với view con nào. Bạn có thể chỉ định nó trong tập tin _ViewStart.cshtml
, trong view con hoặc trong một phương thức hành động (action method).
Chỉ định Layout View trong ViewStart
Mặc định _ViewStart.cshtml
được bao gồm trong thư mục Views
. Nó cũng có thể được tạo trong tất cả các thư mục con trong thư mục Views
. Nó được sử dụng để chỉ định các cài đặt chung cho tất cả các view trong một thư mục và các thư mục con nơi nó được tạo.
Thiết lập thuộc tính Layout
thành một Layout View cụ thể sẽ được áp dụng cho tất cả các view con trong thư mục đó và các thư mục con của nó.
Ví dụ: tập tin _ViewStart.cshtml
mặc định trong thư mục Views thiết lập thuộc tính Layout
thành "~/Views/Shared/_Layout.cshtml"
. Vì vậy, _layout.cshtml
sẽ là Layout View của tất cả các view nằm trong thư mục Views
và các thư mục con của nó.
_ViewStart.cshtml
cũng có thể được tạo trong các thư mục con của thư mục View
để thiết lập Layout View mặc định cho tất cả các view có trong thư mục con cụ thể đó.
Ví dụ: tập tin _ViewStart.cshtml
trong thư mục Home
thiết lập thuộc tính Layout
thành _myLayoutPage.cshtml
. Vì vậy, bây giờ các view Index.cshtml
, About.cshtml
và Contact.cshtml
trong thư mục Home
sẽ sử dụng _myLayoutPage.cshtml
làm Layout View thay vì _Layout.cshml
mặc định.
Chỉ định Layout View trong View con
Bạn cũng có thể ghi đè thiết lập Layout View mặc định của _ViewStart.cshtml
bằng cách thiết lập thuộc tính Layout
trong mỗi view con.
Ví dụ: View Index.cshtml
sau sử dụng Layout View _myLayoutPage.cshtml
thay vì _Layout.cshtml
được cấu hình trong _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="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>
Chỉ định Layout View trong phương thức hành động
Chỉ định tên Layout View làm tham số thứ hai trong phương thức View()
, như được hiển thị bên dưới. Theo mặc định, Layout View sẽ được tìm kiếm trong thư mục Shared
.
public class HomeController : Controller
{
public ActionResult Index()
{
return View("Index", "_myLayoutPage"); //set "_myLayoutView" as layout view
}
}
Phương thức kết xuất
Layout View trong ASP.NET MVC hiển thị các view con bằng cách sử dụng các phương thức sau.
Phương thức | Mô tả |
---|---|
RenderBody() | Hiển thị phần của view con không nằm trong phần được đặt tên. Layout view 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ó được yêu cầu hay không. |
Hình sau 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à RenderSection()
. Ở trên, Index.cshtml
chứa các phần được đặt tên bằng cách sử dụng @section
của mỗi phần khớp với tên được chỉ định trong phương thức RenderSection()
của layout view _Layout.cshtml
, ví dụ @Section RightSection
.
Khi thực thi, các tên phần của Index.cshtml
, chẳng hạn như LeftSection
, RightSection
và MiddleSection
sẽ được hiển thị vào vị trí thích hợp nơi phương thức RenderSection()
được gọi. Phần còn lại của view Index.cshtml
, không nằm trong bất kỳ phần nào được đặt tên, sẽ được hiển thị tại ví trí phương thức RenderBody()
được gọi.
Tạo Layout View trong ASP.NET MVC
Ở phần này bạn sẽ học cách tạo layout view bằng Visual Studio.
Bạn có thể tạo layout view trong bất kỳ thư mục nào trong thư mục Views
. Tuy nhiên, bạn nên tạo tất cả các layout view trong thư mục Shared
để dễ bảo trì.
Để tạo một layout view mới trong Visual Studio, nhấp chuột phải vào thư mục Shared
-> chọn Add -> click vào New Item ... Thao tác này sẽ mở cửa sổ Add New Item lên, như được hiển thị bên dưới.
Trong hộp thoại Add New Item, hãy chọn mẫu MVC 5 Layout Page (Razor)
, và chỉ định tên là _myLayoutPage.cshtml
và bấm Add để tạo layout view như được hiển thị bên dưới. Tên layout view bắt đầu dấu gạch dưới _
là một quy ước đặt tên phổ biến trong ASP.NET MVC.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
</head>
<body>
<div>
@RenderBody()
</div>
</body>
</html>
Bây giờ, hãy thêm phương thức RenderSection("footer",true)
vào trong thẻ <footer>
, như được hiển thị bên dưới. Xin lưu ý rằng chúng tôi đã tạo phần này là bắt buộc. Nó có nghĩa là bất kỳ view nào sử dụng _myLayoutPage
làm layout view của nó phải có phần 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>
Bây giờ, tạo một view con mới và chọn _myLayoutPage.cshtml
làm layout view, như được hiển thị bên dưới.
Điều này sẽ tạo ra một view Index.cshtml
mới như hình dưới đây.
@{
ViewBag.Title = "Home Page";
Layout = "~/Views/Shared/_myLayoutPage.cshtml";
}
<h2>Index</h2>
Bây giờ, hãy thêm phần footer vào view Index.cshtml
vì _myLayoutPage.cshtml
chứa phần footer bắt buộc, như hình dưới đây.
@{
ViewBag.Title = "Home Page";
Layout = "~/Views/Shared/_myLayoutPage.cshtml";
}
@section footer{
<p class="lead">
This is footer section.
</p>
}
<h2>Index</h2>
<div class="row">
<div class="col-md-4">
<p>This is body.</p>
</div>
</div>
Bây giờ, hãy chạy ứng dụng và bạn sẽ thấy rằng view Index
sẽ được hiển thị tại vị trí phương thức RenderBody()
được gọi, và phần footer sẽ được hiển thị trong RenderSection("footer", true)
, như hình dưới đây.
Như vậy, bạn có thể tạo một layout view mới với body và các phần khác nhau.