aspFeature
Enhance Your Web Applications with Ease
Utilizing the ASP.NET AJAX Control Toolkit
By Ricardo D. Sanchez
ASP.NET AJAX is Microsoft's free AJAX framework used to create interactive web applications or rich Internet applications. The AJAX Control Toolkit is only one of many tools that the ASP.NET AJAX framework has to offer; some of the other tools available under this framework are Server-Side ASP.NET AJAX, Client-Side ASP.NET AJAX, and the jQuery library. For this article, I'll explore the AJAX Control Toolkit (the May 2009 release), a powerful and simple tool to get you started building applications with AJAX components.
What's New
Let's start by describing the new controls that were added in this release:
The HTMLEditor control allows you to create and edit HTML content. You can edit in design mode, as a rich text editor, or in source view to edit the HTML markup directly.
The ComboBox control provides a drop-down list of items, combined with TextBox. Different modes determine the interplay between the text entry and the list of items.
The ColorPicker Control Extender can be attached to any ASP.NET TextBox control. It provides client-side color-picking functionality with a UI in a pop-up control.
Getting the ASP.NET AJAX Control Toolkit
To download the ASP.NET AJAX Control Toolkit, go to www.codeplex.com/Wiki/View.aspx?ProjectName=AjaxControlToolkit and click the Downloads link. After you download the .zip, place the contents in a generic location so you can use it in all your projects if you want to. In my development computer, I moved these files to C:\WINDOWS\Microsoft.NET\Framework\AjaxToolKit\.
Adding the Toolkit to Visual Studio's Toolbox
To add the AJAX Control Toolkit to your Visual Studio Toolbox, follow these steps:
1. Open Visual Studio 2008 and create a web application project.
2. Right-click the toolbox and select Add Tab from the menu.
3. Label the newly created tab (e.g., AJAX Control Toolkit 30512).
4. Right-click
the new tab and select Choose Items in the Choose Toolbox Items window. Click
Browse and browse to where you saved the contents of the AJAX Control Toolkit
folder, then select the AjaxControlToolkit.dll file. In my case, this is
C:\WINDOWS\Microsoft.NET\Framework\AjaxToolKit\AjaxControlToolkit.dll.
After you install the AJAX Control Toolkit, you'll be able to see the new controls and 30 other controls in Visual Studio 2008, as shown in Figure 1.
Figure 1: Toolbox with new ASP.NET AJAX Control Toolkit
Creating a Contact Us Form
For this article, I've chosen to create a Contact Us form to demonstrate how to use some of the controls and functionality of the AJAX Control Toolkit in a simple yet useful way. First, create a new web application with Visual Studio 2008 SP1, .NET Framework 3.5. You also need to add a reference to the AjaxControlToolkit.dll file.
On the Default.aspx page, add a ScriptManager control after the opening tag for the form element. This control is necessary to be able to use any of the AJAX controls from the toolkit. You can find this control under the AJAX Extensions tab in the Toolbox.
Once you've added the ScriptManager to your Default.aspx page, you'll notice the following line of code at the top of this page:
<%@ Register Assembly="AjaxControlToolkit"
Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
You can avoid having this registration for the AJAX Control Toolkit in each page by adding the following line of code to your web.config file, between the control tags:
assembly="AjaxControlToolkit"
/> This makes it easy for you as a developer in case
you want to change the tag prefix or anything else, you'll need to do it in
only one place versus all pages where you use the ASP.NET AJAX controls. Next, add the controls for your Contact Us form to
this page (in my example, I used various controls, both standard controls and
controls from the AJAX Control Toolkit). To add a new AJAX control to your
page, just drag and drop a control to your page inside the form tags, then configure
it to your needs using either the source (html) or design view. In this example, I added a standard TextBox
control, then AJAX Control Extenders, such as a TextBoxWatermarkExtender,
ValidatorCalloutExtender, and a RequiredFieldValidator. Figure 2 shows the
result. The TextBoxWatermarkExtender lets you add a text
watermark to your TextBox controls to show the user what to type in that field.
As soon as a user clicks that field to start typing a value, the watermark goes
away instantly, allowing the user to start typing without having to select the
existing text and then start typing. The ValidatorCalloutExtender enhances the
functionality of existing ASP.NET validators. It displays the validator's error
message in a customizable callout window using AJAX; this enhances the user
experience and allows you to make validation error messages more visible to
users. Figure 3 shows an example of the TextBoxWatermarkExtender and
ValidatorCalloutExtender. Figure 3: Form displaying a text watermark and validation error message All the other fields in this form are set up as the
FirstName TextBox except the state drop-down list. For this control, I used the
new ComboBox control from the ASP.NET AJAX Control Toolkit. I like this new
control a lot; it functions as a standard DropDownList control in which you can
type directly, as you can do in a TextBox to filter its contents, making it
useful when you need to find a specific item from a long list of items. It also
has ComboBox-specific properties and events. The ComboBox can bind to various data source
controls, such as SqlDataSource and the ObjectDataSource, and to runtime
objects that implement IDataSource, IEnumerable, and IListSource. The ComboBox
also has an item collection that can be manipulated declaratively and
programmatically. For this example, I used the control and code shown
in Figure 4 to display a list of states. This code is all you need to have a
fully functional, drop-down list that's searchable (i.e., you can type directly
into it as in a TextBox). Finally, I added two other controls from the AJAX
Control Toolkit: the ConfirmButtonExtender and the ModalPopupExtender. These
two controls enhance the user experience greatly. Briefly, here's what the two
controls do:
The ConfirmButtonExtender is an extender that
catches clicks on a button and displays a message to the user with the options
to select OK or Cancel. If the user clicks OK after viewing the message, the
button functions normally. If the user clicks Cancel, the button will not
perform its default submit behavior.
The ModalPopupExtender control allows a page to
display its content in a modal manner, preventing users from interacting with
the rest of the page. This is a great solution when you don't want users to
change submitted information while it's being processed. It also prevents users
from clicking the Submit button more than once. Figure 5 shows the code I used to implement both of
these controls in my sample Contact Us form. Figure 6 shows an example of the
controls in action. Figure 6: ConfirmationButtonExtender and ModalPopupExtender in action Try Out the Toolkit Yourself The ASP.NET AJAX Control Toolkit is a great set of
controls, ready for use in your web applications. Just as with any other tools
or controls, test everything and make sure the controls behave exactly the way
you want them to before using them in a production environment. Also, note that
the May 2009 release of the AJAX Control Toolkit must be built on top of .NET
Framework 3.5 using Visual Studio 2008. The source code for the ASP.NET AJAX Control
Toolkit is also available in the same CodePlex site at www.codeplex.com/Wiki/View.aspx?ProjectName=AjaxControlToolkit.
The example I've shown you is just the tip of the iceberg you can add these
controls to almost any page in your web application project to enhance the user
experience and add functionality, all without spending a lot of time. Finally,
if you're interested in creating your own custom extenders, there's a great
tutorial available at www.asp.net/learn/Ajax-Control-Toolkit/tutorial-49-cs.aspx. Ricardo D. Sanchez ([email protected]) has been a
software developer for more than 10 years and is a partner of GDL Technologies
(www.gdltec.net),
an Austin, Texas, software development firm focused on designing and developing
web applications. Source code
accompanying this article is available for download.
Figure 2:
Adding controls for the Contact Us form TargetControlID="txtFirstName"
WatermarkText="First Name..." />
ControlToValidate="txtFirstName"
Display="None"
ErrorMessage="Required Field Missing A first name is
required." /> TargetControlID="FNReq"
HighlightCssClass="validatorCalloutHighlight"
Width="230px" /> Figure 4:
Using the ComboBox control to display a list of states State:
AutoCompleteMode="SuggestAppend">
Figure 5:
Using the ConfirmButtonExtender and ModalPopupExtender controls
TargetControlID="btnSubmit"
DisplayModalPopupID="ModalPopupExtender1" />
TargetControlID="btnSubmit"
PopupControlID="PNL"
OkControlID="ButtonOk"
CancelControlID="ButtonCancel"
BackgroundCssClass="modalBackground" />
style="display:none; width:200px;
background-color:White;
border-width:2px;
border-color:Black;
border-style:solid;
padding:20px;"> Are you
sure you want to click the Button?
Text="Cancel" /> 
