ASP.NET MVC meets HTML5[转]

转自：http://weblogs.asp.net/gunnarpeipman/archive/2010/08/16/asp-net-mvc-meets-html5.aspx


Today I tried out ASP.NET MVC HTML5 Helpers Toolkit by Dean Hume. Although browsers today support HTML5 partially it is time to start playing with it. As soon as HTML5 gets common standard in web you should be able to react fast. In this posting I will introduce you HTML5 Helpers Toolkit and some HTML5 field types.

HTML5 Helpers Toolkit is easy to install. Just download the package, unpack it and reference the DLL you found from package. That’s all. You don’t have to do anything more. If your browser doesn’t support HTML5 then HTML5 fields are rendered as usual textboxes and you can extend them using jQuery by example.

E-mail field

HTML5 defines many types for input boxes. One of the types is e-mail. Here is the demo of e-mail field with placeholder value. Yes, in HTML5 textboxes support placeholders and we don’t have to mess with JavaScript anymore. This is how e-mail box is defined.

<form>
    <%= Html.Html5TextBox("userEmal", InputTypes.InputType.Email,
                          "plah@plah.com") %>
</form>

And here is the result on Firefox 4 Beta.

Nice, isn’t it? I discovered one cool thing when I tested HTML5 Helpers Toolkit with Opera. I tried to submit form where e-mail address is not valid. And this is what happened:

Form was not submitted and all I got was this error message in red box. Cool!

Slider

As a next thing let’s see how to get numeric slider on page without any JavaScript. Numbers in slider box definition have the following meaning: minimum is 1 and maximum is 50, step is 2 and default value is 25.

<form>
    <%= Html.Html5Range(1, 50, 2, 25, null) %>
</form>

And here is the result on Chrome.

If we want we can use usual HTML to decorate slider with numbers mentioned above. But I like the result – simple, calm and clean.

Date picker

Now let’s do something that only Opera seems to support right now – let’s create HTML5 date picker. Definition is here.

<form>
    <%= Html.Html5TextBox("deliveryDate", InputTypes.InputType.Date) %>
</form>

And here is the result on Opera.

Seems good to me. And again – no additional JavaScript is needed. Until other browsers also start supporting this kind on input box you can use jQueryUI Datepicker component.

Conclusion

Although HTML5 is not here yet it is coming very soon and seems like ASP.NET MVC will be soon ready for it. Although HTML5 Helpers Toolkit doesn’t provide all HTML5 controls yet it is still great start and I think this project is worth keeping eye on it. It is very easy to install and very easy to use and I suggest you to try it out as soon as possible.