Enhance Your Web Applications with Ease

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 frameworkused to create interactive web applications or rich Internet applications. TheAJAX Control Toolkit is only one of many tools that the ASP.NET AJAX frameworkhas to offer; some of the other tools available under this framework areServer-Side ASP.NET AJAX, Client-Side ASP.NET AJAX, and the jQuery library. Forthis article, I'll explore the AJAX Control Toolkit (the May 2009 release), apowerful and simple tool to get you started building applications with AJAXcomponents.

What's New

Let's start by describing the new controls that were added inthis release:

        The HTMLEditor control allows you to create andedit HTML content. You can edit in design mode, as a rich text editor, or insource view to edit the HTML markup directly.

        The ComboBox control provides a drop-down listof items, combined with TextBox. Different modes determine the interplay betweenthe text entry and the list of items.

The ColorPicker Control Extender can be attached toany ASP.NET TextBox control. It provides client-side color-pickingfunctionality 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=AjaxControlToolkitand click the Downloads link. After you download the .zip, place the contentsin a generic location so you can use it in all your projects if you want to. Inmy development computer, I moved these files toC:WINDOWSMicrosoft.NETFrameworkAjaxToolKit.

Adding the Toolkit to Visual Studio's Toolbox

To add the AJAX Control Toolkit to your Visual StudioToolbox, follow these steps:

1.     OpenVisual Studio 2008 and create a web application project.

2.     Right-clickthe toolbox and select Add Tab from the menu.

3.     Labelthe newly created tab (e.g., AJAX Control Toolkit 30512).

4.     Right-clickthe new tab and select Choose Items in the Choose Toolbox Items window. ClickBrowse and browse to where you saved the contents of the AJAX Control Toolkitfolder, then select the AjaxControlToolkit.dll file. In my case, this isC:WINDOWSMicrosoft.NETFrameworkAjaxToolKitAjaxControlToolkit.dll.

After you install the AJAX Control Toolkit, you'llbe able to see the new controls and 30 other controls in Visual Studio 2008, asshown 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 Usform to demonstrate how to use some of the controls and functionality of theAJAX Control Toolkit in a simple yet useful way. First, create a new webapplication with Visual Studio 2008 SP1, .NET Framework 3.5. You also need to adda reference to the AjaxControlToolkit.dll file.

On the Default.aspx page, add a ScriptManagercontrol after the opening tag for the form element. This control is necessaryto be able to use any of the AJAX controls from the toolkit. You can find thiscontrol under the AJAX Extensions tab in the Toolbox.

Once you've added the ScriptManager to yourDefault.aspx page, you'll notice the following line of code at the top of thispage:

<%@ Register Assembly="AjaxControlToolkit"

Namespace="AjaxControlToolkit"TagPrefix="cc1" %>

You can avoid having this registration for the AJAXControl Toolkit in each page by adding the following line of code to yourweb.config file, between the control tags:

assembly="AjaxControlToolkit"/>

This makes it easy for you as a developer in caseyou want to change the tag prefix or anything else, you'll need to do it inonly one place versus all pages where you use the ASP.NET AJAX controls.

Next, add the controls for your Contact Us form tothis page (in my example, I used various controls, both standard controls andcontrols from the AJAX Control Toolkit). To add a new AJAX control to yourpage, just drag and drop a control to your page inside the form tags, then configureit to your needs using either the source (html) or design view.

In this example, I added a standard TextBoxcontrol, then AJAX Control Extenders, such as a TextBoxWatermarkExtender,ValidatorCalloutExtender, and a RequiredFieldValidator. Figure 2 shows theresult.

The TextBoxWatermarkExtender lets you add a textwatermark 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 goesaway instantly, allowing the user to start typing without having to select theexisting text and then start typing.

The ValidatorCalloutExtender enhances thefunctionality of existing ASP.NET validators. It displays the validator's errormessage in a customizable callout window using AJAX; this enhances the userexperience and allows you to make validation error messages more visible tousers. Figure 3 shows an example of the TextBoxWatermarkExtender andValidatorCalloutExtender.

Figure 3: Form displaying a text watermark and validation error message

All the other fields in this form are set up as theFirstName TextBox except the state drop-down list. For this control, I used thenew ComboBox control from the ASP.NET AJAX Control Toolkit. I like this newcontrol a lot; it functions as a standard DropDownList control in which you cantype directly, as you can do in a TextBox to filter its contents, making ituseful when you need to find a specific item from a long list of items. It alsohas ComboBox-specific properties and events.

The ComboBox can bind to various data sourcecontrols, such as SqlDataSource and the ObjectDataSource, and to runtimeobjects that implement IDataSource, IEnumerable, and IListSource. The ComboBoxalso has an item collection that can be manipulated declaratively andprogrammatically.

For this example, I used the control and code shownin Figure 4 to display a list of states. This code is all you need to have afully functional, drop-down list that's searchable (i.e., you can type directlyinto it as in a TextBox).

Finally, I added two other controls from the AJAXControl Toolkit: the ConfirmButtonExtender and the ModalPopupExtender. Thesetwo controls enhance the user experience greatly. Briefly, here's what the twocontrols do:

        The ConfirmButtonExtender is an extender thatcatches clicks on a button and displays a message to the user with the optionsto select OK or Cancel. If the user clicks OK after viewing the message, thebutton functions normally. If the user clicks Cancel, the button will notperform its default submit behavior.

        The ModalPopupExtender control allows a page todisplay its content in a modal manner, preventing users from interacting withthe rest of the page. This is a great solution when you don't want users tochange submitted information while it's being processed. It also prevents usersfrom clicking the Submit button more than once.

Figure 5 shows the code I used to implement both ofthese controls in my sample Contact Us form. Figure 6 shows an example of thecontrols in action.

Figure 6: ConfirmationButtonExtender and ModalPopupExtender in action

Try Out the Toolkit Yourself

The ASP.NET AJAX Control Toolkit is a great set ofcontrols, ready for use in your web applications. Just as with any other toolsor controls, test everything and make sure the controls behave exactly the wayyou want them to before using them in a production environment. Also, note thatthe May 2009 release of the AJAX Control Toolkit must be built on top of .NETFramework 3.5 using Visual Studio 2008.

The source code for the ASP.NET AJAX ControlToolkit 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 thesecontrols to almost any page in your web application project to enhance the userexperience and add functionality, all without spending a lot of time. Finally,if you're interested in creating your own custom extenders, there's a greattutorial available at www.asp.net/learn/Ajax-Control-Toolkit/tutorial-49-cs.aspx.

Ricardo D. Sanchez ([email protected]) has been asoftware 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 developingweb applications.

Source codeaccompanying 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 isrequired." />

TargetControlID="FNReq"

HighlightCssClass="validatorCalloutHighlight"

Width="230px" />

Figure 4:Using the ComboBox control to display a list of states

State:

AutoCompleteMode="SuggestAppend">

Select State...

Atlanta

California

Colorado

Texas

New York

Washington

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 yousure you want to click the Button?

Text="Cancel" />