Partial Tag Helper trong ASP.NET Core
Tác giả: Scott Addie
Để có cái nhìn tổng quan về Tag Helper, xem Tag Helpers in ASP.NET Core.
Xem hoặc tải xuống sample code (mã mẫu)
Tổng quan
Partial Tag Helper (trình trợ giúp thẻ partial) được sử dụng để render (kết xuất) một partial view (khung nhìn một phần) trong ứng dụng Razor Pages và MVC. Lưu ý rằng nó:
- Yêu cầu ASP.NET Core 2.1 trở lên.
- Là một giải pháp thay thế cho cú pháp HTML Helper.
- Render partial view một cách bất đồng bộ (asynchronously).
Các tùy chọn HTML Helper để render partial view bao gồm:
Model Product (sản phẩm) được sử dụng trong các ví dụ trong tài liệu này:
namespace TagHelpersBuiltIn.Models
{
public class Product
{
public int Number { get; set; }
public string Name { get; set; }
public string Description { get; set; }
}
}Sau đây là danh sách các thuộc tính của Partial Tag Helper.
name
Thuộc tính name là bắt buộc. Nó chỉ ra tên hoặc đường dẫn của partial view cần được render. Khi tên partial view được cung cấp, quá trình view discovery (khám phá view) được khởi tạo. Quá trình đó bị bỏ qua khi đường dẫn tường minh được cung cấp. Để biết tất cả các giá trị name được chấp nhận, xem Partial view discovery.
Markup sau sử dụng đường dẫn tường minh, chỉ ra rằng _ProductPartial.cshtml được tải từ thư mục Shared. Sử dụng thuộc tính for, một model được truyền đến partial view để binding (liên kết):
<partial name="Shared/_ProductPartial.cshtml" for="Product">
for
Thuộc tính for gán một ModelExpression được đánh giá dựa trên model hiện tại. ModelExpression suy ra cú pháp @Model.. Ví dụ, for="Product" có thể được sử dụng thay cho for="@Model.Product". Hành vi suy luận mặc định này bị ghi đè bằng cách sử dụng ký tự @ để định nghĩa inline expression (biểu thức nội tuyến).
Markup sau tải _ProductPartial.cshtml:
<partial name="_ProductPartial" for="Product">
Partial view được liên kết với thuộc tính Product của page model (model trang) liên kết:
using Microsoft.AspNetCore.Mvc.RazorPages;
using TagHelpersBuiltIn.Models;
namespace TagHelpersBuiltIn.Pages
{
public class ProductModel : PageModel
{
public Product Product { get; set; }
public void OnGet()
{
Product = new Product
{
Number = 1,
Name = "Test product",
Description = "This is a test product"
};
}
}
}model
Thuộc tính model gán một model instance (thể hiện model) để truyền đến partial view. Thuộc tính model không thể được sử dụng với thuộc tính for.
Trong markup sau, một đối tượng Product mới được khởi tạo và truyền đến thuộc tính model để binding:
<partial name="_ProductPartial"
model='new Product { Number = 1, Name = "Test product", Description = "This is a test" }'>view-data
Thuộc tính view-data gán một ViewDataDictionary để truyền đến partial view. Markup sau làm cho toàn bộ collection ViewData (bộ sưu tập ViewData) có thể truy cập được cho partial view:
@{
ViewData["IsNumberReadOnly"] = true;
}
<partial name="_ProductViewDataPartial" for="Product" view-data="ViewData">Trong đoạn code trên, giá trị key IsNumberReadOnly được đặt là true và thêm vào collection ViewData. Do đó, ViewData["IsNumberReadOnly"] có thể truy cập được trong partial view sau:
@model TagHelpersBuiltIn.Models.Product
<div class="form-group">
<label asp-for="Number"></label>
@if ((bool)ViewData["IsNumberReadOnly"])
{
<input asp-for="Number" type="number" class="form-control" readonly />
}
else
{
<input asp-for="Number" type="number" class="form-control" />
}
</div>
<div class="form-group">
<label asp-for="Name"></label>
<input asp-for="Name" type="text" class="form-control" />
</div>
<div class="form-group">
<label asp-for="Description"></label>
<textarea asp-for="Description" rows="4" cols="50" class="form-control"></textarea>
</div>Trong ví dụ này, giá trị của ViewData["IsNumberReadOnly"] quyết định xem trường Number có được hiển thị dưới dạng read-only (chỉ đọc) hay không.
Di chuyển từ HTML Helper
Xét ví dụ HTML Helper bất đồng bộ sau. Một collection sản phẩm được lặp qua và hiển thị. Theo tham số đầu tiên của phương thức PartialAsync, partial view _ProductPartial.cshtml được tải. Một instance của model Product được truyền đến partial view để binding:
@foreach (var product in Model.Products)
{
@await Html.PartialAsync("_ProductPartial", product)
}Partial Tag Helper sau đây đạt được hành vi render bất đồng bộ tương tự như HTML Helper PartialAsync. Thuộc tính model được gán một instance model Product để binding với partial view:
@foreach (var product in Model.Products)
{
<partial name="_ProductPartial" model="@product" />
}