ASP.NET Numeric TextBox Server Control

Update
This post is more of a demonstration for how to write a Web Forms Server Control, than a numeric text box. If you’re looking for a slicker solution using jQuery then I’d recommend reading this.

Download NumericTextBox.zip (20 KB)

Here’s a simple example of how to build a server control with embedded javascript. This example creates a textbox control (NumericTextBox) that accepts numeric input only:

The control is derived from TextBox with a few tweaks:

namespace JamesAllen.Web.UI.WebControls
{
  [Description("Textbox for numerical input")]
  [ToolboxData("<asp:NumericTextBox runat=\"server\"></asp:NumericTextBox>")]
  [ToolboxBitmapAttribute("NumericTextBox.bmp")]
  public class NumericTextBox : TextBox
  {
    protected override void AddAttributesToRender(HtmlTextWriter writer)
    {
      writer.AddAttribute("onkeydown", "return NTB_IsNumeric(event);");
      base.AddAttributesToRender(writer);
    }

    protected override void OnPreRender(EventArgs e)
    {
      base.OnPreRender(e);
      ClientScriptManager cs = this.Page.ClientScript;
      cs.RegisterClientScriptInclude("NumericTextBoxJs", cs.GetWebResourceUrl(this.GetType(), "JamesAllen.Web.UI.WebControls.Scripts.NumericTextBox.js"));
    }
  }
}

The javascript looks something like this:

function NTB_IsNumeric(event){
  var key = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
  if (key == 13 || (key >= 48 && key <= 57)) return true;
  else return false;
}

If you build the project and add the DLL to the toolbox you should see the control with its very own icon:

Testing
The javascript has been tested under IE8, Chrome 8 and Firefox 3.6.

References
4guysfromrolla:
http://www.4guysfromrolla.com/articles/080906-1.aspx

Dan Wahlin’s WebLog:
http://weblogs.asp.net/dwahlin/archive/2007/04/29/creating-custom-asp-net-server-controls-with-embedded-javascript.aspx

Download NumericTextBox.zip (20 KB)

Advertisements
This entry was posted in Reference and tagged , . Bookmark the permalink.

12 Responses to ASP.NET Numeric TextBox Server Control

  1. Duran says:

    Thanks for your consideration my friend but I couldn’t make it work.
    I added dll from “Choose Toolbox Items” window by using Browse button. It appeared in General part of Toolbox. Dragged it to my page. “Error Creating Control” message appeared.
    Waiting for your advices.

  2. Duran says:

    i am using .NET 4.0 and Visual Studio 2010 Professional.
    i imported only the NumericTextBox.dll file under the “Release” directory in your .rar file. May be i have done something wrong when adding it to the Toolbox.

  3. Denny says:

    I have created a custom control using your code. But it is not working, ie. I can enter both numeric and non-numeric data in the textbox

    • codeoverload says:

      Hi Denny, what browser/version are you using? I’ll see if I can re-create the problem tomorrow evening.

      • Denny says:

        Firfox 9.0.1,IE 8,

      • codeoverload says:

        Hi Denny, I’ve restested on IE9 and Chrome 16/17 and both seem to work. I can only suggest you attempt to debug the javascript as there may be a possible script error elsewhere on the page. In Internet Explorer, press F12 to view the developer tools and select the Console tab, then refresh the page – any problems in the javascript should be listed in the window. For Firefox, try installing the Firebug add-on which does the same thing.

      • codeoverload says:

        I’ve added a link at the top of this post for a jQuery based solution. Personally, I tend to use jQuery these days for all my javascript needs. Hope it helps.

  4. harshit says:

    it is saying NTB_IsNumeric(event) is undefined

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s