ASP.NET - MVC - Partial View
Partial View trong MVC
Partial view trong ASP.NET MVC là một view sử dụng lại, có thể được sử dụng như là một view con trong nhiều view khác. Partial view giúp loại bỏ trùng lặp mã bằng cách sử dụng lại cùng một partial view ở nhiều view khác. Chúng ta có thể sử dụng partial view là một phần trong layout view, cũng như nội dung view khác.
Để bắt đầu, tạo một partial view đơn giản chứa thanh điều hướng như ảnh demo. Sau đó sẽ sử dụng partial view này cho các view khác.
Hình dưới đây cho thấy mã html cho thanh điều hướng ở trên. Chúng ta sẽ cắt và dán mã này trong view một phần riêng biệt cho mục đích demo.
Cách tạo một Partial View mới
Cách tạo một Partial View mới, click phải chuột trên thư mục shared --> Add --> View...
Trong hộp thoại Add View, nhập tên View và chọn checkbox "Create as a partial view" và nhấp vào Add.
Chúng ta sẽ không sử dụng bất kỳ model nào cho partial view, vì vậy hãy giữ Template dropdown rỗng (without model) và nhấp vào Add. Sẽ tạo ra một partial view rỗng trong thư mục Shared.
Bây giờ, bạn có thể cắt mã ở trên cho thanh điều hướng và dán nó vào _HeaderNavBar.cshtml như hình dưới đây:
Ví dụ: Partial View _HeaderNavBar.cshtml
<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>
Do đó, bạn có thể tạo một partial view mới. Chúng ta hãy xem làm thế nào để hiển thị một partial view.
Hiển thị một partial view
Bạn có thể hiển thị một partial view trong view cha sử dụng các phương thức: Partial(), RenderPartial(), RenderAction(). Mỗi phương thức có mục đích khác nhau. Chúng ta sẽ có cái nhìn tổng quan về từng phương thức và sau đó xem cách hiển thị partial view bằng các phương thức này.
Html.Partial()
Phương thức @Html.Partial() sử dụng chèn một partial view vào trong một view xác định. Tham số của phương thức @Html.Partial() là tên của partial view và trả về chuỗi html.
Bảng sau liệt kê phương thức nạp chồng của Partial helper:
Phương thức Helper | Ý nghĩa |
---|---|
MvcHtmlString Html.Partial(string partialViewName) | Hiển thị nội dung trong partial view. |
MvcHtmlString Html.Partial(string partialViewName,object model) | Hiển thị nội dung trong partial view được tham chiếu đến view.Các tham số trong Model truyền cho đối tượng model đến với partial view. |
MvcHtmlString Html.Partial(string partialViewName, ViewDataDictionary viewData) | Hiển thị nội dung trong partial view được tham chiếu đến view. Tham số dữ liệu trong View được truyền qua bộ tự điển mới đến partial view. |
MvcHtmlString Html.Partial(string partialViewName,object model, ViewDataDictionary viewData) | Hiển thị nội dung trong partial view được tham chiếu đến view. Tham số model chuyển đối tượng model và View dữ liệu chuyển từ điển dữ liệu sang partial view. |
Html.RenderPartial()
Phương thức @Html.renderPartial giống như phương thức @Html.Partial, ngoại trừ việc nó trả về void và viết kết quả html của partial view xác định vào một luồng http trả về trực tiếp.
Phương thức Helper | Ý nghĩa |
---|---|
RenderPartial(String partialViewName) | Hiển thị partial view được chỉ định. |
RenderPartial(String partialViewName, Object model) | Hiển thị partial view được chỉ định và thiết lập đối tượng model |
RenderPartial(String partialViewName, ViewDataDictionary viewData) | Hiển thị partial view được chỉ định, thay thế thuộc tính ViewData bằng đối tượng ViewDataDictionary. |
RenderPartial(String partialViewName, Object model, ViewDataDictionary viewData) | Hiển thị partial view được chỉ định, thay thế thuộc tính ViewData bằng đối tượng ViewDataDictionary và thiết lập đối tượng model được chỉ định. |
Html.RenderAction()
Phương thức RenderAction gọi một controller xác định và action cụ thể và tạo ra kết quả như một partial view. Phương thức action cụ thể sẽ trả về PartialViewResult sử dụng phương thức Partial().
Tên phương thức | Giải thích |
---|---|
RenderAction(String actionName) | Gọi phương thức hành động con đã chỉ định và hiển thị kết quả trong parent view. |
RenderAction(String actionName, Object routeValue) | Gọi phương thức hành động con được chỉ định bằng cách sử dụng các tham số đã chỉ định và hiển thị trong parent view. |
RenderAction(String actionName, String controllerName) | Gọi phương thức hành động con được chỉ định bằng cách sử dụng tên của trình điều khiển đã chỉ định và hiển thị nội tuyến kết quả trong parent view. |
RenderAction(String actionName, RouteValueDictionary routeValues) | Gọi phương thức hành động con được chỉ định bằng cách sử dụng các tham số đã chỉ định và hiển thị nội tuyến kết quả trong parent view. |
RenderAction(String actionName, String controllerName, Object routeValue) | Gọi phương thức hành động con được chỉ định bằng cách sử dụng các tham số và tên của trình điều khiển đã chỉ định và hiển thị nội tuyến kết quả trong parent view. |
RenderAction(String actionName, String controllerName, RouteValueDictionary routeValues) | Gọi phương thức hành động con được chỉ định bằng cách sử dụng các tham số và tên của trình điều khiển đã chỉ định và hiển thị nội tuyến kết quả trong parent view. |
Bây giờ, chúng ta có thể sử dụng bất kỳ phương thức nào ở trên để hiển thị partial view _HeaderNavBar thành _Layout.cshtml. Layout sau đây hiển thị partial view bằng phương thức RenderPartial ().
Ví dụ : Html.RenderPartial()
<!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>
@{
Html.RenderPartial("_HeaderNavBar");
}
<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 sau sử dụng phương thức Partial để hiển thị một phần view_HeaderNavBar.cshtml.
Ví dụ: Html.Partial()
<!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>
@Html.Partial("_HeaderNavBar")
<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>
Kết quả chạy ứng dụng: