MVC Web Applications - HTML5 with Visual Studio 2012 - page 54

he DataType attribute is specified using the DataType enum. This includes a fairly large but fixed set of
values, such as the contextual types EmailAddress , CreditCard , Currency , PostalCode , and Url . If you add a
DataType attribute, the editor template with the matching name is used. You included the DataType attributes
when you implemented the FeedbackModel .
he UIHint attribute is specified with a string and you can therefore use any value to want. If you want
a property displayed in green font, you can specify the UIHint("GreenFont") attribute in the model and
then provide a GreenFont.cshtml template. The UIHint takes precedence over the DataType attribute when
determining the appropriate template to use.

■ Tip My GreenFont example was used to illustrate how the UIHint attribute works. You should not use it for
setting style properties as this is the role of the style sheets. A more appropriate application of the UIHint attribute
will be demonstrated later in this chapter when you implement a range control.

4. Right-click the Views\shared\EditorTemplates folder and select the Add ➤ View

links. in the Add View dialog box, enter the name Date and unselect all of the check
boxes. Replace the view implementation with the following code:

@Html.TextBox("", null, new { @class = "text-box single-line",
type = "date" })

5. in the same way, add another editor template named Url and use the following

implementation:
@Html.TextBox("", null, new { @class = "text-box single-line", type =
"url", placeholder = "Enter a web address" })

6. Create a PhoneNumber template using the following code:

@Html.TextBox("", null, new { @class = "text-box single-line", type =
"tel", placeholder = "Enter a phone number" })

7. Create a Number template using the following code:

@Html.TextBox("", null, new { @class = "text-box single-line", type =
"number", placeholder = "Enter a number" })

Save your changes and press F5 to debug your application. The feedback form should now use the HTML5
controls as shown in Figure 3-12 .