Demo Application Showing the Use of Html5MVCWebControls Class Library

• Download solution - 5 MB

Introduction

Well, this is my twelfth article just showing the use of the class library developed for ASP.NET MVC 3 for the use of HTML 5 controls. You can see the details about the class library in my previous article.

Background

For my previous article about HTML 5 controls for ASP.NET MVC, I found some comments about giving an example application of how to use the html5 class library controls for ASP.NET MVC. Some users mentioned to give a demo application for a clear understanding. So I tried this and posted so that the users can come to a good idea of the use of the class library. You can see a good output in Google Chrome since it supports most of the HTML 5 controls. I have given a table below which describes the output obtained in different browsers. Actually I tested the whole thing in Google Chrome where I got good output.

Controls	IE (<= v 8.0)	IE (v 9.0)	Google Chrome (>= v 13.* )	Firefox (v 6.*)
PlaceholderBox
EmailBox
UrlBox
NumberBox
Range
SearchBox
ColorBox
DateBox
MonthBox
WeekBox
TimeBox
DateTimeBox
DateTimeLocalBox
Progress
Meter
Audio
Video
All Canvas Elements
All SVG Elements

Regarding IE, there is no support for HTML 5 controls in the versions before v9.0. But also some controls are not supported in v9.0. As per one Microsoft website, IE 10.0 will be supporting most HTML 5 controls. I tried to test this in IE 10 Preview platform, but I was not able to test, since it failed to install in my laptop.

Code

ASPX View Engine

<% Html.Html5().Media.Video("video1", "~/content/mediafiles/video1.webm", 
	"Your browser does not support", new { @width="400px", @height="300px"}); %>

Razor View Engine

@Html.Html5().Media.Video("video1", "~/content/mediafiles/video1.webm", 
	"Your browser does not support", new { @width="400px", @height="300px"})

Audio and Video

For Audio only MP3 files will be supporting. And video only webm files will be supporting. So you need to convert all types of videos to webm format. You can get many video converter tools online. You can download them and convert the video. Please check the following link:

• http://en.wikipedia.org/wiki/HTML_5_video

Sample Screenshots (all in Google Chrome)

Developing Application

As we know while creating a ASP.Net MVC 3 Application, in VS 2010, select the respective option and then we will get a another dialog as shown in the below figure. In that, please select "Use HTML5 semantic markup", so that we will get Html5 intellisense in the web pages.

Then we need to add this class library in our ASP.NET MVC application.

Validation

HTML 5 control client validation as of now you can check in Google chrome and Firefox.

Points of Interest

You can download the class library from my previous article: HTML 5 Controls for ASP.NET MVC.

Conclusion

Thanks for viewing this article. I expect feedback from you. You expect more from me.