The ASP.NET AJAX Control Toolkit (part 1) - Installing

The UpdatePanel, UpdateProgress, and Timer controls are fairly useful. However, they're the only ASP.NET AJAX-enabled controls you'll find in ASP.NET. Despite their value, developers who have heard the Ajax hype and used advanced Ajax websites like Gmail might expect a bit more.

In fact, ASP.NET's support for Ajax is a bit deceptive. Although there are only three controls that use ASP.NET AJAX features, ASP.NET actually includes a sophisticated library of JavaScript functions that can be used to create all sorts of advanced effects. Business application developers aren't likely to use these libraries (because they're quite complex and require a significant time investment), but third-party component developers will use them enthusiastically.

The first and best example of what ASP.NET AJAX can really do is the ASP.NET AJAX Control Toolkit. The ASP.NET AJAX Control Toolkit is a joint project between Microsoft and the ASP.NET community. It consists of dozens of controls that use the ASP.NET AJAX libraries to create sophisticated effects.

The ASP.NET AJAX Control Toolkit has a lot going for it:

• It's completely free.

• It includes full source code, which is helpful if you're ambitious enough to want to create your own custom controls that use ASP.NET AJAX features.

• It uses extenders that enhance the standard ASP.NET web controls. That way, you don't have to replace all the controls on your web pages—instead, you simply plug in the new bits of functionality that you need.

1. Installing the ASP.NET AJAX Control Toolkit

To get the ASP.NET AJAX Control Toolkit, surf to http://www.asp.net/ajaxlibrary/act.ashx. You can follow the links to the download page, where you'll see several download options, depending on your version of .NET and whether you want the source code. At the time of this writing, the simplest download option is a 6.4 MB ZIP file named AjaxControlToolkit.Binary.NET4.zip, which is designed for ASP.NET 4 and doesn't include the source code. Once you've downloaded this ZIP file, you can extract the files it contains to a more permanent location on your hard drive. (If you need support for ASP.NET 3.5, you'll find a similar download that targets that version of .NET.)

Inside the ZIP file, you'll find a central assembly named AjaxControlToolkit.dll and a host of smaller satellite assemblies that support localization for different cultures. You'll also see a zipped folder named AjaxControlToolkitSampleSite, which contains a huge sample website that demonstrates all the ASP.NET AJAX Control Toolkit ingredients, and a ReadMe.html file with installation instructions.

To get started developing with ASP.NET AJAX Control Toolkit, you could simply open the AjaxControlToolkitSampleSite (or copy the contents of its Bin subfolder to the Bin subfolder in one of your web applications). However, life is much easier if you get Visual Studio to help you out by adding the new components to the Toolbox. Here's how:

1. Make sure the SampleWebSite folder is in a reasonably permanent location on your hard drive. If you move the SampleWebSite folder after you complete this process, Visual Studio won't be able to find the AjaxControlToolkit.dll assembly. As a result, it won't be able to add the necessary assembly reference when you drag the controls onto a web page. (The only way to fix this problem is to remove the controls from the Toolbox and then repeat the process to add them from their new location.)

2. First, you need to create a new Toolbox tab for the controls. Right-click the Toolbox and choose Add Tab. Then, enter a name (like AJAX Toolkit) and hit Enter.

3. Now, you need to add the controls to the new tab. Right-click the blank tab you've created and select Choose Items.

4. In the Choose Toolbox Items dialog box, click Browse. Find the AjaxControlToolkit.dll (which is in the SampleWebSite\Bin folder) and click OK.

5. Now, all the components from AjaxControlToolkit.dll will appear in the list, selected and with check marks next to each one. To add all the controls to the Toolbox in one step, just click OK.

Figure 1 shows some of the controls that will appear in the new Toolbox tab.

Figure 1. Adding the ASP.NET AJAX Control Toolkit to the Toolbox

Now you can use the components from the ASP.NET AJAX Control Toolkit in any web page in any website. First, begin by adding the ScriptManager control to the web page. Then, head to the new Toolbox tab you created and drag the ASP.NET AJAX control you want onto your page. The first time you do add a component from the ASP.NET AJAX Control Toolkit, Visual Studio will copy the AjaxControlToolkit.dll assembly to the Bin folder of your web application, along with the localization assemblies. It will also add a Register directive that maps the controls in AjaxControlToolkit.dll to the namespace prefix asp so they're available in your code:

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"
    TagPrefix="asp" %>

The ASP.NET AJAX Control Toolkit is stuffed full of useful components. In the following sections, you'll get your feet wet by considering just two of the controls you'll find—the Accordion and the AutoCompleteExtender.