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.
By default, Visual Studio validates your HTML as XHTML 1.0 Transitional. This will give you lots of annoying green underlining.
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:
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
outputs this HTML:
which, when you’re using jQuery mobile on its default settings on a black footer, produces this rather elegant button:
And if you think that’s lacking in contrast, we can always add in another data-* element from jQuery mobile…
which gives us…
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.
For other related information, check out these courses from Learning Tree: