Microsoft AJAX Control Toolkit
In an earlier post I outlined the XMLHttpRequest object and showed you Java-Script code to implement the API released by the W3C. However, there are other ways to incorporate Ajax into a web-page or a web-application.
This post will concentrate on the Microsoft Ajax Toolkit, a free toolkit released by the Microsoft team making Ajax a plug and play process.
After the jump I will describe the many components available in the toolkit.
The Microsoft AJAX Control Toolkit basically allows Ajax to be incorporated into a web app or page specifically using ASP.net without having a great deal of Javascript code. The toolkit includes several controls and alongside an Integrated Development Environment (IDE) primarily Microsoft Visual Studio they are invoked either by simply dragging and dropping them onto the corresponding web page, or using XHTML code. The figure below shows the several Ajax controls available.
Ajax controls • Update Panel • Accordion • Collapsible Panel • Timer • Cascading Drop Down • Update Progress • Hover Menu • Animation • DropShadow • Modal Popup • TabContainer
The following shows the XHTML code used to deploy some of these Ajax components along with a small description about them. Information taken from the ASP.net Ajax documentation.
Control: ScriptManager
Description: The control is in charge of all Ajax resources on the web page, this control needs to be present on an Ajax enabled web page.
Example XHTML code:
Control: Update Panel
Description: Used alongside a ScriptManager control allowed partial web page rendering. This reduces the synchronous post back to the server and full page reloads. All controls which would require a post back to the server for data are added under the ContentTemplate tag shown in the code above. Clicking on Button1 will update the Label1 text element asynchronously without the entire page reloading.
Example XHTML code:
Control: Update Progress
Description: Provides a visual indication on the web page about the progress of a recently executed process. Typically update progress is an animated GIF image or text.
Example XHTML code:
Control: Collapsible Panel
Description: Allows collapsible areas to be added to a web page. The control has two states namely collapse and expand. To hide a specific area the collapsible panel should be in collapse mode, and upon expansion the area which was initially hidden from the user is made visible on the web page.
Example XHTML code:
Control: Tab Container
Description: The control allows Tabs to be added to a web page similar to the functionality provided by most desktop based applications which use Tabs.
Example XHTML code:
Control: Cascading Drop Down
Description: A standard drop down list can be extended in terms of using Ajax via this control. Each time a user selects a value in a drop down list control, the cascading drop down control makes a web service call to retrieve a set of specific values needed for an operation.
Example XHTML code:
Control: Modal Popup
Description: This control allows content to be displayed in a popup window in a modal style meaning that the rest of the web page becomes disabled – stopping the user from interacting with the rest of the web page. Typically, modal popup windows consist of an OK and Cancel button to close the respective popup window and as a result this will re-enable the web page.
Example XHTML code:
Further information about the controls can be found at ASP.net Ajax documentation.