Implementation of HTML 5 number input in ASP.NET web forms

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:

<input type="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.

public class 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.

public int Value
{
    get
    {
        if (Page.IsPostBack)
        {
            try
            {
                ViewState["Value"] = Page.Request.Form[this.UniqueID];
            }
            catch { ViewState["Value"] = 0; }
            return Convert.ToInt32(Page.Request.Form[this.UniqueID]);
        }
        if (ViewState["Value"] == null) return 0;
        return (int)ViewState["Value"];
    }
    set { ViewState["Value"] = value; }
}

There are a few things to consider while adding the value property:

  • 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:
public event EventHandler TextChanged;

public bool LoadPostData(string postDataKey, 
System.Collections.Specialized.NameValueCollection postCollection)
{
    string currentValue = this.Value.ToString();
    string postedValue = postCollection[postDataKey];
    if (currentValue == null && !currentValue.Equals(postedValue))
    {
        this.Value = Convert.ToInt32(postedValue);
        return true;
    }
    else
        return false;
}

public void RaisePostDataChangedEvent()
{
    OnTextChanged(EventArgs.Empty);
}

public virtual void OnTextChanged(EventArgs e)
{
    if (TextChanged != null)
        TextChanged(this, e);
}

The last thing to do is to render the control:

protected override void RenderContents(System.Web.UI.HtmlTextWriter w)
{
    w.Write(
        "<input type=\"number\" id=\"{0}\" name=\"{0}\" value=\"{1}\" />", 
        this.UniqueID, this.Value.ToString());
}

As you can see I use HTML5 features.

Now you can add your custom server control to your application:

<cc1:NumberTextBox ID="NumberTextBox1" runat="server" />

And the result would be something like this:
HTML5 number

      By the time, Only Opera and Google Chrome supports up/down arrows functionalities and I really recommend to use

Modernizr

    to make your web app work fine on all browsers.

I also send the source code of this control to help you out. The only thing you need to do is to add this to your project and enjoy:

NumberTextBox.cs (2.02 kb)

How to add CSS3 integration to Visual Studio 2010

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!!!

You can download it now from here.

After you install this extension, you’ll have access to nearly all of the CSS3 features using Visual Studio 2010 intellisense:

CSS3 Intellisense in Visual Studio 2010

As you can see, you also have intellisense for Mozilla and WebKit exclusive attributes.

You can also download this extension right from Visual Studio Extension Manager:

CSS3 Tool In Extension Manager

In my opinion, life is much easier with this extension and I believe, this is one of the most useful extensions I’ve ever used. So download it now!!!

Hope it helps.