- 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
Tag helper | Sử dụng | ||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Anchor
|
Tạo các link, hoạt động khi bạn viết thẻ
<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> |
||||||||||||||||||||
Form
|
Chức năng phát sinh phần tử Form HTML, làm việc trên thẻ
Bạn có thể sử dụng Input, Button để tạo ActionForm với các thuộc tính trên. |
||||||||||||||||||||
Image
|
Làm việc trên thẻ <img> với thuộc tính asp-append-version="true"
để thêm query v=xxxx vào địa chỉ ảnh.
|
||||||||||||||||||||
Input
|
Làm việc trên thẻ <input> với thuộc tính asp-for="@data" ,
phần tử sinh ra phụ thuộc vào kiểu data, ví dụ như data là bool thì input có thuộc tính type="checkbox".
Ngoài ra kiểu cũng xác định bởi các thuộc tính bổ sung như: [EmailAddress], [DataType(DataType.Time)] ...
|
||||||||||||||||||||
Label
|
Làm việc trên thẻ <label> với thuộc tính asp-for="@data"
|
||||||||||||||||||||
Link
|
Làm việc trên thẻ <link>
|
||||||||||||||||||||
Select
|
Làm việc trên thẻ <select> , ví dụ:
<select asp-for="Country" asp-items="Model.Countries"></select> |
||||||||||||||||||||
Textarea
|
Làm việc trên thẻ <textarea> với thuộc tính asp-for="s"
|
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>