June 2011

As I mentioned in my previous post, HTML 5 and CSS 3 are rocking and most of web developers are trying to upgrade their project to HTML5 because it makes their life easier and Microsoft has done a great job by adding HTML5 intellisense to Visual Studio 2010 SP1.

Everything works great in ASP.NET MVC and ASP.NET Web Pages project but when it comes to ASP.NET web forms, you may have some problems using HTML5 tags in your application and access them from runtime. You can’t use the following:

<inputtype="number"runat="server"/>

Yesterday, I was trying to use HTML5 number input tag in my application and found out that ASP.NET web forms engine doesn’t support HTML5 new elements so I decided to write my own NumberTextBox control in order to do so and in this post I’m going to share it with you.

As you know, when want to develop an ASP.NET custom server control, you have to inherit your control’s class to System.Web.UI.WebControls.WebControl; and in this case, I implemented IPostBackDataHandler because it’s a necessary interface when your control is going to process during post backs.

publicclass NumberTextBox : WebControl, IPostBackDataHandler

The second is to add a “Value” property to the class in order to get and set the value of control which is very easy task to do.

The property must return value from Page.Request.Form[“Control ID”] because all HTML controls send data via HTTP headers (or QueryString) in Postbacks; so the only way to get the value which is entered by user in post back is using Page.Request.Form[“Control ID”].

You should use ViewState in order save the current value of control over posts backs. It’s very common among Visual Studio Controls. As I checked, TextBox control is also use this way to save that data. The third is the implementation of IPostBackDataHandler:

These days HTML5 and CSS3 are the most popular topic in web development communities because they make you more creative to develop cool websites or web applications.

Fortunately, Microsoft has added HTML5 intellisense to Visual Studio 2010 in SP1 release and it helped a lot in my project’s development. But one thing that makes me confuse is that CSS3 is still not supported in Visual Studio even in SP1! Microsoft Visual Web Developer Team did a post about HTML5 & CSS3 in Visual Studio 2010 SP1 and described about CSS3 improvements:

In SP1 there are a few improvements in the CSS3 support as well, though not as elaborate as with HTML5. The editor now supports the more advanced selectors such as div:nth-child(2n+1) without giving validation errors and the new color values rgba, hsl, hsla and 8 digit hex values are also supported.

In fact, this is not enough; because you still can’t access all of the features (Using Intellisense) of CSS3 in your applications. Because of that, I decided to post this in order to introduce a very cool Visual Studio Extension that helps you to have almost all of the features of CSS3 in Visual Studio Intellisense.

CSS 3 Intellisense Schema

This extension has been developed and released by one of my Iranian friends, Mojtaba Kaviani and it’s so cool!!!