Understanding AJAX and ASP.NET

  • 5/15/2010

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.

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:

  1. Download the toolkit source code.

  2. After unzipping the Toolkit file, open the AjaxControlToolkit solution file in Visual Studio.

  3. Build the AjaxControlKit project.

  4. The compilation process produces a file named AjaxControlToolkit.dll in the AjaxControlToolkit\bin directory.

  5. 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.

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/. This chapter discusses a few of the controls available from the toolkit. Table 23-1 lists the controls and extenders available through this toolkit.

Table 23-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.