Partial view trong hocdauthau.com 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.
Partial view là gì vậy
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…
Cấu Trúc Và Cách Dùng Ngữ Pháp "be Going To" Trong Tiếng Anh – hocdauthau.com
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 hocdauthau.com như hình dưới đây:
Ví dụ: Partial View hocdauthau.comml
<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()
Xem thêm: Phụ lục là gì vậy
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:
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.
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().
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 hocdauthau.comml. Layout sau đây hiển thị partial view bằng phương thức RenderPartial ().
Ví dụ : hocdauthau.comerPartial()
<!DOCTYPE html> <html> <head> <meta charset=”utf-8″ /> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>@ViewBag.Title – My hocdauthau.com Application</title> @Styles.Render(“~/Content/css”) @Scripts.Render(“~/bundles/modernizr”) </head> <body> @{ hocdauthau.comerPartial(“_HeaderNavBar”); } <div class=”container body-content”> @RenderBody() <hr /> <footer> <p>© @hocdauthau.com – My hocdauthau.com 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 hocdauthau.comml.
Ví dụ: hocdauthau.comial()
<!DOCTYPE html> <html> <head> <meta charset=”utf-8″ /> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>@ViewBag.Title – My hocdauthau.com Application</title> @Styles.Render(“~/Content/css”) @Scripts.Render(“~/bundles/modernizr”) </head> <body> @Html.Partial(“_HeaderNavBar”) <div class=”container body-content”> @RenderBody() <hr /> <footer> <p>© @hocdauthau.com – My hocdauthau.com 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:
Nghề Chuyên gia dinh dưỡng là gì vậy, học ở đâu?