Web Development

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#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<script runat="server">

protected void Button1_Click(object sender, EventArgs e) {

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

}

</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

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

</head>

<body>

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

<div>

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

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

<contenttemplate>

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

<br />

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

</contenttemplate>

</asp:UpdatePanel>

</div></form></body></html>

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!

About

Tony Patton has worn many hats over his 15+ years in the IT industry while witnessing many technologies come and go. He currently focuses on .NET and Web Development while trying to grasp the many facets of supporting such technologies in a productio...

12 comments
jimamily
jimamily

A few years back, because of the lack of technology, search engines bypass sites that use an Ajax dashboard. Search engines were not programmed to detect java scripts and thus SEO bots do not list them in the search results, instead they only show crawl-able static websites. Ajax http://ajaxdashboard.com/

kvsr_12
kvsr_12

Hi, I copy pasted your above code but nothing worked for me. page is getting submitted asusual.am i missing some thing.please suggest

Thando Vuzane - Web Developer
Thando Vuzane - Web Developer

Thando-html coder Great to see AJAX finally receiving the recognition it deserves. It's quite a powerful application tool as it uses great web scriptings; Javascript and xhtml, great combination if you ask me.

bagopian
bagopian

Please send alerts to bagopian@nelsonhr.com

navot.peled
navot.peled

I would like to draw your attention to another alternative which is a paradigm shift for AJAX front ends. One should be aware that I am not, and do not pretend to be objective, never the less I believe that one can judge for himself. Visual WebGui is an open source rapid application development framework for graphic user interfaces of IT web applications. VWG replaces the obsolete paradigms of ASP.NET in both design-time and run-time which were designed for developing sites, with WinForms methodologies, which were designed for developing applications. Thus enabling designer that was designed for application interfaces (WinForms designer) instead of a word documents (ASP.NET designer). This provides the developer with an extremely efficient way to design interfaces using drag and drop instead of hand coding HTML. Visual WebGui is an AJAX frame work that doesn???t expose logic, data or open services on client requests and therefore is not as vulnerable as common AJAX solution. Visual WebGui is an AJAX frame work that doesn???t expose logic, data or open services on client requests and therefore is not as vulnerable as common AJAX solution. Visual WebGui is an AJAX frame work that doesn???t expose logic, data or open services on client requests and therefore is not as vulnerable as common AJAX solution. VWG presentation layer is de-coupled and instead of standard browser it can, and will run Silverlight. NO!!! Visual Webgui is not!! A component library ??? It is a complete revised approach to developing web applications. A JavaScript generator ??? It runs on the server controlling the browser using a small static JavaScript kernel. For developing sites ??? It was designed to provide for developing IT web applications GUIs. A closed / locked-in framework ??? It has many extensibility features, which allow integration of legacy resources (ASP.NET or DHTML resources) and the development of custom controls and behaviors. Worth a look at www.visualwebgui.com,

MadestroITSolutions
MadestroITSolutions

I still think AJAX is a workaround for a now obsolete stateless protocol. Instead of spending so much time and effort in "hacks" to make it work in a way it wasn't intended to, they should be thinking about redesigning the entire architecture.

sherman.meeds
sherman.meeds

AJAX is an extension of a much larger applications development platform that VS.NET provides. In one tool, I can work with any aspect of an application from GUI to database. I can make and control the entire environment involved from the top down. And after it is done, it is easy to deploy, maintain, and pass on to other developers for future enhancements. Perhaps AJAX should be more inherent in the tool, but it does provide functionality that enhances it, and I don't believe the MS product was ever intended to be more than an enhancement to VS.NET.

aspatton
aspatton

It is hard to keep up with so many new technologies, updates to existing technologies/products, and new products from Microsoft. It is overwhelming for most developers.

cfisher
cfisher

I've been watching the web try to mature into something we've been doing with client-server for decades. Ajax is sort of moving in that direction and I'm glad to see this concept developing. I've never been able to create a truly useful web app in a single download that wasn't a half day load time . In the past I used an invisible framework with a tunneling applet that I could send and receive communications with a server. It worked. With some DHTML on the client visible page, you could do what Ajax does. Why doesn't Micro$oft add that tunneling directly into the .Net Framework?

Justin James
Justin James

We know that I am *well* on the record on this subject as well. That being said, I took a look at the ASP.Net AJAX stuff a few weeks ago, ironically also for a TechRepublic article. It was about as good as the technolgy can allow it to be. The tight coupling between server and client can be a Good Thing or a Bad Thing, though. J.Ja

Justin James
Justin James

... the ASP.Net AJAX extensions do, amongst other things. Invisible tunneling between client and server (via JSON or XML), built into the .Net Framework. J.Ja

Editor's Picks