The Input Tag Helper generates the appropriate <input> HTML element for the model property. The model property is bound using the asp-for attribute. The input tag helper generates the appropriate HTML type, name & id attribute based on the Property data type & data annotations applied to the ViewModel. The ViewModel must be strongly typed to the View. It also emits the Validation related attributes, which helps in unobtrusive client-side validation. The asp-format attributes help in generating the properly formatted input elements.
Table of Contents
Input tag helper
The Input Tag Helper is applied on the <input> HTML elements. It has only two server-side attributes.
- asp-for
- asp-format
asp-for
The asp-for binds to the model property and it generates the HTML based on the type, name and data annotations of the model property.
<input asp-for=”<Expression Name>” />
Example for asp-for
Consider the model
1 2 3 | public string Name { get; set; } |
The following markup
1 2 3 | <input asp-for="Name" /><br /> |
Generates the following HTML
1 2 3 | <input type="text" id="Name" name="Name" value="" /><br /> |
HTML input Type attribute
The asp-for automatically generates the HTML type attribute based on the following criteria and in the order specified.
- Type Specified in the HTML
- The Data annotation attribute applied to the model property.
- The .NET data type model type is used
Type Specified in the HTML
The Type already specified in the HTML will not be overwritten.
Example
1 2 3 4 | [EmailAddress] public string Email { get; set; } |
The following markup
1 2 3 | <input type=”text” asp-for="Email" /><br /> |
Will generate the following markup. Input type is text irrespective of [EmailAddress] data annotation is applied on the model.
1 2 3 | <input type="text" id="Email" name="Email" value="" /><br /> |
Based on Data Annotation attribute
The Data Annotation attribute applied to the model is used to generate the type attribute.
For Example, the EmailAddress data annotation translates into “type=email”
1 2 3 4 | [EmailAddress] public string Email { get; set; } |
and the following code
1 2 3 | <input asp-for="Email" /><br /> |
generates the following HTML markup
1 2 3 | <input type="email" data-val="true" data-val-email="The Email field is not a valid e-mail address." id="Email" name="Email" value="" /><br /> |
Here is the list of Data Annotation attributes and their corresponding input types
| Attribute | Input Type |
|---|---|
| [EmailAddress] | type=”email” |
| [Url] | type=”url” |
| [HiddenInput] | type=”hidden” |
| [Phone] | type=”tel” |
| [DataType(DataType.Password)] | type=”password” |
| [DataType(DataType.Date)] | type=”date” |
| [DataType(DataType.Time)] | type=”time” |
Based on the .NET data type
If the Data Annotation attribute is not found, then the Input Tag Helper uses the model .NET data type to determine the HTML type
For Example
1 2 3 | public DateTime DateOfJoining { get; set; } |
1 2 3 | <input asp-for="DateOfJoining" /> |
Generates the following HTML
1 2 3 | <input type="datetime-local" data-val="true" data-val-required="The DateOfJoining field is required." id="DateOfJoining" name="DateOfJoining" value="0001-01-01T00:00:00.000" /><br /> |
boolean data type example
1 2 3 | public bool isActive { get; set; } |
1 2 3 | <input asp-for="isActive" /><br /> |
Generates the following HTML.
1 2 3 | <input type="checkbox" data-val="true" data-val-required="The isActive field is required." id="isActive" name="isActive" value="true" /><br /> |
The table below lists some of the common .NET types and their corresponding HTML input type
| NET type | Input Type |
|---|---|
| Bool | type=”checkbox” |
| String | type=”text” |
| DateTime | type=”datetime-local” |
| Byte, int, Single, Double | type=”number” |
| decimal, double, float | type=”text” |
HTML id & name attribute
The id and name HTML attributes is derived from the expression name specified in the asp-for attribute
1 2 3 4 | [EmailAddress] public string Email { get; set; } |
1 2 3 | <input type=”text” asp-for="Email" /><br /> |
Which translates into following HTML markup. The id & name attribute is same as the expression used in the asp-for attribute
1 2 3 | <input type="text" id="Email" name="Email" value="" /><br /> |
Child Properties
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; } } |
You can refer to the address1 as follows
1 2 3 | <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 the asp-for attribute. The id property uses the underscore instead of dot
1 2 3 | <input type="text" id="Address_address1" name="Address.address1" value="" /><br /> |
The list of colours
1 2 3 | <input asp-for="colors[0]" /><br /> |
The above code gets translated into
1 2 3 | <input type="text" id="colors_0_" name="colors[0]" value="red" /><br /> |
The brackets [ ] are replaced by an underscore in the generated HTML for the id attribute.
Validation Attributes
The input tag helper also generates the data validation related attributes in the generated HTML markup.
The data validation attributes start with data-val-*. They contain the validation information like Minimum & Maximum value allowed, whether the value is required or not, Range allowed, regular expression, error messages etc.
The ASP.NET Core Unobtrusive Client Validation framework uses these data-val-* attributes to validate the data on the client side.
The Input tag helpers determine the data validation attributes by inspecting the .NET data type and the data annotations applied to the model property.
For Example applying [Required] attribute to the string property, the data-val & data-val-required attributes are automatically inserted in the generated HTML as shown in the example below.
1 2 3 4 | [Required] public string Name { get; set; } |
1 2 3 4 | <input asp-for="@Model.Name" /><br /> <input type="text" data-val="true" data-val-required="The Name field is required." id="Name" name="Name" value="" /><br /> |
Adding the error Message to the required attribute
1 2 3 4 | [Required(ErrorMessage ="Please enter the name")] public string Name { get; set; } |
1 2 3 | <input asp-for="Name" /><br /> |
Generates the following HTML
1 2 3 | <input type="text" data-val="true" data-val-required="Please enter the name" id="Name" name="Name" value="" /><br /> |
The DateTime property automatically gets the data-val-required attribute, even if the [Required] attribute is not applied as shown below
1 2 3 | public DateTime DateOfJoining { get; set; } |
1 2 3 | <input asp-for="@Model.DateOfJoining" /> |
Generates the following HTML
1 2 3 | <input type="datetime-local" data-val="true" data-val-required="The DateOfJoining field is required." id="DateOfJoining" name="DateOfJoining" value="0001-01-01T00:00:00.000" /><br /> |
You can disable it by making the property Nullable
1 2 3 | public DateTime? DateOfJoining { get; set; } |
1 2 3 | <label for="DateOfJoining">DateOfJoining</label> |
Generates the following HTML
1 2 3 | <input type="datetime-local" id="DateOfJoining" name="DateOfJoining" value="" /><br /> |
The following is some of the data annotations attributes, which generates the appropriate data validation attributes.
| Attribute | Description |
|---|---|
| Compare | Used to specify another form field that the value should be compared to for equality |
| MaxLength | Sets the maximum number of characters/bytes/items that can be accepted |
| MinLength | Sets the minimum number of characters/bytes/items that can be accepted |
| Range | Sets the minimum and maximum values of a range |
| RegularExpression | Checks the value against the specified regular expression |
| Remote | Enables client-side validation against a server-side resource, such as a database check to see if a username is already in use |
| Required | Specifies that a value must be provided for this property. Note that non-nullable value types such as DateTime and numeric values are treated as required by default and do not need this attribute applied to them |
| StringLength | Sets the maximum number of string characters allowed |
asp-format
The asp-format attribute takes the string format and applies it to the input property.
For example, the following asp-format displays the numeric value up to 2 decimal places
1 2 3 | public decimal Balance { get; set; } |
1 2 3 | <input asp-for="Balance" asp-format="{0:N2}" /><br /> |
Generates the following HTML
1 2 3 | <input type="text" data-val="true" data-val-number="The field Balance must be a number." data-val-required="The Balance field is required." id="Balance" name="Balance" value="0.00" /><br /> |
Here is the list of formatting types that you can use with the asp-format.
Summary
In this tutorial, we learned how to use Input tag helper.
Awesome Tutorial! Thanks!
Thanks Ammy
hi,love this tutorial!! thanks!
Hello, I’m Jack, Korean.
ModelView Class, key property is Index
another property Id, Name, Phone etc…
Question.
razor page example.
@*
*@
i want Id input text value = Id property value
but Id input text value = Index property value.
Is there any way to solve from a upper problem?