Introduction

What is an extender? The AJAX Control Toolkit uses extenders to provide additional capabilities that go beyond what the normal ASP.NET controls can do out-of-the-box. This is because these extenders use client-side script to perform animations, transformations, or other cool effects. These features are available in DHTML, while some may be browser-specific; however, to the developer, the extender handles all the work through the script that it emits, and all we need to worry about is the setup of the extender.

Using the FilteredTextBox Extender

To use the toolkit, you have to download it (the link is in the References section), and unzip it in your Visual Studio 2005\Projects folder. Navigate to the SampleWebSite\bin directory to get to the AjaxControlToolkit.dll file, which contains all of the extenders. In the code sample, I used the following web configuration setup in the pages element:

<add
  tagPrefix="ajaxtoolkit"
  namespace="AjaxControlToolkit"
  assembly="AjaxControlToolkit" />

Using this following configuration, I setup a sample that allows the user to enter a phone number. The code segment is as follows:

Enter a Phone Number:
<asp:TextBox ID="txtPhoneNumber" runat="server" />
<ajaxtoolkit:FilteredTextBoxExtender
   ID="extPhoneNumber"
   runat="server"
   TargetControlID="txtPhoneNumber"
   FilterType="Numbers, Custom"
   ValidChars="-">
</ajaxtoolkit:FilteredTextBoxExtender>

Notice that the textbox doesn't have anything special added to it; the extender emits script for it, which an extender is linked to it through the TargetControlID (a consistent property to target a control throughout the control library). The other properties that were used were:

• FilterType - The filter type is an enumeration that supports multiple assignments separated by a comma. It has possible values of LowerCaseLetters, UpperCaseLetters, Numbers, and Custom. In the above example, I use Numbers and Custom options.
• ValidChars - When using Custom FilterType, the ValidChars property contains a listing of characters that are the only ones allowed in the textbox.

Result

The effective result is that only numbers and the - character are allowed to be typed in to the textbox. No other values can be keyed in. However, validation is still needed to ensure that the values are in the correct order (this extender doesn't require the values be in any order). In the above example, I would have still needed that a RegularExpressionValidator be used to ensure a correct format. This is a way though, to ensure that the correct results are provided in your applications that you develop.

Another Example

How would you set this up for name? FilterType has a combination of UppercaseLetters and LowercaseLetters that can be used; however, this doesn't take care of the space. This means that the Custom option must be used as well, allowing for a ValidChars parameter of " ". Using this, you can also ensure that only the correct name data can be entered. The example is below:

Enter your Name:
<asp:TextBox ID="txtName" runat="server" />
<ajaxtoolkit:FilteredTextBoxExtender
   ID="extName"
   runat="server"
   TargetControlID="txtName"
   FilterType="UppercaseLetters,LowercaseLetters,Custom"
   ValidChars=" " />

When running the form, this filter actually restricts the keyboard from entering values outside this range. Only letters and spaces are allowed to be typed in. The extender adds a script reference that points to a script stored as an embedded resource in the DLL for the control library, and the reference is generated dynamically. Using this extender, you can see a means to make validation of data easier in your applications.

Summary

This article discusses some of the new possibilities with the AJAX.NET extensions and the AJAX Control Toolkit, available from Microsoft. The FilteredTextbox is an Extender that provides the means to ensure that only the correct data can be entered into a textbox; however, it still requires validation be setup for your applications.

References

To see the filtered text box in action, check out the demo on the AJAX Control Toolkit site. The toolkit is available on Code Plex. You can get the new AJAX.NET extensions off of the ASP.NET web site. Currently, the extensions are installed in the GAC; but there is the possibility of Microsoft deploying one that can be copied to the bin directory as well.

Downloads

ATLAS FilteredTextBoxExample (269 KB)

About Brian Mains

Brian Mains is an application developer consultant with Computer Aid Inc. He formerly worked with the Department of Public Welfare. In both places of business, he developed both windows and web applications, small and large, using the latest .NET technologies. In addition, he had spent many hou... View complete profile