The Input Tag Helper

Chúng ta vừa nói về thẻ Form Helper trong chương trước nhưng form phải chứa vài thành phần/control. Một trong số control hay được dùng nhất là INPUT, có thể có nhiều dạng input. Loại hay được dùng nhất là text input, sẽ được thể hiện thành dạng textbox. Tuy nhiên, thẻ HTML input có thể làm được nhiều hơn là dạng text đơn giản - tôi sẽ minh họa trong bài này.

Thuộc tính for

Trong khi một vài Tag Helper có nhiều thuộc tính sẵn dùng cho nhiều mục đích thì Input chỉ có một: thuộc tính asp-for. Mặt khác, thuộc tính này rất hữu ích! Nó cho phép ta truyền dữ liệu từ control Input tới một thuộc tính trong Model. Ví dụ, bạn có một Model gọi là Movie với một thuộc tính là Title. Bạn có thể tạo ra một trường Input rất dễ dàng dùng asp-for như sau:

<input asp-for="Title" />

ASP.NET MVC tự động chuyển sang thẻ INPUT như sau:

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

Chú ý một thuộc tính trong Tag Helper (asp-for) được tự động chuyển thành 4 thuộc tính trong HTML (type, id, name and value). Điều này có thể tiết kiệm chút thời gian khi tạo FORM.

Using data types

Thuộc tính name và id từ tên của thuộc tính Title, trong khi value tới từ giá trị của thuộc tính Title. Nhưng thuộc tính type thì sao? .NET framework chỉ thấy kiển dữ liệu và sinh ra HTML phù hợp. Trong trường hợp này, vì Title là kiểu string nên text gán cho thuộc tính type.

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.