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.

Chú ý: View là một trang hoàn chỉnh có thể truy cập trực tiếp từ URL nó đừng độc lập. Còn Partial không truy cập trực tiếp được mà phải qua một View rồi View đó liên kết đến partial giống như 1 bức tường là 1 view, mỗi mảng là 1 partial view.

sample partial view

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>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/bootstrap")
        @RenderSection("scripts", required: false)
</body>
</html>
Chú ý: Phương thức RenderPartial trả về void, do đó, một dấu chấm phẩy được yêu cầu ở cuối và do đó nó phải được đặt trong dấu ngoặc nhọn.

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>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>
Chú ý: Phương thức @ Html.Partial () không cần phải nằm trong khối mã vì nó trả về một chuỗi html.

Kết quả chạy ứng dụng:


 

 Những điểm cần nhớ :

  1. Partial view là một view có thể tái sử dụng. Partial view có thể sử dụng như là một view con trong nhiều view khác nhau.
  2. Partial view có thể hiển thị nội dung bằng các phương : Html.Partial(), Html.RenderPartial() hoặc Html.RenderAction() .