If you haven't started playing around with HTML5 yet, you should definitely check it out. I've blogged about some of the features of HTML5 before, so if you take a look at this post, it should give you a fairly idea of what HTML5 is about.

I try and play around with ASP.net MVC as much as possible and this site is also written in MVC 2. One of the things that I thought about adding to MVC is the ability to have all the textboxes and controls updated to use HTML5. One of the great things about HTML5 is that even though some browsers do not currently support it, you will still be able to use it in your web applications and the browser will just handle it as a normal HTML control if it doesn't recognize it.

So, I've finally got around to creating a proper project and solution for these controls. You can find the project on codeplex at http://mvchtml5.codeplex.com/

Getting started

Firstly, you need to add a reference in your project. Simply right-click on your project in the solution explorer and select "Add reference". Then browse to the location of the System.Web.Mvc.Html5.dll.

Then, you simply call it the same way you would call a normal textbox in your MVC view.

There is also added support for Strongly-Typed HTML Helpers

And any additional html attributes:

You can also call the new Html5 Range and Number input types.

If you currently use model validation in your controllers, you will be happy to know that this is also supported. So, if you check if your model state and it is not valid, the appropriate CSS will be added in the same way that it currently is with the standard textboxes.

Additional Information

These are some extra attributes that are also available with this toolkit:

• Support for Textbox Placeholders
• Support for HTML attributes
• Support for HTML5 Range and Number input types.
• There is also support for the following input types in the toolkit: Text, Color, Email, Search, Time, Tel, File, Date, Datetime, Month, Week, Range, Number

In terms of requirements to be able to use this toolkit, you will need:

• Asp.net MVC 2
• Asp.net 3.5 framework sp1 - download here.

If you would like to contribute to this project, or you simply find any bugs and would like to report them please let me know.

Comments

Davinder - 8/15/2010
Wow! This is lovely; I can't wait to add it to my project. Thank you for making this!

Gunnar - 8/15/2010
I tried it out with ASP.NET MVC 3 Preview 1. Everything was easy and worked like charm. Great work, Dean! I just blogged about your toolkit: http://weblogs.asp.net/gunnarpeipman/archive/2010/08/16/asp-net-mvc-meets-html5.aspx

avox - 8/17/2010
Hi. I was very happy when i run into this toolkit, but my happiness was short. I user VS 2008 sp 1 .net 3.5 sp1 and mvc 2.0 RTM for VS 2008 and i have a problem. I add reference to my project , but i can't access html5 helper. I don't have intelisence, and i got error when i run that view. Thanks.

Scott Hanselman - 8/18/2010
Wonderful!

Andrew - 8/18/2010
Hey Dean, It looks awesome, but you said older browsers would just downgrade the experience - how does that relate to the Range and Numbers? Also, if the placeholder doesn't work, because of the downgraded experience, does it take that back to something else? Thanks.

Kiliman - 8/18/2010
Dean, have you had a chance to look at the Nu project[1]? This is basically Ruby Gems for .NET. By packaging up your Html5 toolkit as a gem, it makes it very easy for developers to download and add to their project. [1] http://groups.google.com/group/nu-net

Dean Hume - 8/20/2010
@Andrew Take a look at this article http://diveintohtml5.org/forms.html.Basically, if your browser doesn't support the placeholder, it just simply wont be displayed. Concerning the range and number sliders, again if your browser doesnt support it - no problem,it will just be displayed as type="text"

Dean Hume - 8/20/2010
@Scott Thank you! @Kiliman No, unfortunately I haven't had the chance just yet. I will definitely check it out - thanks for the info.

wilian - 8/24/2010
question:What different Html5 with not Html5

Arne - 8/25/2010
Where can I find a complete code example that compiles and runs?

Quooston - 9/29/2010
Rock on dude, this is awesome. More!

Sean - 12/16/2010
Hmmm...there is something else going on here. Because, I added it as a reference, but my view pages don't seem to be able to "see" it. Do I have to import a namespace, or does it matter where I put the dll? Thanks for any help on this!

Dave Bacher - 1/18/2011
@sean: As with all extension methods, the static class containing the method needs to be visible. So to get these extensions, the namespace System.Web.Mvc.Html5 needs to be visible to your view. The exact mechanism for that is determined by the view engine you're using.

SiwonKim - 6/13/2011
Is it work fine with MVC3 with razor? I tried several times but it could not be shown in intelicense , and even I run it manually it occurs error. How can I use this?

Peter Campbell - 6/23/2011
Should this work with model prefixes? When i've tested it, the html5 looked right, but the id of the tag was not using the prefix, like id="Office_Email" and the model was not being updated when I changed the email field. It works fine when i change it to use the normal textboxfor.

Alan Holm - 8/22/2011
Will this work with VS2010

Steve - 9/26/2011
Why can't I get intellisense or even get it to work? I tried MVC 2 and 3. There should be an official release of this.

Ray Choe - 8/30/2012
add below on top of the page, then you will get the intelicense @using System.Web.Mvc.Html5;

maviyan - 9/27/2012
Thanks a lot for sharing this amazing knowledge with us. This site is fantastic. I always find great knowledge from it. http://www.surveytool.com/online-poll/

Sandeep - 9/27/2012
There is a issue while binding data with model in case of partial views. Reason for this is that it do not generates fully name like "LaborRates.Name". As of now it is only generating "Name". Please let us know if there is any fix for this.

Sandeep - 9/27/2012
Fixed the issue in your library. Now library generates ModelName_PropertyName in ID attribute and ModelName.PropertyName in name attribute.

Add your comment