Click here to Skip to main content
Click here to Skip to main content
Go to top

Demo Application Showing the Use of Html5MVCWebControls Class Library

, 21 Sep 2011
Rate this:
Please Sign up or sign in to vote.
Demo Application showing the use of Html5MVCWebControls Class Library which is from my previous article.

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.png

IE (v 9.0)

ie.png

Google Chrome (>= v 13.* )

gc.png

Firefox (v 6.*)

ff.png

PlaceholderBox assignednot.gif assignednot.gif assigned.gif assigned.gif
EmailBox assignednot.gif assignednot.gif assigned.gif assigned.gif
UrlBox assignednot.gif assignednot.gif assigned.gif assigned.gif
NumberBox assignednot.gif assignednot.gif assigned.gif assigned.gif
Range assignednot.gif assignednot.gif assigned.gif assigned.gif
SearchBox assignednot.gif assignednot.gif assigned.gif assigned.gif
ColorBox assignednot.gif assignednot.gif assigned.gif assigned.gif
DateBox assignednot.gif assignednot.gif assigned.gif assigned.gif
MonthBox assignednot.gif assignednot.gif assigned.gif assigned.gif
WeekBox assignednot.gif assignednot.gif assigned.gif assigned.gif
TimeBox assignednot.gif assignednot.gif assigned.gif assigned.gif
DateTimeBox assignednot.gif assignednot.gif assigned.gif assigned.gif
DateTimeLocalBox assignednot.gif assignednot.gif assigned.gif assigned.gif
Progress assignednot.gif assignednot.gif assigned.gif assigned.gif
Meter assignednot.gif assignednot.gif assigned.gif assigned.gif
Audio assignednot.gif assignednot.gif assigned.gif assigned.gif
Video assignednot.gif assignednot.gif assigned.gif assigned.gif
All Canvas Elements assignednot.gif assignednot.gif assigned.gif assigned.gif
All SVG Elements assignednot.gif assignednot.gif assigned.gif assigned.gif

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:

Sample Screenshots (all in Google Chrome)

scr5.png

scr-audio.png

scr-video.png

scr-canvas.png

scr-svg.png

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.

scr1.png

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

scr-se.png

Validation

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

scr_validation.png

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

No Biography provided

Comments and Discussions

 
QuestionThanks Pinmembersudeep_dk30-Aug-13 20:24 
GeneralMy vote of 5 Pinmembersparksvijay20-Sep-12 23:19 
GeneralMy vote of 5 Pinmembermanoj kumar choubey12-Feb-12 20:29 
Suggestion.mp4 video possible in Firefox 6 with h.264 plugin PinmemberRune R Hansen23-Sep-11 4:37 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140905.1 | Last Updated 22 Sep 2011
Article Copyright 2011 by Saleth Prakash
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid