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:
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)