• Skip to content
  • Skip to primary sidebar
  • Home
  • Angular
  • ASP.NET Core
  • Entity Framework
    • Entity Framework 6
    • Entity Framework Core
  • Crystal Reports
  • C#
  • ASP.NET
  • About Us
    • Privacy Policy
    • Contact Us

TekTutorialsHub

Free Online Tutorials

Label Tag Helper ASP.NET Core

July 18, 2018 by TekTutorialsHub Leave a Comment

Input Tag Helper 
Form Tag Helper
 

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. 

In this article

  • Label tag helpers
    • Example of Label Tag Helper
    • Label Caption
      • Label Specified in the HTML
      • The Display Data annotation attribute applied
      • Property Name
    • for attribute
    • Child Properties
  • Summary

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

  1. Label caption specified in the HTML
  2. The Display Data annotation attribute applied
  3. 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.

Input Tag Helpers 
Form Tag Helper
 

Filed Under: ASP.NET Core Tagged With: Tag Helpers

Leave a Reply

wpdiscuz_captcharefresh
The comment form collects your name, email and content to allow us keep track of the comments placed on the website. Please read and accept our website Terms and Privacy Policy to post a comment.
wpdiscuz_captcharefresh
The comment form collects your name, email and content to allow us keep track of the comments placed on the website. Please read and accept our website Terms and Privacy Policy to post a comment.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
Notify of

Primary Sidebar

Copyright ©2008-2018

About us Contact Privacy Policy

Feb,22,2019 01:44:36 PM

Copyright © 2019 · Magazine Pro on Genesis Framework · WordPress · Log in

wpDiscuz
Our web site uses cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.OkRead more