Advertisements
Traditionally, web applications have left a lot to be desired from a user experience standpoint, due primarily to the "request/response" lifecycle. Any interaction with a page typically requires a postback to the web server (a "request"), which then performs any server-side tasks needed and returns the updated page's markup (the "response"). Outside of intranet-based applications, such behavior adds a bit of a lag when interacting with a page. One approach to improving the end user's experience is to use AJAX. AJAX is a technique for using JavaScript and the XMLHttpRequest object to make light-weight HTTP requests back to the web server from client-side script. Once a response is received, the web page's layout can be seamlessly refreshed using JavaScript to message the page's Document Object Model (DOM) and CSS settings. AJAX-enabled pages provide a slick, responsive user experience, making web-based applications function more like desktop-based ones.
In the past adding AJAX type behaviors to your web application was difficult and came with a steep learning curve since AJAX encompasses a bevy of technologies (JavaScript, XML, XmlHttpObject, HTTP requests, DHTML, and so on). With the advent of the ASP.NET Atlas framework, however, there is much less of a reason to feel so overwhelmed when it comes to AJAX!
In this article, I will first introduce you to the concepts of AJAX and Microsoft's Atlas framework as it applies to ASP.NET. This will help you understand the basics of the technologies and see why you might want to use it in your web applications. Next, we will step through a very simple example, which will demonstrate the basic concepts learned in the introduction. Lastly, we will work through a slightly more involved example, in which we will employ the power of Atlas to add AJAX-type behaviors to a GridView control. This final example will showcase the ease with which AJAX behaviors can be added to both existing web applications and brand new projects.
An Introduction to AJAX and Atlas with ASP.NET 2.0
By Erich Peterson
Atlas has Been Updated to ASP.NET AJAX
At the time this article was written, Microsoft's ASP.NET AJAX framework was still in beta and was referred to as "Atlas." Since the publication of this article, the AJAX framework has been officially released and renamed to ASP.NET AJAX. This article may contain out of date syntax.
For more information on ASP.NET AJAX, refer to Scott Mitchell's Building Interactive User Interfaces with Microsoft ASP.NET AJAX article series, as well as the Microsoft ASP.NET AJAX homepage.
Introduction
Traditionally, web applications have left a lot to be desired from a user experience standpoint, due primarily to the "request/response" lifecycle. Any interaction with a page typically requires a postback to the web server (a "request"), which then performs any server-side tasks needed and returns the updated page's markup (the "response"). Outside of intranet-based applications, such behavior adds a bit of a lag when interacting with a page. One approach to improving the end user's experience is to use AJAX. AJAX is a technique for using JavaScript and the XMLHttpRequest object to make light-weight HTTP requests back to the web server from client-side script. Once a response is received, the web page's layout can be seamlessly refreshed using JavaScript to message the page's Document Object Model (DOM) and CSS settings. AJAX-enabled pages provide a slick, responsive user experience, making web-based applications function more like desktop-based ones.
In the past adding AJAX type behaviors to your web application was difficult and came with a steep learning curve since AJAX encompasses a bevy of technologies (JavaScript, XML, XmlHttpObject, HTTP requests, DHTML, and so on). With the advent of the ASP.NET Atlas framework, however, there is much less of a reason to feel so overwhelmed when it comes to AJAX!
In this article, I will first introduce you to the concepts of AJAX and Microsoft's Atlas framework as it applies to ASP.NET. This will help you understand the basics of the technologies and see why you might want to use it in your web applications. Next, we will step through a very simple example, which will demonstrate the basic concepts learned in the introduction. Lastly, we will work through a slightly more involved example, in which we will employ the power of Atlas to add AJAX-type behaviors to a GridView control. This final example will showcase the ease with which AJAX behaviors can be added to both existing web applications and brand new projects.
Basic Concepts of AJAX and Atlas
AJAX stands for Asynchronous JavaScript and XML. Using its techniques you can make your web applications more responsive and interactive. At the very core of AJAX lies the XMLHttpRequest object. This object facilitates in the sending of smaller amounts of data to the web server asynchronously, instead of having to refresh the entire page every time the user makes a change to it. As mentioned before, in the past, AJAX techniques were difficult to implement because developer's were responsible for writing the client-side JavaScript to make the asynchronous request and handle its response, as well as the server-side code to handle such "partial" postbacks. Furthermore, subtle differences in the DOM and XMLHttpObject implementation across browsers didn't help to make things any easier.
The Atlas framework is Microsoft's answer to the difficulties inherent in implementing AJAX techniques. Atlas is an extension of ASP.NET and, as such, is incredibly easy to implement in your ASP.NET web applications. For example, with Atlas you no longer have to worry about cross-browser compatibility, because the framework outputs the correct code depending on the client's user agent (web browser).
The remainder of this article illustrates how to use Atlas to build web pages that utilize AJAX; both examples are available as downloads from the end of this article. It is assumed that you have a version of Visual Studio 2005 (or Visual Web Developer) and SQL Server 2005 Express Edition installed. (For those that are using a non-express version of SQL Server 2005, directions will be provided later on on how to make the second example work properly.)
A Basic Atlas Example
Instead of just talking about Atlas, let's get our feet wet and demonstrate the basic ideas using a simple example. You will first need to go to Atlas website (atlas.asp.net) and download and install the April CTP setup (.msi) file. During the installation just keep all the default settings. This setup file will install an Atlas website template into your Visual Studio 2005 or Visual Web Developer installation.
Now that you have the Atlas template installed, we can step through our first example. Fire up Visual Studio 2005. Once open, click on New Web Site from the File menu. You will see a dialog box similar to the one shown below.
Select the Atlas Web Site item under My Templates, type in a location, and click OK. The Atlas Web Site template has now done some initial setup for you. For example, from the solution explorer, if you look under the /bin directory, you will see the Microsoft.Web.Atlas.dll assembly has already been included in the project for you. Moreover, if you view the source of your Web.config file, you will see all the hooks needed to start adding Atlas functionality to you web application. (I will not be going into the details pertaining to the code Atlas puts in the Web.config. If you want to learn about what all this markup means, check out the Atlas documentation (atlas.asp.net/docs).
Lastly, if you view the source of the Default.aspx page you will see Atlas has added a new server control declaration:
<atlas:ScriptManager ID="ScriptManager1" runat="server" />
In every page that you want to enable Atlas functionality, you must have exactly one ScriptManager control declared. We will ignore for now the <script> block at the bottom of this page and dive directly into our example.
To start, insert the following code snippet into your Default.aspx page, replacing the existing code between the <form> tags:
<form id="form1" runat="server">
<atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"/>
<div style="background-color: Yellow; float: left; width: 100px;">
<asp:Label ID="FullPostBackLabel" runat="server" /><br />
<asp:Button ID="FullPostBackButton" runat="server" text="Full Post Back" OnClick="FullPostBackButton_OnClick" />
</div>
<atlas:UpdatePanel runat="server" ID="UpdatePanel1" Mode="Conditional">
<ContentTemplate>
<div style="background-color: Lime; width: 100px;">
<asp:Label ID="PartialPostBackLabel" runat="server" /><br />
<asp:Button ID="PartialPostBackButton" runat="server" text="Partial Post Back" OnClick="PartialPostBackButton_OnClick" />
</div>
</ContentTemplate>
</atlas:UpdatePanel>
</form>
In short, this declarative markup creates two user interfaces, both of which update a Label control based on the current date and time on the server. The first interface uses the standard, request/response postback (the "Full Post Back" controls), while the second one will use AJAX to make partial postbacks. I'll bypass discussing the "Full Post Back" controls, as those should be self-explanatory; instead, let's focus on the "Partial Post Back" controls.
As you can see, the EnablePatialRendering attribute of the ScriptManager control has been added and its value set to True. This will allow ASP.NET to post only parts of the page back to the server instead of having to refresh the entire page. This is what we want! To handle posting data back to the web server asynchronously, you need to add an UpdatePanel control to your page:
<atlas:UpdatePanel runat="server" ID="UpdatePanel1" Mode="Conditional">
<ContentTemplate>
</ContentTemplate>
</atlas:UpdatePanel>
Place those ASP.NET controls that participate in the asynchronous postback within the UpdatePanel's <ContentTemplate> tags. The UpdatePanel's Mode attribute dictates when the partial postback ensues. For this page, set the Mode attribute to Conditional, which means that the UpdatePanel will post its data back to the server if one of the following three events occur:
1. The UpdatePanel's Update() method is called explicitly
2. An UpdatePanel event causes the Update() method to be called implicitly
3. A server control that is inside the UpdatePanel causes a postback
If you leave out the Mode attribute, it will default to Always, which will cause the UpdatePanel to refresh when any server control on the page causes a post back. In this example we will be using the third option for posting back the UpdatePanel (that is, the UpdatePanel will postback when a control within it causes a postback). As you can see, we have a Label and Button control inside of the <ContentTemplate> tag. Therefore, the UpdatePanel will postback when the Button control is clicked.
Lastly, add the following server-side <script> block between the page's <head> tags (you could also add this to the page's code-behind class, if you'd rather):
<script runat="server">
void FullPostBackButton_OnClick(object sender, EventArgs e)
{
FullPostBackLabel.Text = DateTime.Now.ToString();
}
void PartialPostBackButton_OnClick(object sender, EventArgs e)
{
PartialPostBackLabel.Text = DateTime.Now.ToString();
}
</script>
These are the server-side event handlers for the two Button controls on the page (one inside the UpdatePanel and the other outside), which will update the Labels above them with the server's current date and time.
