Tips for Using HTML5 with ASP.NET MVC

The mobile version of jQuery is due out in the next few weeks – it’s currently a release candidate – and I’m working on a project using it. I haven’t done much in the way of mobile development so far, as I’ve been kept permanently busy doing traditional Web development. However, the release of mobile jQuery, and the massive uptake of mobile devices, means it’s time to get with the program. I’m learning a lot as I go, and I’ll be sharing anything I think is useful or interesting with you as the project progresses.

The project combines jQuery mobile with HTML5, Entity Framework 4 and ASP.NET MVC3 (with Razor). I’m not using HTML5 on a whim, but because jQuery mobile relies on it – and that, in turn, made me turn automatically to ASP.NET MVC rather than ASP.NET Web Forms, as MVC lets you write all your own HTML. Having said which, there are some gotchas even with ASP.NET MVC – so here are a couple of tips to help you write HTML5 with ASP.NET MVC.

  1. Change Visual Studio’s default HTML validation.

    By default, Visual Studio validates your HTML as XHTML 1.0 Transitional. This will give you lots of annoying green underlining.

    error warning on data-role

    You can get rid of the warnings (and get useful HTML5 validation) by going into Tools > Options > Text Editor > HTML > Validation and changing the target to HTML5:

    data-role with no error warning

  2. Use _ for – in data-*

    ASP.NET MVC 3 allows you to pass in the hyphenated data-* HTML5 attributes using an underscore. It then automatically replaces the underscore with the hyphen. So that the following code

    use of _ in place of -

outputs this HTML:

output HTML from use of _ in place of -

which, when you’re using jQuery mobile on its default settings on a black footer, produces this rather elegant button:

visual output use of _ in place of -

And if you think that’s lacking in contrast, we can always add in another data-* element from jQuery mobile…

use of data-theme

which gives us…

output from use of data-theme

Of course, the _ for – substitution only works if you’re using ASP.NET MVC3 – which begs the question of what you can do if you’re still using ASP.NET MVC 2. It’s such an interesting question, I think I might just address in it in my next blog post….

Goodbye until then.

Kevin Rattan

For other related information, check out these courses from Learning Tree:

Building Web Applications with ASP.NET MVC

jQuery: A Comprehensive Hands-On Introduction

HTML5: Next Generation Web Development

Type to search

Do you mean "" ?

Sorry, no results were found for your query.

Please check your spelling and try your search again.