Input Tag Helper ASP.NET Core

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. 

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

The following markup

Generates the following HTML

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

The following markup

Will generate the following markup. Input type is text irrespective of [EmailAddress] data annotation is applied on the model.

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”

and the following code

generates the following HTML markup

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

Generates the following HTML

boolean data type example

Generates the following HTML.

The table below lists some of the common .NET types and their corresponding HTML input type

NET typeInput Type
Booltype=”checkbox”
Stringtype=”text”
DateTimetype=”datetime-local”
Byte, int, Single, Doubletype=”number”
decimal, double, floattype=”text”

HTML id & name attribute

The id and name HTML attributes is derived from the expression name specified in the asp-for attribute

Which translates into following HTML markup. The id & name attribute is same as the expression used in the asp-for attribute

Child Properties

Consider the model person, which has child Address property and an array of colours.

You can refer to the address1 as follows

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

The list of colours

The above code gets translated into

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.

Adding the error Message to the required attribute

Generates the following HTML

The DateTime property automatically gets the data-val-required attribute, even if the [Required] attribute is not applied as shown below

Generates the following HTML

You can disable it by making the property Nullable

Generates the following HTML

The following is some of the data annotations attributes, which generates the appropriate data validation attributes.

AttributeDescription
Compare Used to specify another form field that the value should be compared to for equality
MaxLengthSets the maximum number of characters/bytes/items that can be accepted
MinLengthSets the minimum number of characters/bytes/items that can be accepted
RangeSets the minimum and maximum values of a range
RegularExpressionChecks the value against the specified regular expression
RemoteEnables client-side validation against a server-side resource, such as a database check to see if a username is already in use
RequiredSpecifies 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
StringLengthSets 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

Generates the following HTML

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.

4 thoughts on “Input Tag Helper ASP.NET Core”

  1. 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?

Leave a Comment

Your email address will not be published. Required fields are marked *

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

Scroll to Top