Getting Started with the ASP.NET AJAX Control Toolkit


Desktop-as-a-Service Designed for Any Cloud ? Nutanix Frame

By John Peterson

If you've been wanting to get started with AJAX, but haven't known where to start, this is your lucky day. The ASP.NET AJAX Control Toolkit is designed to provide a rich infrastructure for you to write your own ASP.NET AJAX extenders and controls, but it also provides a number of exceptional controls that can be used right out of the box by developers without any previous AJAX experience.

What is the ASP.NET AJAX Control Toolkit?

I always like to go directly to the source for the answer to this type of question. According to Microsoft:

The ASP.NET AJAX Control Toolkit is a shared source project built on top of the Microsoft ASP.NET AJAX framework. It is a joint effort between Microsoft and the ASP.NET AJAX community that provides a powerful infrastructure to write reusable, customizable and extensible ASP.NET AJAX extenders and controls, as well as a rich array of controls that can be used out of the box to create an interactive Web experience.

So even if you have no intention of ever writing any controls of your own, the toolkit is worth downloading just to get access to the over thirty controls that you can start using immediately.

First... Make Sure You Have AJAX

Since we're talking about using the ASP.NET AJAX Control Toolkit, it sort of makes sense that we'll first need basic AJAX functionality. Luckily this isn't too hard. ASP.NET 3.5 includes AJAX functionality so if you've already got ASP.NET 3.5 installed, you're all set. You don't need to download or install anything in this step.

If you don't have ASP.NET 3.5, you've got two options: upgrade to ASP.NET 3.5 (either via Windows Update or manually) or download and install ASP.NET AJAX Extensions 1.0. Personally I recommend just upgrading to ASP.NET 3.5, but the choice is yours.

For the rest of this article, I'll be using ASP.NET 3.5 and Visual Web Developer 2008 (VWD 2008). If your setup is different, then things may vary slightly.

Getting the ASP.NET AJAX Control Toolkit

Now that you've got the basic AJAX functionality in place, it's time to get the ASP.NET AJAX Control Toolkit. The toolkit is available as a free download from the AJAX Control Toolkit Project Page on CodePlex. Download the version which matches your setup. Since I'm using ASP.NET 3.5 and VWD 2008, I downloaded "AjaxControlToolkit-Framework3.5.zip" If you're sure you won't be building your own controls and don't want to download the sources, there's also a version which does not include the source code for the controls.

There is no setup program. The file you downloaded is just a zip file. Simply unzip it and save the contents wherever you want. I saved it in C:\Program Files\Microsoft ASP.NET AJAX Control Toolkit\.

ASP.NET AJAX Control Toolkit Files
ASP.NET AJAX Control Toolkit Files

Sample Web Site

Before we get started, you'll most likely want to play around with the sample web site that is included with the toolkit. It offers a perfect way to get an idea of what the different controls included in the toolkit do and how they work. There's a live version is hosted at http://www.asp.net/ajax/ajaxcontroltoolkit/samples/, but if you want to see the code behind the samples, you'll want to set up a local copy. To do this, simply follow these simple steps.

  1. Run Visual Web Developer 2008

  2. Create a New "Empty Web Site"

    I run IIS on my machine so I created the Web site underneath "http://localhost/" and called it "AJAXControlToolkitSample"

    New "Empty Web Site" named "AJAXControlToolkitSample"
    New "Empty Web Site" named "AJAXControlToolkitSample"

  3. Copy the Contents of the "SampleWebSite" Folder to the New Site

    I find it easiest to navigate to the source location (which would be "C:\Program Files\Microsoft ASP.NET AJAX Control Toolkit\SampleWebSite" if you've been following along) using Windows Explorer. Once there simply do a "Ctrl+A" to "Select All" the files, do a "Ctrl+C" to "Copy" them, go back to your VWD 2008 Web site, and do a "Ctrl+V" to "Paste" them into "Solution Explorer" window.

    Copy the Contents of the "SampleWebSite" Folder to the New Site
    Copy the Contents of the "SampleWebSite" Folder to the New Site

    You can also drag and drop the files or use the menus to copy and paste them if you prefer. Alternatively, you can also simply copy the files to the appropriate location via Windows Explorer directly and then just click the "Refresh" button in VWD's "Solution Explorer" window.

    Whatever method you use, your Web site should look something like this after you've copied in the files.

    Contents of the New Site After the Copy
    Contents of the New Site After the Copy

  4. View the Sample Site in a Browser

    Now all that's left to do is view the sample site in your browser of choice. From VWD 2008, you can use use the "View in Browser" button on the "Standard" toolbar or from the "File" menu.

    Viewing the ASP.NET AJAX Control Toolkit Sample Site in a Browser
    Viewing the ASP.NET AJAX Control Toolkit Sample Site in a Browser

Spend some time playing with the different controls to find out how they work and which ones might be useful in your own development projects. Once you've done that you'll want to take a look at the code behind some of them. Thankfully the team that put the sample site together was very well organized and named everything pretty well. Things in the sample folders are pretty easy to find.

So now that you've had a look around and are comfortable with how the controls work, lets see how you can take the sample controls and use them in your own site.

Adding the Toolbox Tab to Visual Web Developer 2008

To make things easier for you when you're developing with the ASP.NET AJAX Control Toolkit, you'll probably want to add a tab for the controls to the "Toolbox" and add the controls to the tab.

  1. Run Visual Web Developer 2008

    If it's not still running, launch VWD 2008 again.

  2. Create a New "Empty Web Site"

    Just like last time around, I'm creating a new web site from scratch to use as my demo site. I'm once again going to be hosting it underneath "http://localhost/". I'm going to call this site "ToolkitTest".

  3. Create a New Web Form

    Visual Web Developer 2008 only shows you tools that apply to the type of document on which you're currently working. So you can see toolbox tab we'll be working with, it's best to create a new Web Form ("default.aspx" is fine) and open it.

  4. Add a New Tab Called "AJAX Toolkit" to the Toolbox

    Right-click in the "Toolbox" window and select the "Add Tab" option from the context menu. Name the new tab "AJAX Toolkit".

  5. Add Controls to the New Tab

    Right-click in the new "AJAX Toolkit" tab we just created and select the "Choose Items..." option from the context menu.

    Add Controls to the "AJAX Toolkit" Tab
    Add Controls to the "AJAX Toolkit" Tab

    This will launch the "Choose Toolbox Items" dialog box. Click the "Browse" button at the right side of the window and browse to the "AjaxControlToolkit.dll" in the "/Bin" folder of the sample Web site where you unzipped the toolkit. If you've been naming things the same as I have, it'll be here:
    C:\Program Files\Microsoft ASP.NET AJAX Control Toolkit\SampleWebSite\Bin\AjaxControlToolkit.dll.

    Once you select the DLL and click the "Open" button, you'll be back in the "Choose Toolbox Items" dialog box. All the controls will already be selected so you don't need to do anything more. Simply click the "OK" button to add the ASP.NET AJAX Control Toolkit controls to the new tab.

  6. That's It!

    When your done, your new "AJAX Toolkit" tab should look something like this.

    The "AJAX Toolkit" Tab After Controls Have Been Added
    The "AJAX Toolkit" Tab After Controls Have Been Added

Using the Sample Controls

Now that you've set up your development environment, I'm going to walk you through building a very simple Web page that uses one of the controls

  1. Open a Web Form

    Since I already created it in the last section, I'm going to use "default.aspx" for my demo. Feel free to use it or create a new file. You'll most likely want to create a few different files as you play with the different controls.

  2. Switch to Design Mode

    You can naturally do things in Source mode if you'd like, but doing things in Design mode handles a lot of the little details for you.

  3. Drag the Controls to the Form

    For this demo, we'll need to drag three controls from the toolbox onto the form. The first is the "ScriptManager" control from the "AJAX Extensions" tab. The second is a plain "TextBox" control from the "Standard" tab. The last is the "CalendarExtender" control from the "AJAX Toolkit" tab we added in the last section. You want to drop the "CalendarExtender" control right onto the "TextBox" control since that's the control it will extend. When you're done it'll look something like this

    Demo Page Design View
    Demo Page Design View

    I cleaned things up a bit, added some text, and named some of the controls, but that's optional and totally up to you.

  4. Take a Look at the Code (If You Want)

    Here's the "neatened up for publication" version of the code that Visual Web Developer generated for us.

    <%@ Page Language="VB" %>
    <%@ Register assembly="System.Web.Extensions, Version=, Culture=neutral, PublicKeyToken=31bf3856ad364e35" namespace="System.Web.UI" tagprefix="asp" %>
    <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="ajaxToolkit" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>ASP.NET AJAX Control Toolkit Test Page</title>
    <form id="myForm" runat="server">

        <asp:ScriptManager ID="myScriptManager" runat="server" />

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

        <ajaxToolkit:CalendarExtender ID="txtDate_CalendarExtender" runat="server"


  5. View the Demo in a Browser

    Really! Just dragging and dropping those controls onto the form should get the basics working for you. The demo you just created lets a user enter a date into the textbox using a pop-up calendar instead of having to type it in by hand.

    Demo Page at Run Time in a Browser
    Demo Page at Run Time in a Browser

That's it. While it's true that fine tuning the controls to get them work exactly as you want may take some time, we did get an awful lot of really cool functionality without very much effort and without writing a line of code. And that's just one of the simple controls.

I'll leave it to you to play with the others!


That's all there is to it folks. Granted the ASP.NET AJAX Control Toolkit provides a lot more power and usefulness to developers who will be using it to create their own ASP.NET AJAX extenders and controls, but because of the many useful samples it includes, there's value to be had even if you've never touched AJAX before.


  • There are no comments yet. Be the first to comment!

  • You must have javascript enabled in order to post comments.

Leave a Comment
  • Your email address will not be published. All fields are required.

Most Popular Programming Stories

More for Developers

RSS Feeds

Thanks for your registration, follow us on our social networks to keep up-to-date