ASP.NET MVC HTML5 Toolkit Update - August 2013

There have been a number of major updates released with the latest version of the MVC HTML5 Toolkit. You, the community have been great, and the majority of the patches and enhancements have been added via the Codeplex site.

If you aren't familiar with the MVC HTML5 Toolkit, it is library that contains a rich set of controls that you can use to build ASP.net websites using HTML5. It's really lightweight and you can use it to build HTML5 controls in your ASP.NET MVC Views.

DataAnnotation DataType support

This long overdue feature has now been added into the toolkit. You no longer need to specify an input type when calling the helper. For example, if your Model looks like:

And you wanted to produce an HTML5 email input type, you would simply call the helper without any input type:

@Html.Html5TextBoxFor(model => model.CustomerEmail)

It would produce HTML that looked like:

<input id="CustomerEmail" name="CustomerEmail" type="email">

The references to InputType still work, so if your MVC Views contain any code referencing it, you can continue to use it as normal.

Support for Editor and EditorFor controls

The toolkit now supports Editor and EditorFor controls, which give you greater flexibility over your HTML. You can call these Helpers in pretty much the same way that you call a standard TextboxFor, but it will try to render an editor associated to the data type.

You use the Editor and EditorFor methods like so:

@Html.Html5EditorFor(model => model.CustomerEmail)

And they can be used with or without the input type:

@Html.Html5EditorFor(model => model.CustomerEmail, InputTypes.InputType.Email)

Depending on the DataType or InputType passed in, the HTML5 input element will render accordingly.

Field Validation

If we refer to the Model we discussed earlier, you can see that it contains the Required Attribute.

The HTML5 Toolkit will now understand any validation data annotations and add it to the HTML accordingly. If you use the toolkit with validation attributes:

@Html.Html5EditorFor(model => model.CustomerName)

The HTML5 input element will look like:

<input data-val="true" data-val-required="The CustomerName field is required." id="CustomerName" name="CustomerName" type="text" value="">

Thank you

A big thank you to all the people in the community that contributed to this latest release. A big shout out to Patric Forsgard (@PForsgard) for his contributions with the EditorFor & DataAnnotation support!

The Nuget package has been updated and is available to download at nuget.org. You can either download it via the context menu in your Solution Explorer or via the package command line.

I hope you enjoy the latest updates, if you have any suggestions or spot any errors, please drop me a line.