Published: 17 Nov 2006
By: Brian Mains

The new AJAX.NET Extensions and the AJAX Control Toolkit provide powerful additions to the ASP.NET developer. By providing client-side capabilities all controlled within these "extenders," you have the means to provide more powerful input into how the application interacts, giving your application a richer UI. In this article, we'll be looking at the FilteredTextBox extender to see how this works.

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:

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

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:

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)

<<  Previous Article Continue reading and see our next or previous articles Next Article >>

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...

This author has published 73 articles on DotNetSlackers. View other articles or the complete profile here.

Other articles in this category


Animating a Web Form using ASP.NET AJAX
In this article you will learn how to animate a webform using asp.net ajax.
Jquery Ajax
JQuery makes communicating with the server very, very easy. JQuery uses get(), getJSON(), and post(...
jQuery in Action 2nd edition: Queuing functions for execution
This article is taken from the book jQuery in Action, second edition. This segment shows how you can...
Test120Jan
This is my custom article
jQuery Deferred Objects Promise Callbacks
jQuery Deferred/Promise objects untangle spaghetti-like asynchronous code.

You might also be interested in the following related blog posts


ASP.NET AJAX 1.0 Beta 2 Release read more
Atlas Control Toolkit -> AJAX Control Toolkit Migration Guide read more
Create a custom Extender control with "Atals" Control Toolkit read more
Toolkit code is now 100% public read more
More Atlas Resources (Videos, Articles, WebCasts and Books) read more
Third-party controls and support for Atlas read more
Atlas talks at MIX and my new project read more
Atlas talks at Mix06 read more
ASP.NET Atlas Technology Preview December 2005 release read more
Atlas ScriptManager Control read more
Top
 
 
 

Please login to rate or to leave a comment.

Free Agile Project Management Tool from Telerik
TeamPulse Community Edition helps your team effectively capture requirements, manage project plans, assign and track work, and most importantly, be continually connected with each other.