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

eXerCISe 3-5. re-IMpLeMeNtING the eMaIL teMpLate

1. save the changes and open the EmailAddress.cshtml template.

2. Replace the entire implementation with the following:

@Html.Html5().EmailControl()

3. save the changes and press F5 to debug. The placeholder text should now reflect

the prompt specified in the model metadata as demonstrated in Figure 3-13 .

Figure 3-13. The modified Email field

4. View the source of this page and the HTMl markup for the Email field should look like:

<input type="email" id="Email" name="Email" placeholder="Preferred e-mail address"
class="text-box single-line"/>

Implementing a RangeControl
As you saw in the previous chapter, the range control supports some additional attributes that are not available
in the standard TextBoxFor (or even EditorFor) implementations. To implement this using the MVC framework,
you'll implement a custom helper method. You'll then provide an editor template that calls this custom method.
Finally, you'll add a UIHint attribute in the model metadata that will tell the framework to use the new template.

Implementing a Custom Helper Method
The first step is to create a custom helper method that will generate the appropriate markup for a range control.
This will be similar to the EmailControl() method that you just implemented except that is doesn't include the
placeholder attribute. Also, the min , max , and step attributes are passed in to the method.
Add the code in Listing 3-7 to the Html5.cs file (inside the Html5Helper class).

Listing 3-7 . The RangeControl implementation

public IHtmlString RangeControl(int min, int max, int step)
{

string id;
string name;
string value;
string valueAttribute;

ViewDataDictionary viewData = htmlHelper.ViewData;

// Build the HTML attributes
id = viewData.TemplateInfo.GetFullHtmlFieldId(string.Empty);
name = viewData.TemplateInfo.GetFullHtmlFieldName(string.Empty);