Software Development

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();

}

</script>

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

<head runat="server">

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

</head><body>

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

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

<div>

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

<ContentTemplate>

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

</ajaxToolkit:ConfirmButtonExtender>

</ContentTemplate>

</asp:UpdatePanel>

</div></form></body></html>

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>

</head>

<body>

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

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

<div>

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

<ContentTemplate>

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

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

</ajaxToolkit:CalendarExtender>

</ContentTemplate>

</asp:UpdatePanel>

</div></form></body></html>

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!

About

Tony Patton has worn many hats over his 15+ years in the IT industry while witnessing many technologies come and go. He currently focuses on .NET and Web Development while trying to grasp the many facets of supporting such technologies in a productio...

10 comments
vianney.roman
vianney.roman

Big problem with AJAX, i made a site with ASP. NET AJAX Control Toolkit, for selecting a range of dates y put a textbox with popupcontrolextender and control of asp .net calendar, the calendar is hidden until u click the textbox but when it shows the candelar,its background appears transparent, that happens in every client side computer, but not in mine. Do you have any idea for resolving this problem???? please i need help

nickpixel
nickpixel

Based on a quick glance, it doesn't appear this toolkit supports progressive enhancement or unobtrusive javascript (just like every other server-side AJAX "toolkit" I've seen). For that reason, I doubt it will ever be useful to me.

navot.peled
navot.peled

I would like to point out an enhancment which is an ASP.NET extension yet presenting a pardigm shift.One should be aware that I am not, and do not pretend to be objective, never the less I believe that one can judge for himself. Visual WebGui is an open source rapid application development framework for graphic user interfaces of IT web applications. VWG replaces the obsolete paradigms of ASP.NET in both design-time and run-time which were designed for developing sites, with WinForms methodologies, which were designed for developing applications. Thus enabling designer that was designed for application interfaces (WinForms designer) instead of a word documents (ASP.NET designer). This provides the developer with an extremely efficient way to design interfaces using drag and drop instead of hand coding HTML Worth a look at www.visualwebgui.com

Justin James
Justin James

... but the "known bugs" list is a bit longer than I usually like in something I am going to use for professional purposes, sadly. :( J.Ja

Justin James
Justin James

... when someone would finally get around to doing that. It's about time. Page view model is completely obsolete as far as an application is concerned. J.Ja

ricardodsanchez
ricardodsanchez

I have used this toolkit for several production applications, it allows you to extend it very easily and the existing bugs...what did you expect? it is our job to find them and fix them, this is just a toolkit, you still need to do some work. It always amazes me how much developers complain about new products and yet they are probably using them they just don't want to admit it. C'mon, use it...don't worry be happy....

tv_p
tv_p

Are there any hidden strings attached with AjaxToolKit use? Can It be used in commercial applications?

Justin James
Justin James

I have not read the license agreement. The toolkit itself is a CodePlex item, which would indicate that it follows an open source license of some variety (definitely not the GPL though), although quite possibly not an OSI approve license. For me, the license is not relevant; the bug count and severity still seems a touch high to use in something professional/for pay, and my enthusiast/hobby Web work is done on a FreeBSD server, rendering it a moot point for me. :) J.Ja

purring-kat
purring-kat

Yes, there are LOTS of hidden strings and bugs.

StillOwens
StillOwens

It's available free to use. http://www.asp.net/ajax/ Can also tweak the components that they provide to fix any bugs that you run across, such as the AlwaysVisibleControl and IE7 type of thing.

Editor's Picks