The Three Faces of ASP.NET AJAXby Jesse Liberty, Dan Hurwitz
The new Microsoft ASP.NET AJAX web development framework (which we'll refer to simply as AJAX throughout the rest of this article) is like a mythological figure with three faces to its personality: one is friendly but rigid, one is playful, and the third is, to most ASP.NET developers, a bit frightening.
That said, there are times that you want to go beyond the controls AJAX provides you, whether server-side or client-side. Server-side, you might want to create a custom-control. Client-side, you might want to create your own AJAX extender to modify the behavior of an AJAX client-side control; that is the second face of AJAX. Microsoft anticipates this, and provides help for creating your own custom AJAX extenders.
Getting Set Up
To work with any of these characters, you'll need to set up AJAX for your development environment. Fortunately, this is now incredibly easy (and safe) to do. First, buy a computer. Second, install Visual Studio 2005. (You can also use Visual Web Developer, a free download, except you will not be able to create your own AJAX control extenders, which is the second face described in this article.)
Third, and finally, download and install the AJAX software. Go to the AJAX site (http://ajax.asp.net/) and complete the following steps:
- Download the ASP.NET 2.0 AJAX Extensions 1.0 installation file. This is a file called ASPAJAXExtSetup.msi. Save it to a convenient folder on your system, then double click on the file in Windows Explorer to start the installation process. Follow the wizard.
- Download the AJAX Control Toolkit and save it to a convenient folder on your machine. This will be a zipped archive file. There are two versions: AjaxControlToolkit.zip and AjaxControlToolkit-NoSource.zip. The first contains the source code for the components it contains, while the second contains no source code. You are a programmer. You should know which one you want.
- Unpack the AJAX Control Toolkit archive folder into a convenient folder on your computer
- Create a new website from the ASP.NET AJAX website template by opening the File menu, clicking New Web Site..., and picking ASP.NET AJAX-Enabled Web Site under "Visual Studio installed templates." (Yes, we know this is a strange way to install software, but we didn't make it up; the people at Microsoft did, and it is their toy.)
- Right-click on the Toolbox, select Add Tab, and name your new tab "AJAX Control Toolkit."
- Right-click inside that tab and select Choose Items....
- When the Choose Toolbox Items dialog appears, click the Browse... button. Navigate to the folder where you unzipped the ASP.NET AJAX Control Toolkit package. You will find a folder named SampleWebSite, and under that another folder named Bin. Inside that folder, select AJAXControlToolkit.dll and click Open. Click OK to close the Choose Toolbox Items dialog.
- You can now use the included sample controls in any of your websites.
If you are using VS2005, and you want to create your own control extenders, complete the following additional steps:
- In the folder where you unzipped the AJAX Control Toolkit archive, you will find a folder called AjaxControlExtender. Inside that folder is a file called AjaxControlExtende.vsi. Double-click that file to install it.
- Choose which templates you want to install (all), then click Next. Then click Yes to allow unsigned content, then Finish and Close.
Friendly Drag-and-Drop AJAX
The friendly face of AJAX is drag and drop, which lets you place client-side controls on your web pages just as ASP.NET lets you do with its server controls. Begin by opening Visual Studio (or VWD) and choosing Create Web Site . From the templates, choose ASP.NET AJAX-Enabled Web Site. Pick your language of choice (Visual Basic for this article) and a location on your hard drive; name your new application DragAndDropAjax, and click OK.
To get started, you'll create a simple application with a text box, into which an administrator may type a user's name and a Delete button (initially disabled). When the administrator enters a name into the text box, the Delete button will be enabled, and when the Delete button is pressed, the username will be deleted from the membership database (we'll fake that last part!).
Visual Studio (or VWD) will set up your environment to support an AJAX-enabled application. This includes adding an object of type ScriptManager to your default.aspx file, as shown in Figure 1.
Figure 1. Script Manager in boilerplate markup (Click to enlarge.)
The job of the Script Manager is to coordinate the action of all the AJAX controls on the page. Now drag and drop the following controls from the toolbox onto the page.
Set the Enabled property of the Button to false.
Source view will look something like Figure 2.
Figure 2. TextBox & Save Button in Design view (Click to enlarge.)