Asp.net core Tag Helper

Nếu bạn đã làm việc với ASP.NET MVC thì chắc chắn đã từng làm việc với Razor helpers, một cú pháp giúp chúng ta tạo ra các mã HTML cho form, link hay select box ..

Ví dụ một đoạn mã Razor Helper

Bây giờ thay vì viết như trên, thì chúng ta có thể sử dụng Tag Helper như dưới đây mà vẫn cho kết quả tương tự

Nhìn qua 2 cú pháp như trên, bạn có thể dễ dàng nhận thấy điều khác biệt giữa Tag Helper so với HTML chỉ là các attribute, do đó Tag Helper dễ học và dễ tiếp cận hơn so với Razor Helper, giúp cho front-end developer có thể làm việc trực tiếp với mã nguồn mà không cần phải học thêm cú pháp mới.

Danh sách các Tag Helper mà .net core cung cấp sẵn

1. Tag Helper cho form

Form
FormAction
Input
Label
Option
Select
TextArea
ValidationMessage
ValidationSummary

2. Caching

Cache
Distributed

3.Khác

Image
Anchor
Script
Link
Environment

Một điều các bạn cần phải nhớ đó là tất cả các Tag Helper đều bắt đầu bằng tiền tố asp-

1. Image Tag Helper

Nếu bạn luôn muốn server trả về ảnh mới nhất thì hãy thêm attribute asp-append-version=”true” vào thẻ img. Ảnh sẽ được đánh version để theo dõi các phiên bản, điều này có nghĩa là khi bạn thay đổi nội dung ảnh (kích cỡ, hay 1 ảnh hoàn toàn khác nhưng giữ nguyên tên) thì kết quả trả về luôn là ảnh mới nhất, ảnh sẽ không bị caching. Tuy nhiên nếu ảnh không có thay đổi gì thì dữ liệu vẫn được lấy từ cache ra, nên bạn hoàn toàn yên tâm về performance.

2. Link Tag Helper

Để tạo 1 link thì bạn chỉ cần thêm thuộc tính asp-action & asp-controller như sau

3. Script Tag Helper

Chèn css

Chèn javascript

Đoạn mã trên sẽ mặc định sử dụng thư viện bootstrap từ CDN, tuy nhiên trong trường hợp không tải được từ CDN thì sẽ sử dụng phiên bản bootstrap ở local (asp-fallback-src). Thuộc tính asp-append-version giúp chúng ta đánh version cho script, tức là sẽ luôn lấy version mới nhất. Còn thuộc tính asp-fallback-test giúp chúng ta kiểm tra xem đã tải được bootstrap ở CDN hay chưa.

Ngoài ra script Tag Helper còn giúp chúng ta reference tới nhiều file trong 1 thư mục một cách nhanh chóng

Giả sử chúng ta có thư mục chứa js như trên, thì chỉ cần 1 lệnh sau để import tất cả file js

Mã HTML generate ra sẽ như sau

Nếu muốn loại bỏ một file js nào đó thì chúng ta sử dụng asp-src-exclude

Vậy đối với thẻ href để chèn css thì sao ? Các bạn làm tương tự nhé nhưng sử dụng 2 attribute asp-href-includeasp-href-exclude

Tham khảo https://www.davepaquette.com/archive/2015/05/06/link-and-script-tag-helpers-in-mvc6.aspx