(ASP.NET Razor) Một số TagHelper xây dựng TagHelper riêng

• Tag Helper trong ASP.NET Core - Razor Page
• Một số Tag Helper cung cấp sẵn
• Anchor Tag Helper
• Form Tag Helper
• Image Tag Helper
• Image Tag Helper
• Input Tag Helper
• Label Tag Helper
• Link Tag Helper
• Select Tag Helper
• Textarea Tag Helper
• Tạo Tag Helper riêng

Tag Helper trong ASP.NET Core - Razor Page

Tag Helper là các thành phần giúp cho việc phát sinh mã HTML trong trang Razor, chủ yếu phát sinh các thẻ HTML. ASP.NET Core cung cấp sẵn những Tag Helper để phát sinh các thẻ HTML phổ biến, nâng cao hơn bạn có thể tự tạo ra Tag Helper của riêng mình.

Các Tag Helper cung cấp sẵn trong ASP.NET Core thường làm việc trên các thẻ HTML chuẩn, sau đó thêm vào các thuộc tính với tiền tố asp-, Tag Helper làm việc nó sẽ phát sinh chính xác thẻ theo yêu cầu.

Ví dụ với Anchor Tag Helper, nếu bạn viết:

<a asp-page="ViewProduct" asp-route-id="2" >Sản phẩm 2</a>

Thì kết quả có thể là (tùy thuộc vào khai báo Route trang ASP ViewProduct):

<a href="/sanpham/2" >Sản phẩm 2</a>

asp-page, asp-route-id là thuộc tính của Tag Helper này

Kích hoạt nạp các Tag Helper

Để Razor sử dụng được các Tag Helper cung cấp sẵn bạn cần nạp vào bằg chỉ thị @addTagHelper, mặc định các trang Razor được nạp khi đã khai báo trong _ViewImports.cshtml (vai trò file _ViewImports) với dòng:

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

Một số Tag Helper

<a asp-page="ViewProduct" asp-route-id="2">Sản phẩm khác</a>
// Kết quả: <a href="/ViewProduct/2/" >Sản phẩm khác</a>

<select asp-for="Country" asp-items="Model.Countries"></select>

Tạo Tag Helper riêng

Thực hành tạo ra một Tag Helper, đặt tên thẻ là myul với dữ liệu truyền vào là list-items là một danh sách chuỗi, list-title tiêu đề, kết quả là phát sinh HTML cấu trúc ul, li như sau:

<h2>Tiêu đề</h2>
<ul class="list-group">
    <li class="list-group-item">item1</li>
    <li class="list-group-item">item2</li>
    ...
</ul>

Để tạo ra một Tag Helper, cần tạo ra lớp kế thừa lớp TagHelper sau đó phải nạp chồng phương thức Process hoặc ProcessAsync nếu dùng bất đồng bộ.

using System;
using System.Collections.Generic;
using System.Text;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Razor.TagHelpers;


namespace MyTagHelper
{
  // thẻ sẽ là myul
  [HtmlTargetElement("myul")]
  public class MyULTagHelper : TagHelper
  {
    // Thuộc tính sẽ là list-title
    public string ListTitle { get; set; }
    // Thuộc tính sẽ là list-items
    public List<String> ListItems {set; get;}


    // ProcessAsyn nếu bất đồng bộ

    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
        output.TagName = "ul";    // ul sẽ thay cho myul
        output.Attributes.SetAttribute("class", "list-group");
        output.TagMode = TagMode.StartTagAndEndTag;
        output.PreElement.AppendHtml($"<h2>{ListTitle}</h2>");
        StringBuilder stringBuilder = new StringBuilder();
        foreach (var name in ListItems)
        {
            stringBuilder.Append($@"<li class=""list-group-item"">{name}</li>");
        }
        output.Content.SetHtmlContent(stringBuilder.ToString());
    }

  }
}

Như vậy đã khai báo xong một Tag Helper. Để nạp và sử dụng chúng hãy cho chỉ thị sau vào file _ViewImports.cshtml

@addTagHelper *, razor04.codebehide

Ở đây razor04.codebehide là assembly chứa Helper này. Ở đây là file build được từ mã nguồn.

Sử dụng:

@{
   var productlist = new List {
        "Tên Sản phẩm 1",
        "Tên Sản phẩm 2",
        "Tên Sản phẩm 3"
     };
}
<myul list-title="Danh sách sản phẩm" list-items="@productlist"></myul>

Kết quả là:

<h2>Danh sách sản phẩm</h2>
<ul class="list-group">
    <li class="list-group-item">Tên Sản phẩm 1</li>
    <li class="list-group-item">Tên Sản phẩm 2</li>
    <li class="list-group-item">Tên Sản phẩm 3</li>
</ul>