The label Tag Helper generates the appropriate <label> HTML element for the model property of our ViewModel. The model property is bound to the model property using the asp-for attribute. In this tutorial, we will learn how to use Label Tag Helper in detail.
Table of Content
Label tag helpers
The label TagHelper is simplest of all the tag helpers. The purpose of the label tag helper is to generate the label caption & for attribute for the expression provided in the asp-for attribute. It is applied on the <label> HTML element. It has only one server-side attribute asp-for.
Example of Label Tag Helper
1 2 3 | public string Email { get; set; } |
1 2 3 | <label asp-for="Email"></label> |
Which will generate the following HTML
1 2 3 | <label for="Email">Email</label> |
The label tag helper uses the property name as the label caption.
Label Caption
The asp-for automatically generates the label caption based on the following criteria and in the order specified
- Label caption specified in the HTML
- The Display Data annotation attribute applied
- Property Name
For Example
Label Specified in the HTML
1 2 3 4 | [Display(Name = "Please Enter Email")] public string Email { get; set; } |
1 2 3 | <label asp-for="Email">Enter Email </label> |
Which will generate the following HTML
1 2 3 | <label for="Email">Enter Email </label> |
The Display Data annotation attribute applied
1 2 3 4 | [Display(Name = "Please Enter Email")] public string Email { get; set; } |
1 2 3 | <label asp-for="Email"></label> |
Which will generate the following HTML
1 2 3 | <label for="Email">Please Enter Email</label> |
Using the Display data annotations makes writing the source code easier and simple. Any changes in display annotation are gets reflected everywhere the label is used.
Property Name
1 2 3 | public string Email { get; set; } |
1 2 3 | <label asp-for="Email"></label> |
Which will generate the following HTML
1 2 3 | <label for="Email">Email</label> |
for attribute
HTML for attribute of the label element refers to the id of the input element, to which the label refers to.
Consider the model person, which has child Address property and an array of colours.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | public class person { public List<string> colors { get; set; } public Address Address { get; set; } public person() { Address = new Address(); colors = new List<string>(){"red","blue"}; } } public class Address { public string address1 { get; set; } } |
Child Properties
1 2 3 4 | <label asp-for="Address.address1"></label> <input asp-for="Address.address1" /><br /> |
The above code generates the following markup. Note that name & id attribute value is same as the expression used in asp-for attribute. The id property uses the underscore instead of the dot.
1 2 3 4 | <label for="Address_address1">Please enter the address</label> <input type="text" id="Address_address1" name="Address.address1" value="" /><br /> |
Arrays
1 2 3 4 | <label asp-for="colors[0]"></label> <input asp-for="colors[0]" /><br /> |
Which will generate the following HTML
1 2 3 4 | <label for="colors_0_">colors[0]</label> <input type="text" id="colors_0_" name="colors[0]" value="red" /><br /> |
The underscore replaces the brackets [ ] in the generated HTML for the id attribute.
Summary
In this tutorial, we learned how to make use of Label Tag Helper.
Leave a Reply