Sử dụng DisplayTemplates và EditorTemplates trong ASP.NET Core

Display và Editor templates (mẫu hiển thị và chỉnh sửa) chỉ định bố cục giao diện người dùng của các kiểu tùy chỉnh. Hãy xem xét mô hình Address sau:

csharp

public class Address
{
    public int Id { get; set; }
    public string FirstName { get; set; } = null!;
    public string MiddleName { get; set; } = null!;
    public string LastName { get; set; } = null!;
    public string Street { get; set; } = null!;
    public string City { get; set; } = null!;
    public string State { get; set; } = null!;
    public string Zipcode { get; set; } = null!;
}

Một dự án scaffold mô hình Address sẽ hiển thị Address trong form mặc định.

Một trang web có thể sử dụng Display Template để hiển thị Address theo định dạng chuẩn.

Display và Editor templates cũng có thể giảm code trùng lặp và chi phí bảo trì. Hãy xem xét một trang web hiển thị mô hình Address trên 20 trang khác nhau. Nếu mô hình Address thay đổi, 20 trang sẽ cần được cập nhật. Nếu Display Template được sử dụng cho mô hình Address, chỉ cần cập nhật Display Template. Ví dụ, mô hình Address có thể được cập nhật để bao gồm quốc gia hoặc vùng.

Tag Helpers cung cấp một cách thay thế cho phép mã phía server tham gia vào việc tạo và render các phần tử HTML trong file Razor. Để biết thêm thông tin, xem Tag Helpers so với HTML Helpers.

Display templates

DisplayTemplates tùy chỉnh cách hiển thị các trường của model hoặc tạo một lớp trừu tượng giữa các giá trị model và cách hiển thị của chúng.

DisplayTemplate là file Razor được đặt trong thư mục DisplayTemplates:

Đối với ứng dụng Razor Pages, trong thư mục Pages/Shared/DisplayTemplates.
Đối với ứng dụng MVC, trong thư mục Views/Shared/DisplayTemplates hoặc thư mục Views/ControllerName/DisplayTemplates. Display templates trong Views/Shared/DisplayTemplates được sử dụng bởi tất cả controllers trong ứng dụng. Display templates trong thư mục Views/ControllerName/DisplayTemplates chỉ được giải quyết bởi controller ControllerName.

Theo quy ước, file DisplayTemplate được đặt tên theo kiểu cần hiển thị. Template Address.cshtml được sử dụng trong mẫu này:

cshtml

@model Address

<dl>
    <dd>@Model.FirstName @Model.MiddleName @Model.LastName</dd>
    <dd>@Model.Street</dd>
    <dd>@Model.City @Model.State @Model.Zipcode</dd>
</dl>

View engine tự động tìm kiếm file trong thư mục DisplayTemplates khớp với tên của kiểu. Nếu không tìm thấy template phù hợp, nó sẽ dùng các template có sẵn.

Đoạn code sau hiển thị view Details của dự án được scaffold:

cshtml

@page
@model WebAddress.Pages.Adr.DetailsModel

@{
    ViewData["Title"] = "Details";
}

<h1>Details</h1>

<div>
    <h4>Address</h4>
    <hr />
    <dl class="row">
        <dt class="col-sm-2">
            @Html.DisplayNameFor(model => model.Address.FirstName)
        </dt>
        <dd class="col-sm-10">
            @Html.DisplayFor(model => model.Address.FirstName)
        </dd>
        <dt class="col-sm-2">
            @Html.DisplayNameFor(model => model.Address.MiddleName)
        </dt>
        <dd class="col-sm-10">
            @Html.DisplayFor(model => model.Address.MiddleName)
        </dd>
        <dt class="col-sm-2">
            @Html.DisplayNameFor(model => model.Address.LastName)
        </dt>
        <dd class="col-sm-10">
            @Html.DisplayFor(model => model.Address.LastName)
        </dd>
        <dt class="col-sm-2">
            @Html.DisplayNameFor(model => model.Address.Street)
        </dt>
        <dd class="col-sm-10">
            @Html.DisplayFor(model => model.Address.Street)
        </dd>
        <dt class="col-sm-2">
            @Html.DisplayNameFor(model => model.Address.City)
        </dt>
        <dd class="col-sm-10">
            @Html.DisplayFor(model => model.Address.City)
        </dd>
        <dt class="col-sm-2">
            @Html.DisplayNameFor(model => model.Address.State)
        </dt>
        <dd class="col-sm-10">
            @Html.DisplayFor(model => model.Address.State)
        </dd>
        <dt class="col-sm-2">
            @Html.DisplayNameFor(model => model.Address.Zipcode)
        </dt>
        <dd class="col-sm-10">
            @Html.DisplayFor(model => model.Address.Zipcode)
        </dd>
    </dl>
</div>
<div>
    <a asp-page="./Edit" asp-route-id="@Model.Address?.Id">Edit</a> |
    <a asp-page="./Index">Back to List</a>
</div>

Đoạn code sau hiển thị view Details sử dụng Address Display Template:

cshtml

@page
@model WebAddress.Pages.Adr2.DetailsModel

@{
    ViewData["Title"] = "Details";
}

<h1>Details</h1>

<div>
    <h4>Address DM</h4>
    <hr />
    <dl class="row">
        <dd class="col-sm-10">
           @Html.DisplayFor(model => model.Address)
        </dd>
    </dl>
</div>
<div>
    <a asp-page="./Edit" asp-route-id="@Model.Address?.Id">Edit</a> |
    <a asp-page="./Index">Back to List</a>
</div>

Để tham chiếu đến template có tên không khớp với tên kiểu, hãy sử dụng tham số templateName trong phương thức DisplayFor. Ví dụ, markup sau hiển thị mô hình Address với template AddressShort:

cshtml

@page
@model WebAddress.Pages.Adr2.DetailsCCModel

@{
    ViewData["Title"] = "Details Short";
}

<h1>Details Short</h1>

<div>
    <h4>Address Short</h4>
    <hr />
    <dl class="row">
        <dd class="col-sm-10">
           @Html.DisplayFor(model => model.Address,"AddressShort")
        </dd>
    </dl>
</div>

Sử dụng một trong các overload của DisplayFor expose (công khai) tham số additionalViewData để truyền dữ liệu view bổ sung được hợp nhất vào instance View Data Dictionary được tạo cho template.

Editor templates

Editor templates được sử dụng trong các form controls khi model đang được chỉnh sửa hoặc cập nhật.

EditorTemplate là file Razor được đặt trong thư mục EditorTemplates:

Đối với ứng dụng Razor Pages, trong thư mục Pages/Shared/EditorTemplates.
Đối với ứng dụng MVC, trong thư mục Views/Shared/EditorTemplates hoặc thư mục Views/ControllerName/EditorTemplates.

Markup sau hiển thị Pages/Shared/EditorTemplates/Address.cshtml được sử dụng trong mẫu:

cshtml

@model Address

<dl>
    <dd>    Name:
        <input asp-for="FirstName" /> <input asp-for="MiddleName" /> <input asp-for="LastName" /> 
    </dd>
        <dd>    Street:
        <input asp-for="Street" /> 
    </dd>

        <dd>    city/state/zip:
        <input asp-for="City" /> <input asp-for="State" /> <input asp-for="Zipcode" /> 
    </dd>

</dl>

Markup sau hiển thị trang Edit.cshtml sử dụng template Pages/Shared/EditorTemplates/Address.cshtml:

cshtml

@page
@model WebAddress.Pages.Adr.EditModel

@{
    ViewData["Title"] = "Edit";
}

<h1>Edit</h1>

<h4>Address</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <form method="post">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <input type="hidden" asp-for="Address.Id" />
             @Html.EditorFor(model => model.Address)
            <div class="form-group">
                <input type="submit" value="Save" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

<div>
    <a asp-page="./Index">Back to List</a>
</div>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}