Partial View trong ASP.NET MVC: Tái sử dụng giao diện hiệu quả

Partial View trong ASP.NET MVC là một view có thể tái sử dụng, đóng vai trò như một view con trong nhiều view khác. Sử dụng Partial View giúp giảm thiểu việc lặp lại mã, tăng tính nhất quán và dễ bảo trì cho ứng dụng web. Chúng có thể được sử dụng trong layout hoặc trong nội dung của các view khác.

Để minh họa, chúng ta sẽ tạo một Partial View đơn giản chứa thanh điều hướng. Sau đó, Partial View này sẽ được sử dụng lại trong các view khác nhau.

Đoạn mã HTML dưới đây minh họa cấu trúc của thanh điều hướng. Chúng ta sẽ chuyển đoạn mã này thành một Partial View riêng biệt để tái sử dụng.

Mục Lục

1 Tạo Partial View mới trong ASP.NET MVC
2 Ví dụ: Mã nguồn của Partial View _HeaderNavBar.cshtml
3 Hiển thị Partial View trong ASP.NET MVC
4 Ví dụ: Sử dụng Html.RenderPartial() trong Layout
5 Ví dụ: Sử dụng Html.Partial() trong Layout
6 Kết quả

Tạo Partial View mới trong ASP.NET MVC

Để tạo một Partial View mới, bạn thực hiện như sau: Click chuột phải vào thư mục Shared -> Add -> View…

Trong hộp thoại Add View, nhập tên cho View và chọn checkbox “Create as a partial view”, sau đó nhấn Add.

Trong ví dụ này, chúng ta không sử dụng model cho Partial View, vì vậy hãy giữ Template dropdown ở trạng thái mặc định (without model) và nhấn Add. Một Partial View rỗng sẽ được tạo trong thư mục Shared.

Bây giờ, bạn có thể sao chép mã HTML của thanh điều hướng và dán vào Partial View vừa tạo:

Ví dụ: Mã nguồn của Partial View _HeaderNavBar.cshtml

@Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })

<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>

Với các bước trên, bạn đã tạo thành công một Partial View. Tiếp theo, chúng ta sẽ tìm hiểu cách hiển thị Partial View này trong các view khác.

Hiển thị Partial View trong ASP.NET MVC

Bạn có thể hiển thị Partial View trong view cha bằng các phương thức sau:

Html.Partial()
Html.RenderPartial()
Html.Action() (hoặc Html.RenderAction())

Mỗi phương thức có một mục đích sử dụng riêng. Dưới đây là tổng quan về từng phương thức và cách sử dụng chúng để hiển thị Partial View.

Html.Partial()

Phương thức @Html.Partial() cho phép chèn một Partial View vào một view cụ thể. Tham số của phương thức này là tên của Partial View và nó trả về một chuỗi HTML.

Các phiên bản nạp chồng của phương thức Html.Partial():

Tham số	Mô tả
`string partialViewName`	Tên của Partial View cần hiển thị.
`object model`	Model được truyền vào Partial View.
`ViewDataDictionary viewData`	Đối tượng ViewData chứa dữ liệu bổ sung được truyền vào Partial View.
`string partialViewName, object model`	Kết hợp tên Partial View và model.
`string partialViewName, ViewDataDictionary viewData`	Kết hợp tên Partial View và ViewData.
`string partialViewName, object model, ViewDataDictionary viewData`	Kết hợp tên Partial View, model và ViewData.

Html.RenderPartial()

Phương thức @Html.RenderPartial() tương tự như @Html.Partial(), nhưng nó trả về kiểu void và ghi trực tiếp kết quả HTML của Partial View vào luồng phản hồi HTTP. Điều này có thể cải thiện hiệu suất trong một số trường hợp.

Html.Action() (và Html.RenderAction())

Phương thức Html.Action() (hoặc Html.RenderAction()) gọi một action cụ thể trong một controller và hiển thị kết quả trả về (thường là một PartialViewResult) như một Partial View. Action này thường trả về một PartialViewResult thông qua phương thức Partial().

Ví dụ: Sử dụng Html.RenderPartial() trong Layout

Đoạn code dưới đây sử dụng phương thức Html.RenderPartial() để hiển thị Partial View _HeaderNavBar.cshtml trong file Layout:

<!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"); }



        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>


    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

Ví dụ: Sử dụng Html.Partial() trong Layout

Tương tự, bạn có thể sử dụng phương thức Html.Partial() để hiển thị Partial View _HeaderNavBar.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>

        @Html.Partial("_HeaderNavBar")



        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>


    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

Kết quả

Sau khi chạy ứng dụng, thanh điều hướng sẽ được hiển thị trên trang web.

Partial View là một công cụ mạnh mẽ trong ASP.NET MVC, giúp bạn xây dựng các ứng dụng web có cấu trúc, dễ bảo trì và tái sử dụng code hiệu quả. Bằng cách chia nhỏ giao diện thành các phần nhỏ hơn, bạn có thể dễ dàng quản lý và cập nhật giao diện người dùng của mình.