Tag Helpers (Trình trợ giúp thẻ) trong ASP.NET Core

Tag Helpers là gì?

Tag Helpers cho phép code phía server tham gia vào việc tạo và render các phần tử HTML trong các file Razor. Ví dụ, ImageTagHelper tích hợp sẵn có thể gắn số phiên bản vào tên hình ảnh. Bất cứ khi nào hình ảnh thay đổi, server tạo ra một phiên bản duy nhất mới cho hình ảnh, đảm bảo clients luôn nhận được hình ảnh hiện tại (thay vì hình ảnh được cache lỗi thời). Có nhiều Tag Helpers tích hợp sẵn cho các tác vụ phổ biến - như tạo forms (biểu mẫu), links (liên kết), tải assets (tài nguyên) và nhiều hơn nữa - và thậm chí còn nhiều hơn có sẵn trong các GitHub repository công khai và dưới dạng các gói NuGet. Tag Helpers được viết bằng C#, và chúng target (nhắm mục tiêu) các phần tử HTML dựa trên tên phần tử, tên thuộc tính, hoặc thẻ cha. Ví dụ, LabelTagHelper tích hợp sẵn có thể target phần tử HTML <label> khi các thuộc tính LabelTagHelper được áp dụng. Nếu bạn quen với HTML Helpers, Tag Helpers giảm các chuyển đổi tường minh giữa HTML và C# trong Razor views. Trong nhiều trường hợp, HTML Helpers cung cấp một cách tiếp cận thay thế cho một Tag Helper cụ thể, nhưng điều quan trọng là phải nhận ra rằng Tag Helpers không thay thế HTML Helpers. Không có Tag Helper cho mỗi HTML Helper.

Tag Helpers không được hỗ trợ trong Razor components. Để biết thêm thông tin, xem ASP.NET Core Razor components.

Tag Helpers cung cấp những gì

Trải nghiệm phát triển thân thiện với HTML

Thông thường, Razor markup sử dụng Tag Helpers trông giống như HTML tiêu chuẩn. Các front-end designer (nhà thiết kế giao diện) quen với HTML/CSS/JavaScript có thể chỉnh sửa Razor mà không cần học cú pháp Razor C#.

Môi trường IntelliSense phong phú để tạo HTML và Razor markup

Đây là sự tương phản rõ rệt với HTML Helpers, cách tiếp cận trước đây để tạo markup phía server trong Razor views. IntelliSense hỗ trợ cho Tag Helpers giải thích môi trường IntelliSense. Ngay cả các developer có kinh nghiệm với cú pháp Razor C# cũng hiệu quả hơn khi sử dụng Tag Helpers so với viết Razor markup C#.

Cách giúp bạn làm việc hiệu quả hơn và tạo ra code mạnh mẽ, đáng tin cậy, dễ bảo trì hơn bằng cách sử dụng thông tin chỉ có sẵn trên server

Ví dụ, theo lịch sử, câu thần chú về cập nhật hình ảnh là thay đổi tên hình ảnh khi bạn thay đổi hình ảnh. Hình ảnh nên được cache tích cực vì lý do hiệu suất, và trừ khi bạn thay đổi tên hình ảnh, bạn có nguy cơ clients nhận được bản copy lỗi thời. ImageTagHelper tích hợp sẵn có thể làm điều này cho bạn tự động. ImageTagHelper có thể gắn số phiên bản vào tên hình ảnh, do đó bất cứ khi nào hình ảnh thay đổi, server tự động tạo ra một phiên bản duy nhất mới cho hình ảnh. Clients được đảm bảo nhận được hình ảnh hiện tại.

Hầu hết các Tag Helpers tích hợp sẵn đều target các phần tử HTML tiêu chuẩn và cung cấp các thuộc tính phía server cho phần tử. Ví dụ, phần tử <input> được sử dụng trong nhiều view trong thư mục Views/Account chứa thuộc tính asp-for. Thuộc tính này trích xuất tên của thuộc tính model được chỉ định vào HTML được render. Hãy xem xét một Razor view với model sau:

csharp

public class Movie
{
    public int ID { get; set; }
    public string Title { get; set; }
    public DateTime ReleaseDate { get; set; }
    public string Genre { get; set; }
    public decimal Price { get; set; }
}

Razor markup sau:

cshtml

<label asp-for="Movie.Title"></label>

Tạo ra HTML sau:

html

<label for="Movie_Title">Title</label>

Thuộc tính asp-for được tạo ra bởi thuộc tính For trong LabelTagHelper. Xem Author Tag Helpers để biết thêm thông tin.

Quản lý scope của Tag Helper

Scope của Tag Helpers được kiểm soát bởi sự kết hợp của @addTagHelper, @removeTagHelper, và ký tự opt-out (từ chối) "!".

`@addTagHelper` làm cho Tag Helpers có sẵn

Nếu bạn tạo một ứng dụng web ASP.NET Core mới có tên AuthoringTagHelpers, file Views/_ViewImports.cshtml sau sẽ được thêm vào dự án của bạn:

cshtml

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, AuthoringTagHelpers

Directive @addTagHelper làm cho Tag Helpers có sẵn cho view. Trong trường hợp này, file view là Pages/_ViewImports.cshtml, theo mặc định được kế thừa bởi tất cả các file trong thư mục Pages và các thư mục con; làm cho Tag Helpers có sẵn. Code trên sử dụng cú pháp wildcard ("\") để chỉ định rằng tất cả Tag Helpers trong assembly được chỉ định (Microsoft.AspNetCore.Mvc.TagHelpers) sẽ có sẵn cho mỗi file view trong thư mục Views* hoặc thư mục con.

Để expose (hiển thị) tất cả các Tag Helpers trong dự án này, bạn sẽ sử dụng:

cshtml

@using AuthoringTagHelpers
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, AuthoringTagHelpers

Nếu dự án của bạn chứa EmailTagHelper với namespace mặc định (AuthoringTagHelpers.TagHelpers.EmailTagHelper), bạn có thể cung cấp tên đầy đủ (FQN) của Tag Helper:

cshtml

@using AuthoringTagHelpers
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper AuthoringTagHelpers.TagHelpers.EmailTagHelper, AuthoringTagHelpers

`@removeTagHelper` xóa Tag Helpers

@removeTagHelper có hai tham số giống như @addTagHelper, và nó xóa một Tag Helper đã được thêm trước đó. Ví dụ, @removeTagHelper được áp dụng cho một view cụ thể sẽ xóa Tag Helper được chỉ định khỏi view. Sử dụng @removeTagHelper trong file Views/Folder/_ViewImports.cshtml sẽ xóa Tag Helper được chỉ định khỏi tất cả các view trong Folder.

Kiểm soát scope của Tag Helper bằng file `_ViewImports.cshtml`

Bạn có thể thêm _ViewImports.cshtml vào bất kỳ thư mục view nào, và view engine áp dụng các directive từ cả file đó và file Views/_ViewImports.cshtml. Bất kỳ directive @addTagHelper nào bạn thêm vào file Views/Home/_ViewImports.cshtml (không có trong file mặc định Views/_ViewImports.cshtml) sẽ chỉ expose các Tag Helpers đó cho các view trong thư mục Home.

Opt-out (từ chối) cho các phần tử riêng lẻ

Bạn có thể vô hiệu hóa Tag Helper ở cấp phần tử bằng ký tự opt-out Tag Helper ("!"). Ví dụ, xác thực Email bị vô hiệu hóa trong <span> với ký tự opt-out Tag Helper:

cshtml

<!span asp-validation-for="Email" class="text-danger"></!span>

Bạn phải áp dụng ký tự opt-out Tag Helper cho thẻ mở và thẻ đóng. Sau khi bạn thêm ký tự opt-out, phần tử và các thuộc tính Tag Helper không còn được hiển thị bằng font đặc biệt nữa.

Sử dụng `@tagHelperPrefix` để làm rõ việc sử dụng Tag Helper

Directive @tagHelperPrefix cho phép bạn chỉ định một chuỗi tiền tố thẻ để kích hoạt hỗ trợ Tag Helper và làm cho việc sử dụng Tag Helper rõ ràng. Ví dụ, bạn có thể thêm markup sau vào file Views/_ViewImports.cshtml:

cshtml

@tagHelperPrefix th:

Trong hình ảnh code theo sau, tiền tố Tag Helper được đặt thành th:, vì vậy chỉ những phần tử sử dụng tiền tố th: mới hỗ trợ Tag Helpers. Phần tử <label> và <input> có tiền tố Tag Helper và được kích hoạt Tag Helper, trong khi phần tử <span> thì không.

Các quy tắc phân cấp tương tự áp dụng cho @addTagHelper cũng áp dụng cho @tagHelperPrefix.

Tag Helpers tự đóng (Self-closing)

Nhiều Tag Helpers không thể được sử dụng dưới dạng thẻ tự đóng. Một số Tag Helpers được thiết kế là các thẻ tự đóng. Sử dụng một Tag Helper không được thiết kế để tự đóng sẽ ngăn chặn output được render. Tự đóng một Tag Helper dẫn đến một thẻ tự đóng trong output được render.

C# trong khai báo thuộc tính/thẻ Tag Helper

Tag Helpers không cho phép C# trong khu vực thuộc tính hoặc khai báo thẻ của phần tử. Ví dụ, code sau không hợp lệ:

cshtml

<input asp-for="LastName"  
       @(Model?.LicenseId == null ? "disabled" : string.Empty) />

Code trên có thể được viết lại như sau:

cshtml

<input asp-for="LastName" 
       disabled="@(Model?.LicenseId == null)" />

Tag helper initializers (Bộ khởi tạo Tag Helper)

Trong khi các thuộc tính có thể được sử dụng để cấu hình các instance riêng lẻ của tag helpers, ITagHelperInitializer<TTagHelper> có thể được sử dụng để cấu hình tất cả các instance tag helper của một loại cụ thể. Hãy xem xét ví dụ sau về tag helper initializer cấu hình thuộc tính asp-append-version hoặc thuộc tính AppendVersion cho tất cả các instance của ScriptTagHelper trong ứng dụng:

csharp

public class AppendVersionTagHelperInitializer : ITagHelperInitializer<ScriptTagHelper>
{
    public void Initialize(ScriptTagHelper helper, ViewContext context)
    {
        helper.AppendVersion = true;
    }
}

Để sử dụng initializer, hãy cấu hình nó bằng cách đăng ký nó như một phần của startup ứng dụng:

csharp

builder.Services.AddSingleton
    <ITagHelperInitializer<ScriptTagHelper>, AppendVersionTagHelperInitializer>();

Hỗ trợ IntelliSense cho Tag Helpers

Hãy xem xét việc viết một phần tử HTML <label>. Ngay khi bạn nhập <l trong Visual Studio editor, IntelliSense hiển thị các phần tử phù hợp. Không chỉ nhận được gợi ý HTML, mà còn cả biểu tượng (ký hiệu "@" với "<>" bên dưới nó). Biểu tượng xác định phần tử được target bởi Tag Helpers.

Sau khi thuộc tính Tag Helper được nhập, font của thẻ và thuộc tính thay đổi. Sử dụng theme "Blue" hoặc "Light" mặc định của Visual Studio, font là màu tím đậm. Nếu bạn đang sử dụng theme "Dark", font là màu xanh lá đậm.

Tag Helpers so với HTML Helpers

Tag Helpers gắn vào các phần tử HTML trong Razor views, trong khi HTML Helpers được gọi như các method xen kẽ với HTML trong Razor views. Hãy xem xét Razor markup sau, tạo ra một HTML label với CSS class "caption":

cshtml

@Html.Label("FirstName", "First Name:", new {@class="caption"})

Sử dụng LabelTagHelper, markup tương tự có thể được viết như sau:

cshtml

<label class="caption" asp-for="FirstName"></label>

Markup sạch hơn và dễ đọc, chỉnh sửa, và bảo trì hơn so với cách tiếp cận HTML Helpers.

Tag Helpers so với Web Server Controls

Tag Helpers không sở hữu phần tử mà chúng được liên kết; chúng tham gia vào việc render phần tử và nội dung. ASP.NET Web Server Controls được khai báo và gọi trên một trang.
ASP.NET Web Server Controls có vòng đời không tầm thường có thể khiến việc phát triển và debug khó khăn.
Web Server controls cho phép bạn thêm chức năng vào các phần tử DOM client bằng cách sử dụng client control. Tag Helpers không có DOM.
Web Server controls bao gồm phát hiện trình duyệt tự động. Tag Helpers không có kiến thức về trình duyệt.
Nhiều Tag Helpers có thể hoạt động trên cùng một phần tử (xem Tránh xung đột Tag Helper) trong khi bạn thường không thể compose Web Server controls.
Tag Helpers có thể sửa đổi thẻ và nội dung của các phần tử HTML mà chúng được scope, nhưng không trực tiếp sửa đổi bất cứ điều gì khác trên trang. Web Server controls có scope kém cụ thể hơn và có thể thực hiện các hành động ảnh hưởng đến các phần khác của trang; cho phép các tác dụng phụ không mong muốn.
Web Server controls sử dụng type converters để chuyển đổi chuỗi thành đối tượng. Với Tag Helpers, bạn làm việc nguyên bản trong C#, vì vậy bạn không cần chuyển đổi kiểu.