Microsoft embraces AJAX with AJAX Extensions 1.0

The ASP.NET 2.0 AJAX Essentials 1.0 add-on brings AJAX technology to the ASP.NET developer in a manner consistent with ASP.NET development. Download the ASP.NET add-on today to take advantage of the marriage of ASP.NET and AJAX.

Improving the user experience is a critical aspect of all Web applications. The AJAX movement shares this goal as it uses existing technologies to reduce the number of roundtrips between the browser and the Web server. Microsoft recognized the power of AJAX early with the Atlas offering and more recently with the ASP.NET 2.0 AJAX Extensions. Here's a closer look at this ASP.NET add-on, along with tips on how you can use it to enhance your ASP.NET applications.

What is AJAX Extensions?

The goal of Microsoft's ASP.NET AJAX framework is to introduce a new era of richness and interactivity to Web applications. (This is the overall goal of AJAX.) The ASP.NET AJAX framework provides a set of tools for every aspect of client development and brings existing .NET coding techniques to the client side. It provides developers with an AJAX programming model that is similar to traditional ASP.NET development.

Getting started

You can download AJAX Extensions 1.0 on the Microsoft site. The download is contained in one Windows installer file; it also includes the Microsoft AJAX Library, which is the core component of using AJAX principles within ASP.NET. The default installation directory for the AJAX framework is C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions. This directory contains a subdirectory for the version of the framework installed (my download is v1.0.61025). The version directory contains the framework files such as the dlls and release notes. You can download a comprehensive documentation file, or you can view it online.

When using Visual Studio for development, the installation of the ASP.NET 2.0 AJAX Extensions adds a new project type -- ASP.NET AJAX-Enabled Web Site -- when you create a new Web application. A new set of controls called AJAX Extensions are available in the Visual Studio Toolbox when you work with this type of project. These controls are:

  • Timer: Performs asynchronous or synchronous Web page postbacks at a defined interval. It also allows you to update portions of a page, run server code, or post the entire page to the server at a defined interval.
  • ScriptManager: Manages client script for ASP.NET AJAX pages by registering the framework. This is the most important control in the framework; it is used as the starting point to provide AJAX functionality in an ASP.NET page.
  • ScriptManagerProxy: Enables nested components to add script and service references if the page already contains a ScriptManager control (a page may contain only one ScriptManager control).
  • UpdateProgress: Allows you to post status information pertaining to partial-page updates. You may use it when partial updates are slow, so the user gets feedback on the progress.
  • UpdatePanel: Allows you to perform partial-page updates. The updates are contained by the UpdatePanel controls, which define areas of a page to be manipulated. This is used in conjunction with the ScriptManager control.

In action

The best way to get acquainted with using AJAX functionality within ASP.NET is through example code. One of the more popular applications of AJAX concepts is the loading of a portion of a page without affecting the entire page. With the Microsoft AJAX Library, this is called partial-page loading.

Implementing partial-page loading involves the ScriptManager and UpdatePanel controls. The ScriptManager control adds the AJAX functionality to the page. The UpdatePanel control defines a portion of the page that may be reloaded without posting the entire page to the Web server.

As an example, you can place the ScriptManager control and the UpdatePanel control anywhere on the page. Controls to be included in the partial update will be placed within the UpdatePanel. (For this sample, Label and Button controls will be included in the UpdatePanel.) The plan is the text displayed in the Label control will be changed when the button is selected by the user. This is accomplished via code placed in the button's click event. The following ASP.NET page includes this functionality:

<%@ Page Language="C#" %>



<script runat="server">

protected void Button1_Click(object sender, EventArgs e) {

this.Label1.Text = "After the update. AJAX is cool.";



<html xmlns="">

<head runat="server">

<title>ASP.NET AJAX 1.0 Test</title>



<form id="frmAJAXTest" runat="server">


<asp:ScriptManager ID="ScriptManager1" runat="server" />

<asp:UpdatePanel id="UpdatePanel1" runat="server">


<asp:Label id="Label1" runat="server" Text="Before the update" />

<br />

<asp:Button id="Button1" runat="server" Text="Click Me" OnClick="Button1_Click" />




You can load the page, click the button, and watch the text displayed on the Label control update without a full page reload. Thus, the blinking of a page being reloaded is avoided. The result is a positive influence on the user experience. Next week, I'll take it further by examining more functionality using the other controls.

Satisfy the user

Anything that helps satisfy users is a good thing when developing Web applications and decreasing server round trips is just one of the positive features of AJAX development. The ASP.NET 2.0 AJAX Essentials 1.0 add-on brings AJAX technology to the ASP.NET developer in a manner consistent with ASP.NET development. Download the ASP.NET add-on today to take advantage of the marriage of ASP.NET and AJAX.

Tony Patton began his professional career as an application developer earning Java, VB, Lotus, and XML certifications to bolster his knowledge.


Get weekly .NET tips in your inbox TechRepublic's free .NET newsletter, delivered each Wednesday, contains useful tips and coding examples on topics such as Web services, ASP.NET, ADO.NET, and Visual Studio .NET. Automatically subscribe today!