AJAX Pattern: Level III


 definition
 overview
 ajax pattern in action
 source code



definition

Add AJAX functionality using highly abstracted, server-side technologies, such as ASP.NET 2.0 AJAX Extensions. This makes developing rich and highly interactive AJAX-style applications very easy. Little or no Javascript is required.

Frequency of use:   medium high

overview

The ASP.NET AJAX Control Toolkit includes controls that have been built with Microsoft AJAX and ASP.NET 2.0 AJAX Control Extensions. The example below demonstrates how a standard DropDownList can be AJAX-enabled using the CascadingDropDown Control Extender available in the Toolkit.

Building cascading dropdowns using the Control Extender doesn't require a single line of Javascript. ASP.NET AJAX Control Extensions are powerful and can significantly increase productivity. Of course, as with any high-level abstraction, these controls offer less flexibility than if you were to program your controls at Abstraction Level 2.


ajax pattern in action

In this example, the user selects a training class using three cascading dropdowns. First the course is selected, then the city, and finally the date. The selection of one dropdown populates the next one and places focus on it. The first two dropdowns are selected without page postbacks (i.e. no page flicker). However, with the final dropdown (class date) a page postback does occur in which the selection summary (the dark red text below the dropdowns) is created.

The cascading selection process has been implemented using the ASP.NET 2.0 AJAX CascadingDropDown control. Following selecting each dropdown the next one is populated with data retrieved from a database via a web service.

The underlying plumbing of sending SOAP messages to the web service and returning JSON formatted data to the client are all handled by the toolkit. Controls like these can significantly increase your productivity in building AJAX-style applications.


Example: Select a training class

Choose a course:
Choose a city:
Choose a date:
 
  [No class selected yet]


source code

    Click here to view the source code.