ASP.NET Core: Tag Helpers trong ASP.NET Core
Tag Helpers là gì
Tag Helpers cho phép mã phía máy chủ tham gia tạo và hiển thị các phần tử HTML trong file Razor. Ví dụ: phần tích hợp sẵn ImageTagHelper có thể nối thêm số phiên bản vào tên hình ảnh. Bất cứ khi nào hình ảnh thay đổi, máy chủ sẽ tạo một phiên bản duy nhất mới cho hình ảnh, vì vậy khách hàng được đảm bảo nhận được hình ảnh hiện tại (thay vì hình ảnh cũ được lưu trong bộ nhớ cache). Có nhiều Tag Helpers được tích hợp sẵn cho các tác vụ phổ biến - chẳng hạn như tạo biểu mẫu, liên kết, tải nội dung, v.v. Trình trợ giúp thẻ được viết bằng C# và chúng 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ụ: phần tích hợp sẵn LabelTagHelper có thể nhắm mục tiêu phần tử HTML <label> khi các LabelTagHelper thuộc tính được áp dụng. Nếu bạn quen thuộc với HTML Helpers, Tag Helpers giảm chuyển đổi rõ ràng giữa HTML và C# trong view Razor. Trong nhiều trường hợp, HTML Helpers cung cấp cách tiếp cận thay thế cho Tag Helpers 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 và không có Tag Helpers nào cho mỗi HTML Helpers. Tag Helpers so với HTML Helpers giải thích sự khác biệt chi tiết hơn.
Trình trợ giúp thẻ không được hỗ trợ trong các component Razor. Để biết thêm thông tin, hãy xem các component ASP.NET Core Razor.
Tag Helpers cung cấp những gì
Trải nghiệm phát triển thân thiện với HTML
Đối với hầu hết component, đánh dấu Razor bằng Tag Helpers trông giống như HTML tiêu chuẩn. Các nhà thiết kế front-end thông thạo HTML/CSS/JavaScript có thể chỉnh sửa Razor mà không cần học cú pháp C# Razor.
Môi trường IntelliSense phong phú để tạo đánh dấu HTML và Razor
Điều này hoàn toàn trái ngược với HTML Helpers, cách tiếp cận trước đây để tạo đánh dấu phía máy chủ trong view Razor. Tag Helpers Tag Helpers so với HTML Helpers giải thích sự khác biệt chi tiết hơn. Hỗ trợ IntelliSense cho Tag Helpers giải thích về môi trường IntelliSense. Ngay cả các nhà phát triển 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 mã đánh dấu C# Razor.
Một cách giúp bạn làm việc hiệu quả hơn và có thể tạo mã mạnh mẽ, đáng tin cậy và có thể bảo trì hơn bằng cách sử dụng thông tin chỉ có trên máy chủ
Ví dụ, trong lịch sử, câu thần chú khi cập nhật hình ảnh là thay đổi tên của hình ảnh khi bạn thay đổi hình ảnh. Hình ảnh phải được lưu vào bộ nhớ cache tích cực vì lý do hiệu suất và trừ khi bạn thay đổi tên của hình ảnh, bạn có nguy cơ khiến khách hàng nhận được một bản sao cũ. Trước đây, sau khi một hình ảnh được chỉnh sửa, tên phải được thay đổi và mỗi tham chiếu đến hình ảnh trong ứng dụng web cần được cập nhật. Điều này không chỉ tốn nhiều công sức mà còn dễ xảy ra lỗi (bạn có thể bỏ lỡ một tham chiếu, vô tình nhập sai chuỗi, v.v.). ImageTagHelper được xây dựng sẵn có thể tự động thực hiện việc này cho bạn. ImageTagHelper có thể thêm số phiên bản vào tên hình ảnh, vì vậy bất cứ khi nào hình ảnh thay đổi, máy chủ sẽ tự động tạo một phiên bản duy nhất mới cho hình ảnh. Khách hàng được đảm bảo để có được hình ảnh hiện tại. Sự mạnh mẽ và tiết kiệm lao động này về cơ bản là miễn phí bằng cách sử dụng ImageTagHelper.
Hầu hết các Tag Helpers tích hợp đều nhắm mục tiêu các phần tử HTML tiêu chuẩn và cung cấp các thuộc tính phía máy chủ 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 attribute asp-for. Attribute này trích xuất tên của property model đã chỉ định vào HTML được hiển thị. Xem xét view Razor với mô hình sau:
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; }
}
Đánh dấu Razor sau:
<label asp-for="Movie.Title"></label>
Tạo HTML sau:
<label for="Movie_Title">Title</label>
Attribute asp-for được cung cấp bởi property For trong LabelTagHelper. Xem Author Tag Helpers để biết thêm thông tin.
Quản lý phạm vi Tag Helpers
Phạm vi của Tag Helpers được kiểm soát bởi sự kết hợp của @addTagHelper, @removeTagHelper và dấu ký tự bỏ chọn "!".
Thêm Tag Helpers với @addTagHelper
Nếu bạn tạo một ứng dụng web ASP.NET Core mới có tên là AuthoringTagHelpers, thì file Views/_ViewImports.cshtml sau đây sẽ được thêm vào dự án của bạn:
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, AuthoringTagHelpers
Lệnh @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; cung cấp Tag Helpers. Đoạn code trên sử dụng cú pháp ký tự đại diện ("*") để 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. Tham số đầu tiên sau khi @addTagHelper chỉ định Tag Helpers sẽ tải (chúng ta đang sử dụng "*" cho tất cả Tag Helpers) và tham số thứ hai "Microsoft.AspNetCore.Mvc.TagHelpers" chỉ định cụm chứa Tag Helpers. Microsoft.AspNetCore.Mvc.TagHelpers là phần lắp ráp cho Tag Helpers ASP.NET Core tích hợp.
Để hiển thị tất cả các Tag Helpers trong dự án này (tạo ra một assembly có tên là AuthoringTagHelpers), bạn sẽ sử dụng như sau:
@using AuthoringTagHelpers
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, AuthoringTagHelpers
Nếu dự án của bạn chứa một EmailTagHelper với namespace mặc định (AuthoringTagHelpers.TagHelpers.EmailTagHelper), thì bạn có thể cung cấp tên đủ điều kiện (Fully Qualified Name - FQN) của Tag Helpers:
@using AuthoringTagHelpers
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper AuthoringTagHelpers.TagHelpers.EmailTagHelper, AuthoringTagHelpers
Để thêm Tag Helpers vào view bằng FQN, trước tiên bạn thêm FQN (AuthoringTagHelpers.TagHelpers.EmailTagHelper), sau đó thêm tên assembly (AuthoringTagHelpers). Hầu hết các nhà phát triển thích sử dụng cú pháp ký tự đại diện "*". Cú pháp ký tự đại diện cho phép bạn chèn ký tự đại diện "*" làm hậu tố trong FQN. Ví dụ: bất kỳ lệnh nào sau đây sẽ mang lại EmailTagHelper:
@addTagHelper AuthoringTagHelpers.TagHelpers.E*, AuthoringTagHelpers
@addTagHelper AuthoringTagHelpers.TagHelpers.Email*, AuthoringTagHelpers
Như đã đề cập trên đây, việc thêm chỉ thị @addTagHelper vào file Views/_ViewImports.cshtml sẽ làm cho Tag Helpers có sẵn cho tất cả các file view trong thư mục Views và các thư mục con. Bạn có thể sử dụng chỉ thị @addTagHelper trong các file view cụ thể nếu bạn muốn chọn tham gia hiển thị Tag Helpers chỉ cho những view đó.
Xóa Tag Helpers @removeTagHelper
@removeTagHelper có hai tham số giống như @addTagHelper và nó có nhiệm vụ xóa Tag Helper đã được thêm trước đó. Ví dụ: @removeTagHelper áp dụng cho một view cụ thể sẽ xóa Tag Helper đã chỉ định khỏi view. Việc sử dụng @removeTagHelper trong một 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 phạm vi Tag Helper bằng file _ViewImports.cshtml
Bạn có thể thêm một _ViewImports.cshtml vào bất kỳ thư mục view nào và view engine sẽ áp dụng các lệnh từ cả file đó và file Views/_ViewImports.cshtml. Nếu bạn đã thêm một file trống Views/Home/_ViewImports.cshtml cho view Home, thì sẽ không có thay đổi nào vì file _ViewImports.cshtml đó là file bổ sung. Bất kỳ lệnh @addTagHelper nào bạn thêm vào file Views/Home/_ViewImports.cshtml (không có trong file Views/_ViewImports.cshtml mặc định) sẽ hiển thị các Tag Helpers đó chỉ để xem trong thư mục Home.
Chọn không tham gia các phần tử riêng lẻ
Bạn có thể tắt Tag Helper ở cấp phần tử bằng ký tự từ chối Tag Helper ("!"). Ví dụ: xác thực Email bị vô hiệu hóa trong <span> với ký tự chọn không tham gia Tag Helper:
<!span asp-validation-for="Email" class="text-danger"></!span>
Bạn phải áp dụng ký tự từ chối Tag Helper cho thẻ mở và thẻ đóng (Trình chỉnh sửa Visual Studio tự động thêm ký tự từ chối vào thẻ đóng khi bạn thêm một ký tự vào thẻ mở). Sau khi bạn thêm ký tự chọn không tham gia, thì phần tử và attribute Tag Helper không còn được hiển thị bằng phông chữ đặc biệt nữa.
Sử dụng @tagHelperPrefix để hiển thị rõ ràng việc sử dụng Tag Helper
Chỉ thị @tagHelperPrefix cho phép bạn chỉ định chuỗi tiền tố thẻ để kích hoạt hỗ trợ Tag Helper và làm rõ việc sử dụng Tag Helper. Ví dụ: bạn có thể thêm đánh dấu sau vào file Views/_ViewImports.cshtml :
@tagHelperPrefix th:
Trong hình ảnh code bên dưới, tiền tố Tag Helper được đặt thành th:, do đó, chỉ những phần tử sử dụng tiền tố th: mới hỗ trợ Tag Helpers (các phần tử hỗ trợ Tag Helper có phông chữ đặc biệt). Các phần tử <label> và <input> có tiền tố Tag Helper và được bậ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
Không thể sử dụng nhiều Tag Helpers làm thẻ tự đóng. Một số Tag Helpers được thiết kế để trở thành thẻ tự đóng. Việc sử dụng Tag Helpers không được thiết kế để tự đóng sẽ chặn đầu ra được hiển thị. Tự đóng Tag Helpers dẫn đến thẻ tự đóng trong đầu ra được hiển thị. Để biết thêm thông tin, hãy xem ghi chú này trong Authoring Tag Helpers.
C# trong attribute/khai báo Tag Helpers
Tag Helpers không cho phép có code C# trong attribute của phần tử hoặc khu vực khai báo thẻ. Ví dụ: đoạn code sau không hợp lệ:
<input asp-for="LastName"
@(Model?.LicenseId == null ? "disabled" : string.Empty) />
Đoạn code trên có thể được viết là:
<input asp-for="LastName"
disabled="@(Model?.LicenseId == null)" />
Thông thường, toán tử @ chèn một biểu diễn văn bản của một biểu thức vào phần đánh dấu HTML được hiển thị. Tuy nhiên, khi một biểu thức đánh giá là logic false, thì thay vào đó, framework sẽ loại bỏ attribute. Trong ví dụ trên, attribute disabled được đặt thành true nếu một trong hai Model hoặc LicenseId là null.
Trình khởi tạo Tag Helper
Mặc dù các attribute có thể được sử dụng để định cấu hình các phiên bản riêng lẻ của trình trợ giúp thẻ, nhưng ITagHelperInitializer<TTagHelper> có thể được sử dụng để định cấu hình tất cả các phiên bản của Tag Helper thuộc một loại cụ thể. Xem xét ví dụ sau về trình khởi tạo Tag Helper định cấu hình attribute asp-append-version hoặc attribute AppendVersion cho tất cả các phiên bản của ScriptTagHelper trong ứng dụng:
public class AppendVersionTagHelperInitializer : ITagHelperInitializer<ScriptTagHelper>
{
public void Initialize(ScriptTagHelper helper, ViewContext context)
{
helper.AppendVersion = true;
}
}
Để sử dụng trình khởi tạo, hãy định cấu hình nó bằng cách đăng ký nó như một phần khởi động của ứng dụng:
builder.Services.AddSingleton
<ITagHelperInitializer<ScriptTagHelper>, AppendVersionTagHelperInitializer>();
Tag Helper tạo phiên bản tự động bên ngoài wwwroot
Để Tag Helper tạo phiên bản cho file tĩnh bên ngoài wwwroot, hãy xem Cung cấp file từ nhiều vị trí
Hỗ trợ IntelliSense cho Tag Helpers
Cân nhắc việc viết một phần tử HTML <label>. Ngay khi bạn nhập <l vào trình chỉnh sửa Visual Studio, IntelliSense sẽ hiển thị các phần tử phù hợp:
Bạn không chỉ nhận được trợ giúp về HTML mà còn cả biểu tượng (ký hiệu "@" với "<>" bên dưới).
Biểu tượng xác định phần tử được nhắm mục tiêu bởi Tag Helpers. Các phần tử HTML thuần túy (chẳng hạn như fieldset) hiển thị biểu tượng "<>".
Thẻ HTML thuần túy <label> hiển thị thẻ HTML (với chủ đề màu mặc định của Visual Studio) bằng phông chữ màu nâu, thuộc tính màu đỏ và giá trị thuộc tính màu xanh lam.
Sau khi bạn nhập <label, IntelliSense liệt kê các thuộc tính HTML/CSS có sẵn và các attribute được nhắm mục tiêu bởi Tag Helper:
Hoàn thành câu lệnh IntelliSense cho phép bạn nhập phím tab để hoàn thành câu lệnh với giá trị đã chọn:
Ngay sau khi nhập property Tag Helper, phông chữ của thẻ và attribute sẽ thay đổi. Sử dụng theme màu "Xanh lam" hoặc "Ánh sáng" mặc định của Visual Studio, phông chữ có màu tím đậm. Nếu bạn đang sử dụng theme "Tối", phông chữ sẽ đậm màu xanh mòng két. Hình ảnh trong tài liệu này được chụp bằng theme mặc định.
Bạn có thể nhập phím tắt Visual Studio CompleteWord (Ctrl + phím cách là mặc định) bên trong dấu ngoặc kép ("") và bạn hiện đang ở trong C#, giống như bạn đang ở trong lớp C#. IntelliSense hiển thị tất cả các phương thức và attribute trên mô hình trang. Các phương thức và attribute khả dụng vì loại thuộc tính là ModelExpression. Hình dưới đây thể hiện việc chỉnh sửa view Register, nên RegisterViewModel có sẵn.
IntelliSense liệt kê các property và phương thức có sẵn cho mô hình trên trang. Môi trường IntelliSense phong phú giúp bạn chọn class CSS:
So sánh Tag Helpers với HTML Helpers
Tag Helpers đính kèm với các phần tử HTML trong view Razor, trong khi HTML Helpers được gọi dưới dạng các phương thức xen kẽ với HTML trong view Razor. Hãy xem xét đánh dấu Razor sau đây, tạo nhãn HTML với class CSS "caption":
@Html.Label("FirstName", "First Name:", new {@class="caption"})
Biểu tượng at (@) cho Razor biết đây là điểm bắt đầu của code. Hai tham số tiếp theo ("FirstName" và "First Name:") là các chuỗi nên IntelliSense không thể trợ giúp. Đối số cuối cùng:
new {@class="caption"}
Là một đối tượng ẩn danh được sử dụng để đại diện cho các attribute. Vì class là từ khóa dành riêng trong C# nên bạn sử dụng ký hiệu @ để buộc C# diễn giải @class= dưới dạng ký hiệu (tên property). Đối với một nhà thiết kế giao diện người dùng (một người quen thuộc với HTML/CSS/JavaScript và các công nghệ máy khách khác nhưng không quen thuộc với C# và Razor), thì hầu hết các dòng như ở trên là lạ. Toàn bộ dòng phải được tạo mà không cần sự trợ giúp của IntelliSense.
Thì khi sử dụng LabelTagHelper, đánh dấu tương tự có thể được viết là:
<label class="caption" asp-for="FirstName"></label>
Với phiên bản Tag Helper, ngay khi bạn nhập <l vào trình chỉnh sửa Visual Studio, IntelliSense sẽ hiển thị các phần tử phù hợp:
IntelliSense giúp bạn viết toàn bộ dòng.
Hình ảnh code sau đây hiển thị phần Form của view Razor Views/Account/Register.cshtml được tạo từ mẫu ASP.NET 4.5.x MVC có trong Visual Studio.
Trình chỉnh sửa Visual Studio hiển thị code C# với nền màu xám. Ví dụ, HTML Helper AntiForgeryToken:
@Html.AntiForgeryToken()
được hiển thị với nền màu xám. Hầu hết đánh dấu trong dạng view Register là C#. So sánh điều đó với cách tiếp cận tương đương bằng cách sử dụng Tag Helpers:
Ta thấy rằng các đánh dấu rõ ràng và dễ đọc hơn, dễ chỉnh sửa và bảo trì hơn nhiều so với cách tiếp cận HTML Helpers. Code C# được giảm xuống mức tối thiểu mà máy chủ cần biết. Trình chỉnh sửa Visual Studio hiển thị đánh dấu được nhắm mục tiêu bởi Tag Helper bằng một phông chữ đặc biệt.
Xem xét nhóm Email:
<div class="form-group">
<label asp-for="Email" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="Email" class="form-control" />
<span asp-validation-for="Email" class="text-danger"></span>
</div>
</div>
Mỗi thuộc tính "asp-" có một giá trị là "Email", nhưng "Email" không phải là một chuỗi. Trong ngữ cảnh này, "Email" là thuộc tính biểu thức mô hình C# cho RegisterViewModel.
Trình chỉnh sửa Visual Studio giúp bạn viết tất cả đánh dấu theo cách tiếp cận Tag Helper của biểu mẫu đăng ký, trong khi Visual Studio không cung cấp trợ giúp nào cho hầu hết code theo cách tiếp cận HTML Helpers. Hỗ trợ IntelliSense dành cho Tag Helpers đi sâu vào chi tiết về cách làm việc với Tag Helpers trong trình chỉnh sửa Visual Studio.
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; họ chỉ tham gia vào việc hiển thị 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 bình thường có thể gây khó khăn cho việc phát triển và gỡ lỗi.
- Web Server Controls cho phép bạn thêm chức năng vào các phần tử DOM máy khách bằng cách sử dụng điều khiển máy khách. Tag Helpers không có DOM.
- Web Server Controls cho phép 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ể hành độ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ể soạn 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 nằm trong phạm vi, nhưng không trực tiếp sửa đổi bất kỳ thứ gì khác trên trang. Web Server Controls có phạm vi ít 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 trên trang của bạn; cho phép các tác dụng phụ ngoài ý muốn.
- Web Server Controls sử dụng bộ chuyển đổi kiểu để chuyển đổi chuỗi thành đối tượng. Với Tag Helpers, bạn làm việc tự nhiên trong C#, vì vậy bạn không cần thực hiện chuyển đổi kiểu.
- Web Server Controls sử dụng System.ComponentModel để triển khai hành vi thời gian chạy và thời gian thiết kế của các thành phần và điều khiển.
System.ComponentModelbao gồm các lớp cơ sở và giao diện để triển khai các attribute và bộ chuyển đổi kiểu, liên kết với nguồn dữ liệu và các component cấp phép. Ngược lại với Tag Helpers, thường xuất phát từTagHelpervà lớp cơ sởTagHelperchỉ hiển thị hai phương thứcProcessvàProcessAsync.
Tùy chỉnh phông chữ phần tử Tag Helper
Bạn có thể tùy chỉnh phông chữ và màu sắc từ Tools > Options > Environment > Fonts and Colors:
ASP.NET Core tích hợp sẵn
Tài nguyên bổ sung
- Author Tag Helpers
- Working with Forms
- TagHelperSamples trên GitHub chứa các mẫu Tag Helper để làm việc với Bootstrap.