1. ASP.NET Server-Side Support for AJAX
Much of ASP.NET support for
AJAX resides in a collection of server-side controls responsible for
rendering AJAX-style output to the browser. Each individual bit of
rendering is handled by a class derived from System.Web.UI.Control.
The entire job of a server-side control is to render output that places
HTML elements in the output stream so that they appear correctly in the
browser. For example, ListBox controls render a <select/> tag. TextBox controls render an <input type="text" /> tag. ASP.NET AJAX server-side controls render AJAX-style script and HTML to the browser.
ASP.NET AJAX support
consists of these server-side controls along with client code scripts
that integrate to produce AJAX-like behavior. The following subsections
describe the most frequently used AJAX-oriented ASP.NET server controls:
ScriptManager, ScriptManagerProxy, UpdatePanel, UpdateProgress, and Timer.
1.1. ScriptManager Control
The ScriptManager control manages script resources for the page. The ScriptManager control's primary action is to register the AJAX Library script with the page so that the client script can use type system extensions. The ScriptManager also makes possible partial-page rendering and supports localization as well as custom user scripts. The ScriptManager assists with out-of-band calls back to the server. Any ASP.NET site wishing to use AJAX must include an instance of the ScriptManager control on any page using AJAX functionality.
1.2. ScriptManagerProxy Control
Scripts on a Web page often
require a bit of special handling in terms of how the server renders
them. Typically, the page uses a ScriptManager control to organize the scripts at the page level. Nested components such as content pages and user controls require the ScriptManagerProxy to manage script and service references to pages that already have a ScriptManager control.
This is most notable in the case of master pages. The master page typically houses the ScriptManager control. However, ASP.NET throws an exception if a second instance of ScriptManager is found in a given page. So, what would content pages do if they needed to access the ScriptManager control that the master page contains? The answer is that the content page should house the ScriptManagerProxy control and work with the true ScriptManager control through the proxy. Of course, as mentioned, this also applies to user controls as well.
1.3. UpdatePanel Control
The UpdatePanel
control supports partial-page updates by tying together specific
server-side controls and events that cause them to render. The UpdatePanel
control causes only selected parts of the page to be refreshed instead
of the whole page (as happens during a typical HTTP postback).
1.4. UpdateProgress Control
The UpdateProgress control coordinates status information about partial-page updates as they occur in UpdatePanel controls. The UpdateProgress control supports intermediate feedback for long-running operations.
1.5. Timer Control
The Timer control issues postbacks at defined intervals. Although the Timer control will perform a typical postback (posting the whole page), it is especially useful when coordinated with the UpdatePanel control to perform periodic partial-page updates.
2. AJAX Client Support
ASP.NET AJAX client-side support is centered around a set of JavaScript libraries. The following layers are included in the ASP.NET AJAX script libraries:
The browser
compatibility layer assists in managing compatibility across the most
frequently used browsers. Whereas ASP.NET by itself implements browser
capabilities on the server end, this layer handles compatibility on the client end (the browsers supported include Internet Explorer, Mozilla Firefox, and Apple Safari).
The ASP.NET AJAX core
services layer extends the usual JavaScript environment by introducing
classes, namespaces, event handling, data types, and object
serialization that are useful in AJAX programming.
The ASP.NET AJAX base
class library for clients includes various components, such as
components for string management and for extended error handling.
The networking layer of the AJAX client-side support manages communication with Web-based services and applications. The networking layer also handles asynchronous remote method calls.
The pièce de résistance of
ASP.NET AJAX support is the community-supported Control Toolkit.
Although all the features mentioned previously provide solid
infrastructure for ASP.NET AJAX, AJAX isn't very compelling until you
add a rich tool set.
2.1. ASP.NET AJAX Control Toolkit
The ASP.NET AJAX Control
Toolkit is a collection of components (and samples showing how to use
them) encapsulating AJAX capabilities. When you browse through the
samples, you can get an idea of the kind of user experiences available
through the controls and extenders. The Control Toolkit also provides a
powerful software development kit for creating custom controls and
extenders. You can download the ASP.NET AJAX Control Toolkit from the ASP.NET AJAX Web site.
The AJAX Control Toolkit is a
separate download and not automatically included with Microsoft Visual
Studio 2010. The latest version is 3.0, which was made available at the
end of September 2009. See http://asp.net/ajax/ajaxcontroltoolkit/
for details. You can download the binaries or the source code. If you
aren't interested in the source code, you only need to make a reference
to the AjaxControlToolkit.dll assembly in your project.
If you want to build the toolkit yourself, follow these steps:
Download the toolkit source code.
After unzipping the Toolkit file, open the AjaxControlToolkit solution file in Visual Studio.
Build the AjaxControlKit project.
The compilation process produces a file named AjaxControlToolkit.dll in the AjaxControlToolkit\bin directory.
Right-click
the Toolbox in Visual Studio, and click Choose Items on the menu.
Browse to the AjaxControlToolkit.dll file in the AjaxControlToolkit\bin
directory and include the DLL. This brings all the new AJAX controls
from the toolkit into Visual Studio so that you can drop them in forms
in your applications.
Note:
You can find a wealth of AJAX-enabled server-side controls and client-side scripts available through a community-supported
effort. Although they are not quite officially part of the Microsoft
AJAX release, the support includes the ASP.NET AJAX community-supported
controls (mentioned previously) as well as support for client
declarative syntax (XML script) and more. Go to http://www.asp.net/ajax/
for more information. This site includes links to download the ASP.NET
AJAX Control Toolkit, links to some interesting AJAX-enabled sites,
video tutorials, and other useful downloads.
2.2. AJAX Control Toolkit Potpourri
A number of other extenders
and controls are available through a community-supported effort. You can
find a link to the AJAX Control Toolkit at http://www.asp.net/ajax/. Table 1 lists the controls and extenders available through this toolkit.
Table 1. The ASP.NET Control Toolkit
| Component | Description |
|---|
| Accordion | This extender is useful for displaying a group of panes one pane at a time. It's similar to using several CollapsiblePanels constrained to allow only one to be expanded at a time. The Accordion is composed of a group of AccordionPane controls. |
| AlwaysVisibleControl | This
extender is useful for pinning a control to the page so that its
position remains constant while content behind it moves and scrolls. |
| Animation | This extender provides a clean interface for animating page content. |
| AsyncFileUpload | This control is for uploading a file asynchronously in the background. |
| AutoComplete | This
extender is designed to communicate with a Web service to list possible
text entries based on what's already in the text box. |
| Calendar | This extender is targeted for the TextBox control providing client-side date-picking functionality in a customizable way. |
| CascadingDropDown | This extender is targeted toward the DropDownList control. It functions to populate a set of related DropDownList controls automatically. |
| CollapsiblePanel | This extender is targeted toward the Panel control for adding collapsible sections to a Web page. |
| ConfirmButton | This extender is targeted toward the Button control (and types derived from the Button
control) and is useful for displaying messages to the user. The
scenarios for which this extender is useful include those requiring
confirmation from the user (for example, where linking to another page
might cause the end user to lose state). |
| DragPanel | This is an extender targeted toward Panel controls for adding the capability for users to drag the Panel around the page. |
| DropDown | This extender implements a Microsoft SharePoint–style drop-down menu. |
| DropShadow | This extender is targeted toward the Panel control that applies a drop shadow to the Panel. |
| DynamicPopulate | This extender uses an HTML string returned by a Web service or page method call. |
| FilteredTextBox | This extender is used to ensure that an end user enters only valid characters in a text box. |
| HoverMenu | This extender is targeted for any WebControl
that has an associated pop-up window for displaying additional content.
The pop-up window is activated when the user rests the mouse pointer on
the targeted control. |
| ListSearch | This extender searches items in a designated ListBox or DropDownList based on keystrokes as they're typed by the user. |
| MaskedEdit | This extender is targeted toward TextBox controls to constrain the kind of text that the TextBox will accept by applying a mask. |
| ModalPopup | This extender mimics the standard Windows modal dialog box behavior. With the ModalPopup,
a page can display content of a pop-up window that focuses attention on
itself until it is dismissed explicitly by the end user. |
| MutuallyExclusiveCheckBox | This extender is targeted toward the CheckBox control. The extender groups CheckBox controls using a key. When a number of CheckBox controls all share the same key, the extender ensures that only a single check box will appear selected at a time. |
| NoBot | This
control attempts to provide CAPTCHA (Completely Automated Public Turing
test to tell Computers and Humans Apart)-like bot/spam detection and
prevention without requiring any user interaction. Although a
noninteractive approach might be bypassed more easily than one requiring
actual human interaction can be, this implementation is invisible. |
| NumericUpDown | This extender is targeted toward the TextBox
control to create a control very similar to the standard Windows Edit
control with the Spin button. The extender adds "up" and "down" buttons
for incrementing and decrementing the value in the TextBox. |
| PagingBulletedList | This extender is targeted toward the BulletedList control. The extender enables sorted paging on the client side. |
| PasswordStrength | This extender is targeted toward the TextBox control to help when end users type passwords. Whereas the typical TextBox hides only the actual text, the PasswordStrength extender also displays the strength of the password using visual cues. |
| PopupControl | This
extender is targeted toward all controls. Its purpose is to open a
pop-up window for displaying additional relevant content. |
| Rating | This
control renders a rating system from which end users rate something
using images to represent their choice (stars are common). |
| ReorderList | This ASP.NET AJAX control implements a bulleted, data-bound list with items that can be reordered interactively. |
| ResizableControl | This extender works with any element on a Web page. Once the ResizableControl is associated with an element, the user can resize that control. The ResizableControl puts a handle on the lower right corner of the control. |
| RoundedCorners | The RoundedCorners extender can be applied to any Web page element to turn square corners into rounded corners. |
| Seadragon | The Seadragon control renders an image along with buttons for zooming in and out, going to full screen, and panning, |
| Slider | This extender is targeted to the TextBox control. It adds a graphical slider that the end user can use to change the numeric value in the TextBox. |
| SlideShow | This extender controls and adds buttons users can use to move between images individually and to play the slide show automatically. |
| Tabs | This server-side control manages a set of tabbed panels for managing content on a page. |
| TextBoxWatermark | TextBoxWatermark extends the TextBox control to display a message while the TextBox is empty. When the TextBox contains some text, the TextBox appears as a typical TextBox. |
| ToggleButton | This extender extends the CheckBox to show custom images reflecting the state of the CheckBox. |
| UpdatePanelAnimation | This extender provides a clean interface for animating content associated with an UpdatePanel. |
| ValidatorCallout | ValidatorCallout extends the validator controls (such as RequiredFieldValidator and RangeValidator).
The callouts are small pop-up windows that appear near the UI elements
containing incorrect data to direct user focus to them. |
