Enhance applications with the ASP.NET AJAX Control Toolkit

The ASP.NET AJAX Control Toolkit provides an overwhelming number of options to spice up the UI, while taking advantage of AJAX programming techniques that already have a positive influence on the UI.

While the ASP.NET AJAX Extensions from Microsoft provides you with basic AJAX support, the ASP.NET AJAX Control Toolkit extends this support by offering more controls and by allowing you to create controls. See how you may use the ASP.NET AJAX Control Toolkit in your applications.

What is the ASP.NET AJAX Control Toolkit?

The toolkit is a shared-source community project consisting of samples and components that make it easier to work with AJAX-enabled controls and extenders. The ASP.NET AJAX Control Toolkit provides both ready-to-run samples and a powerful SDK to simplify creating custom ASP.NET AJAX controls and extenders. It uses ASP.NET AJAX Extensions, which must be installed to utilize the toolkit.

You can download the ASP.NET AJAX Control Toolkit for free via the CodePlex Web site. Versions are available for both .NET 2.0 and 3.5. You may download the full source code or just the binary. The downloads are contained in compressed files, so there is no installation routine. Once the zipped file has been downloaded, you extract the files to a location on the hard drive.

The extracted files include the project templates for using the controls within Visual Studio, a sample Web site, the controls, tests, and more. The dll file (AjaxControlToolkit.dll) for using the controls within an application is located within the bin subdirectory of the AjaxControlToolkit directory.

Using the toolkit

Unlike the ASP.NET AJAX Extensions, the ASP.NET AJAX Control Toolkit does not include an installation program that handles setup tasks, so the features of the toolkit are readily available. You may use features of the toolkit in an ASP.NET application by adding a reference to the dll file that contains the controls to the project: AjaxControlToolkit\bin\debug\AjaxControlToolkit.dll.

If you are using Visual Studio, the toolkit includes templates that you may use when creating projects that utilize the toolkit. The TemplateVSI directory located in the toolkit's installation directory contains a Visual Studio solution called TeamplateVSI. This project is loaded and built in Visual Studio. Once it has been compiled, you can run the AjaxControlExtender.vsi file in the TemplateVSI project's bin directory, which adds the templates so they are choices when creating a new Web application in Visual Studio. The new template is called AJAX Control Toolbox Web Site.

You'll need to add the ASP.NET AJAX Control Toolkit controls to the Visual Studio toolbox, so they are available for use when designing and building a Web application; this is accomplished by adding a new tab to the toolbox. Within the new tab, select Choose Items and select the AjaxControlToolkit.dll file to add the controls to the toolbar. Once added, you can easily drag and drop them to an ASP.NET page being developed in Visual Studio.

The controls

The ASP.NET AJAX Control Toolkit includes an amazing number of controls -- too many, in fact, to list in this article. There are two types of controls. There are new controls that may be used in your Web application. These controls provide new functionality that is not currently available. A few examples of new controls are the Accordion, TabContainer, and TabPanel controls. The TabContainer and TabPanel controls provide a way to easily incorporate tabs into the user interface, and the Accordion control allows you to provide multiple panes and display them one at a time like a group of collapsible sections.

On the other hand, the toolkit provides Extender controls, which add AJAX or client-side behavior to existing ASP.NET controls. These controls are used in conjunction with their ASP.NET counterparts. A few examples of these controls are ConfirmButtonExtender, CalendarExtender, and DragPanelExtender.

Extender controls are tied to specific control types, so you may only use them with these controls. They include a TargetControlID property that is populated with the name of the control with which it will interact.

Once the Extender control is added, it adds a new group of properties to the control with which it is associated. As an example, the ConfirmButtonExtender control is associated with the basic ASP.NET Button control. Once it is added to a page and assigned to a specific Button control, new properties are added to the Button control. These new properties include ConfirmText, which designates the text displayed in the confirm window and a Boolean value signaling whether confirmation occurs when the form is submitted.

The ConfirmButtonExtender control allows you to provide a confirm window with buttons to double-check that the user meant to select a button. In the past, this was accomplished with JavaScript and tying the JavaScript to the ASP.NET Button control. Calendar is an ASP.NET AJAX extender that can be attached to any ASP.NET TextBox control. It provides client-side date-picking functionality with customizable date format and UI in a pop-up control. The DragPanelExtender provides the ability to drag and drop ASP.NET panels within the UI.

Examples of using the Extender controls
The first example uses the ConfirmButtonExtender control with a Button control placed within an ASP.NET AJAX UpdatePanel control. The text displayed in the Label control is changed to the current date and time when the button is selected.

The update of the Label control text occurs via a partial-page reload. The ConfirmButtonExtender is placed within the UpdatePanel alongside the Button control, so a confirmation window appears before the partial-page update occurs.

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

protected void btnTest_Click(object sender, EventArgs e) {

lblDisplay.Text = DateTime.Now.ToString();



<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>ASP.NET AJAX Control Toolkit - ConfirmButtonExtender</title>


<form id="frmConfirmButtonExtender" runat="server">

<ajaxToolkit:ToolkitScriptManager ID="ScriptManager1" runat="server" />


<asp:UpdatePanel ID="UpdatePanel1" runat="server">


<asp:Label ID="lblDisplay" runat="server" /><br />

<asp:Button ID="btnTest" runat="server" OnClick="btnTest_Click" Text="Click Here!" />

<ajaxToolkit:ConfirmButtonExtender ID="ConfirmButtonExtender1" runat="server" ConfirmText="Are you sure?" TargetControlID="btnTest">





You may notice from this example that the AJAX Control Toolkit uses its own ScriptManager control called ToolkitScriptManager; it is a new control derived from ScriptManager. An interesting aspect of the ToolkitScriptManager control is that it performs automatic script combining and compression when multiple JavaScript files related to the AJAX functionality are used on the page. Its full benefits are beyond the scope of this article.

The CalendarExtender is another control tied to existing ASP.NET controls. The CalendarExtender is tied to TextBox controls. The date selected from the Calendar is used to populate the TextBox control. The Calendar control pops up for use when the user clicks inside the TextBox control, or it may be set up to appear when an image is selected (that would be positioned adjacent to the TextBox control).

Tthe following ASP.NET pages use the CalendarExtender control. It is tied to the TextBox named txtDate. The TargetControlID of the CalendarExtender is given the name of the TextBox control. The default behavior is used, so the calendar appears once the TextBox receives focus on the page. The calendar disappears when any area outside of it is selected. It is a simple example, but it adds a great deal to the ease-of-use of the UI.

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

<title>ASP.NET AJAX Control Toolkit - CalendarExtender</title>



<form id="frmCalendarExtender" runat="server">

<ajaxToolkit:ToolkitScriptManager ID="ScriptManager1" runat="server" />


<asp:UpdatePanel ID="UpdatePanel1" runat="server">


<asp:TextBox ID="txtDate" runat="server" /><br />

<ajaxToolkit:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="txtDate">





A powerful option

I love the ASP.NET AJAX Control Toolkit. It provides an overwhelming number of options to spice up the UI, while taking advantage of AJAX programming techniques that already have a positive influence on the UI. Microsoft has fully embraced the AJAX revolution with this toolkit on top of the ASP.NET AJAX Extensions download.

Tony Patton began his professional career as an application developer earning Java, VB, Lotus, and XML certifications to bolster his knowledge.


Get weekly .NET tips in your inbox
TechRepublic's free .NET newsletter, delivered each Wednesday, contains useful tips and coding examples on topics such as Web services, ASP.NET, ADO.NET, and Visual Studio .NET. Automatically subscribe today!