SolutionBase: Getting started with ASP.NET AJAX
Takeaway: Although there are a number of other free AJAX frameworks and toolkits available, Microsoft ASP.NET AJAX differs by its total integration into the ASP.NET environment. Justin James guides you through installation and configuration of ASP.NET AJAX.
Microsoft ASP.NET AJAX -- originally codenamed "Atlas" -- is Microsoft's entry into the AJAX space. While there are a number of other free AJAX frameworks and toolkits available, ASP.NET AJAX differs by its full and total integration into the ASP.NET environment, the Visual Studio IDE, and its blend of server side and client side code working hand-in-hand. In this article, we'll take an in-depth look at ASP.NET AJAX.
Installation and configuration
To get started, you'll need to download the ASP.NET AJAX extensions to ASP.NET at a bare minimum. You'll also probably want to install the ASP.NET AJAX Control Toolkit, which contains a large number of community supported and created (through CodePlex) ASP.NET AJAX controls.
Installing the ASP.NET AJAX system is only a matter of running a standard installer. The Control Toolkit is a slightly more complicated installation.
First, you need to add a tab to your Visual Studio Toolbox, by right-clicking the Toolbox and choosing Add Tab. Then, you need to add the components to the new tab. Do this by right-clicking the new tab, choosing "Choose Items ..." from the context menu, and browsing to the file AjaxControlToolkit.dll in the SampleWebSite\bin directory in the unzipped Toolkit file.
Once the Toolbox tab is configured, run AjaxControlExtender.vsi (found in the AjaxControlExtender directory of the unzipped file). This will install the various templates and other integrations with Visual Studio. More in-depth installation instructions are on the ASP.NET Control Toolkit Web site.
Once all of this has been completed, Visual Studio is now configured to use ASP.NET AJAX. When you start a new Web project, you'll see two new options: ASP.NET AJAX-Enabled Web Site and AJAX Control Toolkit Web Site, as seen in Figure A.
If you plan to use the ASP.NET AJAX Control Toolkit, the latter choice is the one you want; if you are going to be using only custom-coded ASP.NET AJAX controls, choose the first one. You'll also see in the Toolbox two new items, the "AJAX Extensions" tab and the new tab that you created for the Control Toolkit, as shown in Figure B. I named mine "AJAX Control Toolkit" in the screenshot.
The core framework
The framework that ASP.NET AJAX delivers has two sides to it. The first side is the server-side controls and libraries, which handle tasks such as L10n/I18n, timer controls, serialization to/from XML and JSON. The client-side libraries contain communications functions, the client-side portion of serialization, and a core set of classes, functions, and so on. The overall purpose of these two items is to work together: the client-side libraries provide the functionality for easily communicating with the Web server, and the server-side libraries tie those communications to other server-side functionality.
The end result is to make working with AJAX only slightly more difficult that working with traditional server-side controls while avoiding postbacks. Without a premade two-sided solution such as this, developers have had to write their own libraries to perform much of these mundane tasks themselves, which could be time consuming, error prone, and difficult to debug.
Using the Control Toolkit
In general, the controls in the Control Toolkit function much like any other ASP.NET Web control. They include many of the most common functions that AJAX-enabled Web sites use, such as "autocomplete" functionality in text boxes, "watermarked" text boxes with faint "hint" text visible before they receive focus, pop-up windows, and so on. My personal favorite is the Accordion, which behaves much like the sidebar in Outlook. The controls' appearance is configurable through CSS. Many of the controls may be databound on the server side in the same fashion as any other ASP.NET control.
To use the Control Toolkit, start a new Web site using the AJAX Control Toolkit Web Site; I tried to start a new project using the ASP.NET AJAX-Enabled Web Site and adding the Control Toolkit items to the page, and it looked like I may have been missing some dependencies along the way. Once the new project was started, the controls were pretty easy to use.
One drawback I found was that the Control Toolkit was not integrated with the Visual Studio Help system. Instead, I needed to reply upon the references on the ASP.NET AJAX Control Toolkit Web site (look at the Samples section for the control you want to learn about). Overall, the documentation was sparse and rather inaccessible (it's at the bottom of the sample page and is barely more than a syntactic reference), but it's enough to get going. Another slight problem is that the default styles on most of the controls seem to range from "ugly" to "hideous". Expect to spend some time crafting a nicer look and feel in your favorite CSS editor.
The Control Toolkit comes complete with full source code, allowing you to edit and adapt the controls to meet your own needs.
Pulling it all together
When you are working with a page that uses the ASP.NET AJAX system, one item that is always added is the ScriptManager control. This control acts as a collection of scripts that exist on the server, and renders itself in the Web browser as links to external JavaScript files. The various controls also add their own JavaScript to the page; viewing the source of a page that uses the ASP.NET AJAX controls is not terribly pretty. Most of the controls included in the Control Toolkit are easy to use. One thing to note is that many of them actually modify an existing control on the page. For example, to create a Calendar or a Slider, you use the CalendarExtender and the SliderExtender controls, and specify TextBox controls with the TargetControlID property to act as the calendar or slider, as shown in Figure C.
The code for the calendar and slider shown in Figure C is:
Calendar:
Slider:
These are just a few samples of the existing controls included in the Control Toolkit. Properties of the controls may be bound to data (resources, datasets, and configuration), as can the values of the controls, like any other server control.
A word of caution
For better or for worse, the "J" in AJAX stands for JavaScript, and many of the techniques and tricks used in AJAX rely upon CSS functionality. As a result, there is always the chance that a slight difference in browser interpretation of JavaScript or CSS could result in unexpected behavior. Furthermore, some users disable JavaScript, or their browser settings restrict its usage to certain Web sites. In other words, any work that you do with the ASP.NET AJAX system should either be usable without the controls and code, or you should expect that less than 100 percent of your users will be able to access your content or application.
You should also keep in mind that search engines are not capable of performing mouse clicks or drag-and-drop actions. If you are not very careful with your techniques, you could very well be hiding information from a search engine that you want it to find.
Like search engines, many of the software and hardware tools that some disabled users use to operate a computer -- such as screen readers -- may have a difficult time with the AJAX visual controls. If ensuring that disabled users have full access to your Web site is on your agenda, it is best to fully test your code with such software and hardware, and be willing to sacrifice certain tricks to maintain accessibility.
