Tag Helpers là tính năng mới của ASP.NET Core, nó giúp chúng ta thêm code phía server vào HTML đơn giản. Trong bài này chúng ta sẽ dùng nó trong HTML Form mà chúng ta tạo trong Strongly Typed View trước.

Bạn đang xem: Html helpers trong mvc là gì

Tag Helper là gì?

Tag Helper giúp chúng ta viết phần tử HTML trong Razor dùng cú pháp thân thiện với HTML. Nó nhìn như là HTML chuẩn vậy nhưng code được xử lý bởi Razor Engine trên server và nó tận dụng đươc các ưu điểm của việc xử lý phía server.

Razor được tạo dùng Tag Helper nhìn như phần tử HTML thuần. Nó thao tác với các phần tử HTML như thêm mới phần tử HTML hay thay thế các nội dung có sẵn bằng một cái mới.

Ví dụ, dùng thẻ Form Tag Helper, chúng ta khả năng tạo ra thẻ như dưới đây. Với các thuộc tính asp-action và asp-controller của Form Tag Helper:

Sẽ được gen ra HTML:

Mục đích của Tag Helpers

Bạn khả năng tạo form mà không cần dùng Tag Helper (hoặc HTML Helper) như bài trước. mặc khác Tag Helper sẽ giúp tạo ra view HTML đơn giản hơn dựa trên dữ liệu từ Model gắn vào nó. Ví dụ Label Tag Helper sẽ tạo ra tiêu đề dựa trên attribute Data Annotation trong View Model. Tương tự như thế thì Input Tag Helper sẽ tạo ra id, name, type của phần tử HTML dựa trên kiểu dữ liệu của Model và thuộc tính Data Annotation.

dùng Tag Helper?

ASP.NET Core Tag Helper nằm trong thư việnMicrosoft.AspNetCore.Mvc.TagHelpersbạn cần import thư viện này để dùng Tag Helper.

Thêm Tag Helper dùng
addTagHelper

Để dùng Tag Helper bạn cần thêm khai báo
addTagHelper vào view, nơi mà bạn muốn dùng.

addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpersĐoạn code trên dùng wildcard (“*”) để chỉ ra tất cả Tag Helper được thêm vào từ thư việnMicrosoft.AspNetCore.Mvc.TagHelpers.

Thêm Tag Helper toàn bộ các View

Thêm
addTagHelper vào một view nào đó chỉ có công dụng trên view đó. Bạn khả năng thêm
addTagHelper vào _ViewImports.cshtml để dùng Tag Helper trên toàn bộ các view của ứng dụng.

Bỏ Tag Helper

Đoạn code dưới đây loại bỏ tất cả tag helper từ assemblyMicrosoft.AspNetCore.Mvc.TagHelpers từ một view chi tiết:

removeTagHelper “*, Microsoft.AspNetCore.Mvc.TagHelpers”

Thêm một vài Tag Helper chỉ định

Thay vì add tất cả tag helper thì bạn khả năng chọn ra một vài cái mà bạn muốn dùng thôi:

addTagHelper “Microsoft.AspNetCore.Mvc.TagHelpers.InputTagHelper, Microsoft.AspNetCore.Mvc.TagHelpers”

Tắt Tag Helper với !

Bằng cách dùng ký tự ! trước mỗi phần tử HTML, bạn sẽ khả năng vô hiệu hóa tag helper cho phần tử đó:

Tag helper label này được vô hiệu hóa với đoạn code trên. Bạn phải áp dụng ký tự! cho cả thẻ đóng và thẻ mở.

Xem thêm: Luyện Tập Về Từ Chỉ Đặc Điểm Là Gì, Luyện Tập Về Từ Chỉ Đặc Điểm Và Câu “Ai Thế Nào

dùng
tagHelperPrefix để bật Tag Helper

Thay vì vô hiệu hóa tag helper dùng ký tự !, bạn khả năng dùng
tagHelperPrefix

tagHelperPrefix th:Giờ thì tiền tố th: phải được chỉ ra cho tất cả các tag helper trên view, để bật tag helper cho nó:

//Tag helper is enabled //Tag helper is disabled

Ví dụvề Tag Helper

Chúng ta xây dựng một Form đơn giản như bài trước. Hãy dùng Tag Helper. Đầu tiên mở HomeController.cs ra và thay đổi ngay action method Create.

public IActionResult Create() ProductEditModel model = new ProductEditModel(); return View(model);Thể hiện của ProductEditModel được gán vào View để tạo Strongly Typed View. Mở Create.csthml từ thư mục /Views/Home.

Form Tag Helper

Form Tag Helper được bao bởi thẻ . Form Tag Helper cung cấp một vài thuộc tính phía server giúp chúng ta thao tác để tạo ra HTML. một vài thuộc tính đó là:

asp-controller: Chỉ ra tên Controller sử dụngasp-action: Chỉ ra tên action method sử dụngasp-area: Chỉ ra tên Area dùng

Ví dụ:

Đoạn code trên sẽ biên dịch ra HTML thuần là:

Chú ý là Form Tag Helper nó sẽ tự động thêm Antiy-Forgery Token vào HTML tạo ra.

Label Tag Helper

Label Tag Helper được áp dụng cho phần tử label. Nó có một thuộc tính là asp-for. dùng như sau:

Nó sẽ dịch ra:

NameTên của trường đó sẽ được lấy từ tên của thuộc tính trong Model hoặc từ Data Annotation của thuộc tính trong Model. dùng từ khóa
Model là không bắt buộc. Bạn khả năng chỉ ra tên thuộc tính trong Model luôn:

Cái này bạn khả năng đọc Strongly Typed View ở bài trước.

Input Tag Helper

Tương tự, Input Tag Helper cũng được áp dụng cho phần tử input:

Nó sẽ dịch ra:

Thuộc tính type, id và name tự động lấy từ tên và kiểu dữ liệu của trường đó trong Model. Cuối cùng form nhìn như sau:

Khi chạy nó sẽtạo ra HTML như này:

Create

Name Rate Rating

Lợi ích của Tag Helper

Thân thiện với cú phápHTML

Tag Helper nhìn như là phần tử HTML chuẩn. Các Front end Developer không cần học cú pháp C# hay Razor để thêm các phần tử này vào View. Vì thế nó đơn giản đạt được tính chất chia để trị. Bạn khả năng đơn giản thêm CSS hoặc bất cứ thuộc tính HTML nào vào Tag Helper như là với HTML.

Được hỗ trợ bởi IntelliSense

Tag Helper cung cấp sự hỗ trợ bởi cơ chế gợi ý thông minh của Visual Studio. Ví dụ dưới khi chúng ta thấy gợi ý cho label của thuộc tính Rating.

Code sạch hơn

Code sẽ sạch và rõ ràng hơn dùng HTML Helper cũ. Không cần phải dùng ký tự
để chuyển giữa C# và HTML.

Dễ mở rộng hơn

ASP.NET Core MVC cung cấp nhiều tag helper có sẵn giúp chúng ta tạo view. Nhưng nếu không có tag helper nào phù hợp với mong muốn. Bạn cũng khả năng tạo ra Tag Helper của riêng mình bằng cách mở rộng các Tag Helper có sẵn. Trong tương lai mình sẽ có bài viết về việc này.

Danh sách các Tag Helper có sẵn

Thư viện Microsoft.AspNetCore.Mvc.TagHelpers chứa nhiều các Tag Helper có sẵn cho các công việc thường dùng như tạo form, validate form, label, link…

TAG HELPERTạo raThuộc tính Form Tag Helper asp-action, asp-all-route-data, asp-area, asp-controller, asp-fragment, asp-host, asp-page, asp-page-handler,asp-protocol,asp-route, asp-route- AnchorTag Helpers asp-action, asp-all-route-data, asp-area, asp-controller, asp-Fragment, asp-host, asp-page, asp-page-handler, asp-Protocol, asp-route, asp-route- Cache Tag Helper enabled1,expires-after2,expires-on3,expires-sliding4,priority5,vary-by6 Environment Tag Helper names, include, exclude Image Tag Helper append-version Input Tag Helper for Label Tag Helper for Link Tag Helper href-include, href-exclude, fallback-href, fallback-href-include, fallback-href-exclude, fallback-test-class, fallback-test-value, fallback-test-property, fallback-test-value, append-version Options Tag Helper asp-for, asp-items Partial Tag Helper name,model,for,view-data Script Tag Helper

Bài trước