The Label Tag Helper

Element Label của HTML dùng để kết hợp với các điều khiển khác, để thể hiện mục đích của điều khiển khác - hay nói cách khác như tên của nó chỉ ra, dùng để gán nhãn cho điều khiển khác. Hiển nhiên, khi bạn dùng label cùng điều khiển khác thì trình duyệt biết rằng hai thành phần này đi cùng nhau. Nó có đặc điểm là khi chúng ta nhấn vào Label thì điều khiển được kích hoạt. Rất tốt cho trường text và thậm chí tốt hơn cho checkbox hay radio button, do phần bấm vào của chúng rất nhỏ.

Liên kết giữa Label với các điều khiển khác dùng thuộc tính "for" và trỏ tới thuộc tính ID của điều khiển khác, như sau:

<label for="FirstName">First name:</label>
<input type="text" id="FirstName" />

Tuy nhiên, khi dùng Label Tag Helper, có mối quan hệ mật thiết giữa Model và Label - nếu bạn thay đổi thuộc tính của Model, thì sẽ tự động thay đổi Tag Helper

The for property

Như với các Tag Helper khác thì liên kết với Model thông qua thuộc tính "for" và giống như các Tag Helper khác thì chúng cần mào đầu. Mào đầu này thường là "asp" nếu bạn không thay đổi. Vậy Tag Helper cho phép Label trông như sau:

<label asp-for="FirstName"></label>
<input asp-for="FirstName" />

Notice how you no longer have to specify the text of the Label - it will be automatically pulled from the Model, and the HTML "for" attribute will be automatically filled to match the designated input element. The resulting HTML will look like this:

<label for="FirstName">FirstName</label>
<input type="text" id="FirstName" name="FirstName" value="" />

The Display Data Annotation

Khi nhìn vào hai ví dụ, bạn sẽ thấy có sự khác biệt nho nhỏ: Ví dụ đầu tiên khi bạn dùng Label của HTML, phần text là "First name:". Khi dùng Tag Helper, text được tự động lấy từ Model và trả về "FirstName", vì đó là tên thuộc tính. Tuy nhiên, tên thuộc tính không phù hợp để làm label. Có nghĩa tôi chắc rằng mọi người hiểu "FirstName", nhưng "First name:" chính xác và đúng hơn.

Rất may cho chúng ta, dễ để thay đổi - chỉ dùng Data Annotation Display trong Model như sau:

public class WebUser
{
    [Display(Name = "First name:")]
    public string FirstName { get; set; }
    ....

Mã HTML sinh ra như sau:

<label for="FirstName">First name:</label>
<input type="text" id="FirstName" name="FirstName" value="" />

Điều tuyệt vời ở đây là bất cứ khi nào bạn thay đổi thuộc tính Name trong Display của Data Annotation thuộc Model thì nó sẽ thay đổi ở mọi chỗ dùng nó trong View. Do đó nếu bạn dùng nhiều View với Model đó thì bạn không phải tự tay thay đổi từng cái.

Summary

Label Tag Helper là một trong những Tag Helper đơn giản nhất trong framework nhưng rất hữu ích và nó cho phép ta dễ dàng sinh Label trong FORM và liên kết chúng chặt chẽ với các trường.