|
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\.
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.
-
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 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.
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 2008, 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 Developer 2008
If it's not still running, launch VWD 2008 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 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.
-
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".
-
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.
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 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 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.
-
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.
-
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
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=3.5.0.0, 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 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.
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!
Conclusion
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.
|
