If you have been wanting to get started with AJAX, but have not 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.
Getting Started with AJAX Toolkit
Since we are talking about using the ASP.NET AJAX Control Toolkit, it sort of makes sense that we will first need basic AJAX functionality. Luckily this is not too hard. ASP.NET includes AJAX functionality, so if you have already got ASP.NET installed, you are all set. You do not need to download or install anything in this step.
If you do not have ASP.NET, you have got two options: upgrade to the latest version of ASP.NET (either via
Windows Update or manually) or download and install ASP.NET AJAX Extensions.
Personally, I recommend just upgrading to the latest version of ASP.NET, but the choice is yours.
For the rest of this article, we will be using the latest version of ASP.NET and Visual Web Developer. If your setup is different, then things may vary slightly.
Getting the ASP.NET AJAX Control Toolkit
Now that you have got the basic AJAX functionality in place, it is 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. If you are sure you won’t be building your own controls and do not want to download the sources, there is also a version that 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\.
Create a Sample Web Site
Before we get started, you will most likely want to play around with the sample website 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. If you want to see the code behind the samples, you will want to set up a local copy. To do this, simply follow these simple steps.
- Run Visual Web Developer 2008
- 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”
- Copy the Contents of the “SampleWebSite” Folder to the New SiteI 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 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
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.
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, you can use use the “View in Browser” button on the “Standard” toolbar or from the “File” menu.
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.
- Run Visual Web DeveloperIf it’s not still running, launch VWD again.
- 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”.
- Create a New Web FormVisual Web Developer 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.
- Add a New Tab Called “AJAX Toolkit” to the ToolboxRight-click in the “Toolbox” window and select the “Add Tab” option from the context menu. Name the new tab “AJAX Toolkit”.
- Add Controls to the New TabRight-click in the new “AJAX Toolkit” tab we just created and select the “Choose Items…” option from the context menu.
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.
- That’s It!When your done, your new “AJAX Toolkit” tab should look something like this.
Using the Sample AJAX 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
- Open a Web FormSince 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.
- Switch to Design ModeYou 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.
- Drag the Controls to the FormFor 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:
I cleaned things up a bit, added some text, and named some of the controls, but that’s optional and totally up to you.
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=184.108.40.206, 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" "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 Test Page</title> </head> <body> <form id="myForm" runat="server"> <div> <asp:ScriptManager ID="myScriptManager" runat="server" /> Date: <asp:TextBox ID="txtDate" runat="server" /> <ajaxToolkit:CalendarExtender ID="txtDate_CalendarExtender" runat="server" TargetControlID="txtDate" /> </div> </form> </body> </html>
- View the Demo in a BrowserReally! 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.
That’s it. While it’s true that fine-tuning the controls to get them to 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.