Navigator : Home > Tutorials > AJAX Tutorials > ...
AJAX Filtered TextBox
This tutorial will teach you how to create a Filtered TextBox using AJAX that only allows certain Characters to be entered into a TextBox control.
AJAX Filtered TextBox ASP.NET 4.0
This tutorial will teach you how to create a Filtered Text Box. A Filtered Text Box is a special
Text Box that only allows certain characters to be entered.
*You should have already installed the AJAX Control Toolkit if you haven't yet get it from here.
Overview
1. Create and Setup for AJAX
2. Add Controls and Extenders to the Form
3. Setup the Extenders
We are using Server Intellect and have found that by far, they are the most friendly,
responsive, and knowledgeable support team we've ever dealt with!
Create and Application and Setup for AJAX
1. Create a new Empty ASP.NET Web Application
2. Right Click on the Project and Navigate to ->Add -> New Item
3. Select a New Web Form and name it Default.aspx
4. It is good practice to add a Script Manager to all AJAX Applications seeing as you will always
need it so Drag a Script Manager Control onto the Form from the AJAX Section of the Toolbox
5. Next we can Start Adding Controls to the Form
Add Controls and Extenders to the Form
1. Start by adding a Label to the Form and set the text property to say Hexadecimal
2. Directly underneath this drag a TextBox Control to the form
3. Now we can add the Filtered TextBox Extender to the TextBox by clicking on the
Smart tag and clicking Add Extender.
4. From Inside the Menu select the Filtered Text Box Extender and name it TextBox1_ftbe then Press OK
5. Now we need to add two more Labels and two more TextBoxes So Select them and Copy then Paste Them twice
6. This should have setup two new Labels above Two new TextBoxes(TextBox2 and TextBox3) with two new extenders.
If so we can begin Filtering the Text that is input.
We chose Server Intellect for its dedicated servers,for our web hosting.
They have managed to handle virtually everything for us, from start to finish. And their customer service is stellar.
Setup the Extenders
1. Go into the Code View and Find the Extender tags
|
a. FilterType="Numbers,Custom" ValidChars="ABCDEF"
b. FilterType="Custom" ValidChars="01"
c. FilterType="Numbers"
|
3. The Numbers Tag allows you to type the numbers 0-9, the Custom Tag allows whatever you Type in
the ValidChars Tag to be displayed, and both of them means you can have numbers plus whatever is typed in ValidChars.
5. And that should complete the tutorial go ahead and run the project and try to type numbers/characters into
the boxes (the ValidChars are case sensitive ie. In the Hexadecimal box “A” is valid “a” is not valid)
Conclusion
In this tutorial we learned how to use the Filtered Text Box Extender to filter what can be typed into our TextBoxes.
This can be very useful on applications where you need to take in info from the user and it will allow you to only get what
you need for instance if you need a Zip Code from the user Filter it to only accept numbers and you won’t have to worry about
the user entering invalid characters into the Zip Code box.
Full Code Sample(ASP.NET)
|
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Label ID="Label1" runat="server" Text="Hexadecimal"></asp:Label>
<br />
<asp:textbox runat="server" ID="TextBox1"></asp:textbox>
<asp:FilteredTextBoxExtender ID="TextBox1_ftbe" runat="server" Enabled="True"
TargetControlID="TextBox1" FilterType="Numbers,Custom" ValidChars="ABCDEF"></asp:FilteredTextBoxExtender>
<br />
<asp:Label ID="Label2" runat="server" Text="Binary"></asp:Label>
<br />
<asp:textbox runat="server" ID="TextBox2"></asp:textbox>
<asp:FilteredTextBoxExtender ID="TextBox2_FilteredTextBoxExtender"
runat="server" Enabled="True"
TargetControlID="TextBox2" FilterType="Custom" ValidChars="01"></asp:FilteredTextBoxExtender>
<br />
<asp:Label ID="Label3" runat="server" Text="Decimal"></asp:Label>
<br />
<asp:textbox runat="server" ID="TextBox3"></asp:textbox>
<asp:FilteredTextBoxExtender ID="TextBox3_FilteredTextBoxExtender"
runat="server" Enabled="True"
TargetControlID="TextBox3" FilterType="Numbers" ValidChars="ABCDEF"></asp:FilteredTextBoxExtender>
</div>
</form>
</body>
</html>
|
Yes, it is possible to find a good web host. Sometimes it takes a while. After trying several,
we went with Server Intellect and have been very happy. They are the most professional,
customer service friendly and technically knowledgeable host we've found so far.