Coding Tips & Tricks


Home > HTML5

ASP.net MVC HTML5 Toolkit

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.

HTML5 Toolkit

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

HTML5 Toolkit

There is also added support for Strongly-Typed HTML Helpers

HTML5 Toolkit

And any additional html attributes:

HTML5 Toolkit

Another great thing about HTML5 is that it offers native support for placeholders - no more need for heavy javascript!

HTML5 Placeholder

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

HTML5 Range

HTML5 Number

And they display like so:

HTML5 Range

HTML5 Number

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.

MVC Model State

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;

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.

Justin - 7/29/2013
Is it possible to make it adhere to the Required Data Annotation? maybe I'm missing something

Adam - 12/5/2013
Hi, I try to use a toolkit with my project asp .net mvc 2 VB.NET behind. I doesn't work. I need some help please. (I am french guy. Sorry for my bad level in english)

dave - 2/19/2014
hi, this is nicely constructed and a time saver. well done. aside: the captcha is difficult to read.

Marius - 4/29/2014
Awesome!Thank you!

Marius - 4/29/2014
Is there available a textarea control? Thank you!

Stuart - 03-05-2014 - 5/3/2014
Html5.Editor for seems to be ignoring my DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)] attributes. Am I doing it wrong, missing something.


Add your comment

300 Characters left


Please fill this in to confirm that you are human