Enhance Your Web Applications with Ease

Utilizing the ASP.NET AJAX Control Toolkit

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

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



Text="Cancel" />

Hide comments

Comments

  • Allowed HTML tags: <em> <strong> <blockquote> <br> <p>

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
Publish