Setup and getting started

Setup and Getting Started

The default ASP.NET MVC editor templates can be overwritten by introducing your own files to ~/Views/Shared/EditorTemplates. If you want to have the templates apply to only one specific controller, swap out "Shared" with the name of that controller.

This project provides a NuGet package called MvcHtml5Templates which will copy the Html5 EditorTemplates into your project. This is the recommended and most painless way to get the templates into your project.

Alternatively, the HTML5 input template files are available here. You can always download the latest version and then copying the ~/Views/Shared/EditorTemplates folder into your own project at that location.

Once the editor templates are in your project, the only thing you need to do is decorate your model class with the appropriate metadata. Assuming you are using the Data Annotations (System.ComponentModel.DataAnnotations, the default ASP.NET MVC metadata provider), you can either use [DataType(...)] or [UIHint(...)] attributes to communicate what input type should be used for a specific property.

For example:

 public class Person {
     [DataType(DataType.EmailAddress)]
     public string Email {get;set;}
     [DataType(DataType.Url)]
     public string Url {get;set;}
     [DataType("Search")]
     public string Search {get;set;}
 }

When using Html.EditorFor(...) will result in:

 <input type="email" id="Email" name="Email" />
 <input type="url" id="Url" name="Url" />
 <input type="search" id="Search" name="Search" />

On modern browsers you will get added functionality using these new input types, and the iPhone will even see type="email" and present a special "email address optimized" keyboard! See what the all of the HTML5 input types would look like in Chrome 10 or FireFox 4.

And now you are rocking HTML5 magic on your website. Sit back and wait for the kudos to roll in.