Numeric Text Box

In many scenarios we would need textboxes where the user is intended to enter ONLY numbers. If a normal text box is used then making use of the entered text to do numeric calculations will lead to errors (if the user enters text instead of numbers!). There are two solutions to the above problem. The first one is to do a validation in the code to see if text (instead of number) is entered and then popup an error message. However an elegant solution would be to disallow the entry of characters other than numbers. For this we would need a "Number Only" or numeric textbox. In other words we would need a textbox that would only accept numbers. Here is the solution:

Drag and drop a textbox (ID: TextBox1) on to the designer surface. Then drag a "Filtered TextBox Extender" Control on to the surface.

NOTE: To use filtered textbox editor you need asp.et ajax and the control toolkit installed (more info at http://asp.net/ajax and http://asp.net/ajax/ajaxcontroltoolkit/ To use ajax you would also need script manager to be on the page, you will find this in the ajax tab in the toolbox of visual studio once asp.net ajax is installed).

Now set the "targetcontrolID" property of the textbox extender control to the ID of the textbox ("TextBox1" in this case) and the "FilterType" property to "Numbers".

Thats it! Now your Text Box will accept only numbers and alphabets are not accepted anymore by the textbox. The asp code for this is given below:

<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender1" 
     FilterType="Numbers" TargetControlID="TextBox1" runat="server">
</cc1:FilteredTextBoxExtender>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</div>
</form>