WindowsDevCenter.com
oreilly.comSafari Books Online.Conferences.

advertisement


AddThis Social Bookmark Button

The Three Faces of ASP.NET AJAX

by Jesse Liberty, Dan Hurwitz
02/27/2007

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.

Face number one is the friendly ASP.NET-like face of AJAX that lets you drag and drop AJAX controls onto your forms just as you would standard ASP.NET server controls, but gives you client-side, wiz-bang performance without having to understand a thing about JavaScript, the Document Object Model, DHTML, or Asynchronous communication with the host. Cool, eh?  I love that face of AJAX, and I deeply resent that this wonderful, lovely, beautiful ASP.NET-like face is often the last one shown to ASP.NET programmers, which I why I wrote a rant on the subject last summer.

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.

Finally, sometimes (and far less often than some would have you believe) you may be forced to set aside all maps and guidebooks and bravely go where none have gone before. If you are a JavaScript and DHTML programmer, this is a piece of cake. It's what you do every day, and you'll laugh (laugh, I say!) at how trivial it is.

If, like us, however, you've studiously avoided writing JavaScript (ugly, untyped, nasty little language that looks like C but will bite you the first chance it gets), then you'll want to draw a careful pentangle on the floor, light the candles in just the right order, say the ancient incantations in Aramaic, and follow along closely as we reveal the third (rather horrifying) face of AJAX: the underlying gibberish that makes it all work.

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:

  1. 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.
  2. 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.
  3. Unpack the AJAX Control Toolkit archive folder into a convenient folder on your computer
  4. 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.)
  5. Right-click on the Toolbox, select Add Tab, and name your new tab "AJAX Control Toolkit."
  6. Right-click inside that tab and select Choose Items....
  7. 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.
  8. 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:

  1. 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.
  2. 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!).

Script Manager

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.

Script Manager
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.

Control ID Text
Label Label1 Name:
TextBox Name  
Button Delete Delete

Set the Enabled property of the Button to false.

If this were a real production app, it would be much better to validate that the name entered corresponds to a real user on the system who is eligible for deletion. However, to keep the example simple (and because we are incredibly lazy), we will leave that as an exercise for the reader.

Source view will look something like Figure 2.

TextBox & Save in Design view
Figure 2. TextBox & Save Button in Design view (Click to enlarge.)

Pages: 1, 2, 3, 4, 5, 6

Next Pagearrow