The Input Tag Helper

We just talked about the Form Tag Helper in a previous article, but all forms must contain some elements/controls. One of the most commonly used is the INPUT control, which can take many forms to support various types of input. The most common type is the text input control, which will be rendered as a single-line textbox control. However, the HTML input tag can do much more than just accept simple text - I will demonstrate that in this article.

The for attribute

While some Tag Helpers have several attributes available for various purposes, the Input Tag Helper only has one: The asp-for attribute. On the other hand, this attribute is extremely powerful! It will allow you to bind the Input control to a specific property on the Model. As an example, consider that you have a Model called Movie with a property called Title (string). You could create an Input field for it very easily, using the asp-for attribute, like this:

<input asp-for="Title" />

ASP.NET MVC automatically turns it into a proper INPUT tag like this:

<input type="text" id="Title" name="Title" value="The Godfather">

Notice how the single Tag Helper attribute we specified (asp-for) was automatically turned into 4 HTML attributes (type, id, name and value). This can really save you some time when creating FORM's.

Using data types

The value for the name and id attributes came directly from the name of the Title property, while the value naturally came from the value of the Title property. But what about the type attribute? Actually, the .NET framework simply looks at the data type of the property and then generates an appropriate and supported type for this HTML attribute. In this case, because the Title property has been defined as a string, the text value is used for the type attribute.

Using data annotations

However, a string can be many things - it could be an e-mail address, a phone-number (with dashes and/or spaces) or a password. All of these examples could be defined as a string, but require some extra attention. Fortunately for us, ASP.NET MVC allows us to specify the purpose of a member with Data Annotations - and not just for strings. Here's an example:

public class WebUser        
{        
    [Phone]        
    public string PhoneNumber { get; set; }        

    [EmailAddress]        
    public string MailAddress { get; set; }        

    [DataType(DataType.Password)]        
    public string Password { get; set; }        

    [DataType(DataType.Date)]        
    public DateTime Birthday { get; set; }        

    public bool IsActive { get; set; }
}

Notice how I have specified the purpose of the members with Data Annotations. There are two types used here: The [Phone] type, where the intention is specified directly in the annotation, and the [DataType] annotation, where we use the DataType enumeration to specify the purpose. The result is the same though. Notice also how I use it for strings, but also for the Birthday property. By default, a DateTime type is rendered as an input field which takes both a date and a time, but a Birthday is usually specified as a date only. We can specify this requirement by using the DataType.Date value.

We can now create a View where these properties are used, and by using Tag Helpers, these properties will be rendered with the desired input types, without extra effort:

@model HelloMVCWorld.Models.WebUser  
<div>  
    <label asp-for="MailAddress"></label>  
    <input asp-for="MailAddress" />  
</div>  
<div>  
    <label asp-for="PhoneNumber"></label>  
    <input asp-for="PhoneNumber" />  
</div>  
<div>  
    <label asp-for="Password"></label>  
    <input asp-for="Password" />  
</div>  
<div>  
    <label asp-for="Birthday"></label>  
    <input asp-for="Birthday" />  
</div>
<div>
    <label asp-for="IsActive"></label>
    <input asp-for="IsActive" />
</div>

The Tag Helpers will turn this into HTML which looks like this:

<div>  
    <label for="MailAddress">MailAddress</label>  
    <input type="email" data-val="true" data-val-email="The MailAddress field is not a valid e-mail address." id="MailAddress" name="MailAddress" value="" />  
</div>  
<div>  
    <label for="PhoneNumber">PhoneNumber</label>  
    <input type="tel" data-val="true" data-val-phone="The PhoneNumber field is not a valid phone number." id="PhoneNumber" name="PhoneNumber" value="" />  
</div>  
<div>  
    <label for="Password">Password</label>  
    <input type="password" id="Password" name="Password" />  
</div>  
<div>  
    <label for="Birthday">Birthday</label>  
    <input type="date" data-val="true" data-val-required="The Birthday field is required." id="Birthday" name="Birthday" />  
</div>
<div>
    <label for="IsActive">IsActive</label>
    <input type="checkbox" data-val="true" data-val-required="The IsActive field is required." id="IsActive" name="IsActive" value="true" /><input name="IsActive" type="hidden" value="false" />
</div>

Notice how the type properties are automatically filled with the proper values according to the HTML specification ("tel", "phone" etc.). Notice also how the IsActive property is automatically turned into a checkbox, even without Data Annotations, because it's a bool.

Summary

The Input Tag Helper can really speed up the process of making even complex HTML Forms, especially when you use a properly annotated Model.