Tag Helpers trong ASP.NET Core MVC

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 dễ dàng. Trong bài này chúng ta sẽ sử dụng nó trong HTML Form mà chúng ta tạo trong Strongly Typed View trước.

1. Tag Helper là gì?

Tag Helper giúp chúng ta viết phần tử HTML trong Razor sử 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 sử 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ụ, sử dụng thẻ Form Tag Helper, chúng ta có thể tạo ra thẻ <form> như dưới đây. Với các thuộc tính asp-action và asp-controller của Form Tag Helper:

<form asp-action="create" asp-controller="home">

Sẽ sinh ra mã HTML như sau:

<form action="/home/create" method="post">

2. Mục đích của Tag Helpers

Bạn có thể tạo form mà không cần dùng Tag Helper (hoặc HTML Helper) như bài trước. Tuy nhiên 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.

3. Sử dụng Tag Helper?

ASP.NET Core Tag Helper nằm trong thư viện Microsoft.AspNetCore.Mvc.TagHelpers bạn cần import thư viện này để sử dụng Tag Helper.

3.1. Thêm Tag Helper sử dụng @addTagHelper

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

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

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

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

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

3.3. Bỏ Tag Helper

Đoạn code dưới đây loại bỏ tất cả tag helper từ assembly Microsoft.AspNetCore.Mvc.TagHelpers từ một view cụ thể: 

@removeTagHelper "*, Microsoft.AspNetCore.Mvc.TagHelpers"

3.4. Thêm một số Tag Helper chỉ định

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

@addTagHelper "Microsoft.AspNetCore.Mvc.TagHelpers.InputTagHelper, Microsoft.AspNetCore.Mvc.TagHelpers"

3.5. Tắt Tag Helper với !

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

<!label asp-for="Name"></!label>

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ở.

4. Ví dụ về Tag Helper

Chúng ta xây dựng Form cho phép thêm mới quyển sách (Book).  Sử dụng Tag Helper. Đầu tiên mở BookController.cs ra và thay đổi action method Create.

public IActionResult Create()
{
    return View();
}
[HttpPost]
public IActionResult Create(Book b)
{
    if (ModelState.IsValid)
    {
        BookData.Create(b);
        return RedirectToAction("Index");
    }
    return View(b);
}

4.1. Form Tag Helper

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

• asp-controller: Chỉ ra tên Controller sử dụng
• asp-action: Chỉ ra tên action method sử dụng

Ví dụ:

<form asp-controller="Book" asp-action="Create">

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

<form method="post" action="/Book/Create">
    <input name="__RequestVerificationToken" type="hidden" value="CfDJ8KYhk_saP5NJkEh6uhW52KtBdIkWqylLrsseoXjtR39SxI_QdfGbRbx_5T7l4YxLalcEUl_ylZInSnB9lJyPtAOHp9SFDjne9B-bU-SPtlE8CuhkC4wgH79Scm3W0NzNccP_EwV3YoWVPgav2gcPqlU" />
</form>

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

4.2. 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. Sử dụng như sau:

<label asp-for="@Model.Name"></label>

Nó sẽ dịch ra:

<label for="Name">Name</label>

Tê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. Sử dụng từ khóa @Model là không bắt buộc. Bạn có thể chỉ ra tên thuộc tính trong Model luôn:

<label asp-for="Name"></label>

4.3. Input Tag Helper

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

<input asp-for="Name" />

Nó sẽ dịch ra:

<input type="text" id="Name" name="Name" value="" />

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:

<form asp-action="Create">
    <div class="form-group">
        <label asp-for="BookId" class="control-label"></label>
        <input asp-for="BookId" class="form-control" />
    </div>
    <div class="form-group">
        <label asp-for="Title" class="control-label"></label>
        <input asp-for="Title" class="form-control" />
    </div>
    <div class="form-group">
        <label asp-for="Price" class="control-label"></label>
        <input asp-for="Price" class="form-control" />
    </div>
    <div class="form-group">
        <input type="submit" value="Create" class="btn btn-primary" />
    </div>
</form>

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

<form action="/Book/Create" method="post">
    <div class="form-group">
        <label class="control-label" for="BookId">BookId</label>
        <input class="form-control" type="text" id="BookId" name="BookId" value="" />
    </div>
    <div class="form-group">
        <label class="control-label" for="Title">Title</label>
        <input class="form-control" type="text" id="Title" name="Title" value="" />
    </div>
    <div class="form-group">
        <label class="control-label" for="Price">Price</label>
        <input class="form-control" type="number" id="Price" name="Price" value="" />
    </div>
    <div class="form-group">
        <input type="submit" value="Create" class="btn btn-primary" />
    </div>
    <input name="__RequestVerificationToken" type="hidden"
        value="CfDJ8KYhk_saP5NJkEh6uhW52KupGrLf4e_6cXe7CanxOnG9V3aHU2p-y0FTrtp5o6Y7VMJlFsq4dx6rKm8_-7pxKOW_wQxG0ChyDZPW4SXnOx0xbao-LiZEh42TVh7eiUD9oP1nqFQlDIQbJ4epGOdZ9v0" />
</form>

5. Lợi ích của Tag Helper

5.1. Thân thiện với cú pháp HTML

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ó dễ dàng đạt được tính chất chia để trị. Bạn có thể dễ dàng thêm CSS hoặc bất cứ thuộc tính HTML nào vào Tag Helper như là với HTML.

5.2. Đượ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 Title.

5.3. Code sạch hơn

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

5.4. 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 nhu cầu. Bạn cũng có thể 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.

6. 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…

Trích nguồn từ: (https://www.tektutorialshub.com/)