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. Read on to learn more!

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.

Run the project now and click each button once. After doing so your screen should look similar to the following:

When you clicked the button labeled "Partial Post Back", you saw how the date and time above it were updated without any flicker in the screen, without a full-page post back, and without changing the other section's time and date! Clicking the "Partial Post Back" button invoked an asynchronous postback to the web server using the XMLHttpRequest object; the web server then sent back information, which was used to update the screen dynamically. This simple example demonstrates just how easy it is to implement AJAX behaviors in your web application using Atlas.

At this point your imagination may be running wild, thinking of all the different possibilities of using ASP.NET 2.0 Web controls in AJAX scenarios. In our next example we will take the GridView control and show how easy it is to add partial post backs to update, sort, and page records!

Building an Atlas-Enabled GridView
You got your feet wet a little in the first example, so now let's take a look at a slightly more practical example using the GridView control. To get started, close your current project if it is still open and create a new Atlas template project. To make it easier for you to connect to a data source and so that you will receive the same output as the example, please download the source material. In the folder named App_Data under the AtlasSecondExample folder you will find the database file named Database.mdf. Copy that file into your newly created website's App_Data folder.

If You are Not Using SQL Server 2005 Express Edition...

If you have a full version of SQL Server 2005 installed, instead of SQL Server Express, you will need to attach the database file you download to your SQL Server 2005 instance. Moreover, later when we open the TableAdapter Configuration Wizard, you are asked to choose your data source, instead of choosing the Database.mdf file, you will need to click New Connection and create a connection to the SQL Server 2005 database you attached. (Of course, you can always download and install SQL Server 2005 Express Edition; it's free and can be installed side-by-side with other versions of SQL Server 2005...)

Open the Default.aspx page in source view and make the code between your <form> tags look like the following:

<form id="form1" runat="server">   <atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"/>   <atlas:UpdatePanel runat="server" ID="UpdatePanel1" Mode="Conditional">     <ContentTemplate>     </ContentTemplate>   </atlas:UpdatePanel>   </form>

We explained this code in the first example, so there shouldn't be anything here you don't understand.

Next, create a strongly-typed DataSet, during whose creation process you will be given the opportunity to automatically generate insert, update, and delete SQL statements. Exploring how the benefits of strongly-typed DataSets and the means by which to create them is beyond the scope of this article. To learn more about it, check out Scott Mitchell's Working with Data in ASP.NET 2.0 tutorial series.

To create your DataSet, start by selecting File / New File, choose DataSet, and click Add (leaving the DataSet named as DataSet1). You will then be asked if you would like to place the new file in the App_Code folder; that is best, so click Yes. You will then be taken to the DataSet Designer and the TableAdapter Configuration Wizard will display:

Make sure your Database.mdf file is selected from the drop down and click Next three times. It's now time to enter the SELECT statement which will be used to fill the DataSet with records from the database. Type the statement shown below, then click Next twice again, and finally Finish.

SELECT * FROM Employees

Our SELECT statement simply returns all the fields and records from the Employees table. Save the strongly-typed DataSet and then close the DataSet Designer.

Now that we are done setting up our DataSet, we can now turn our attention to binding it to an AJAX-enabled GridView. Switch now to the design view of your Default.aspx page and drag a GridView control into the UpdatePanel on the page. You will immediately see the GridView's smart tag pop up. Under "Choose Data Source" choose "New Data Source". You will then be presented with the Data Source Configuration Wizard. Choose "Object" and just leave the default ID, then click OK. On the next screen, you should see from the drop-down menu the TableAdapter we created named DataSet1TableAdapters.EmployeesTableAdapter. Select that item, click Next, and finally Finish.

We're almost there now! From the GridView's smart tag, check "Enable Paging", "Enable Sorting", and "Enable Editing". Last but not least, run the project. You should see output similar to the one pictured below.

Click around, testing out the sorting, paging, and editing functionality. Notice that all the normal functions of the GridView (i.e. paging, sorting, updating, etc...) are happening asynchronously! This example concludes our introduction to Atlas using ASP.NET 2.0.

Before I let you go though, I would like to just mention one last point. Most users, when interacting with a dynamic web page, are used to experiencing a postback, where the screen "flashes" and things start to load on the page again. It has traditionally been the way that a user knows something has happened. When those cues are removed with AJAX, it may be a good idea to give the user some sort of visual cue that the page is processing their action. One easy to implement way of doing this is to use one of Atlas' built-in server controls called UpdateProgess. You can add the control to any page and whenever an UpdatePanel posts back its data, whatever is inside the UpdateProgress <ProgressTemplate> tag, will display until the update is finished. You could even put an animated GIF in it, to cue the user that the page is processing.

<atlas:UpdateProgress ID="UpdateProgress1" runat="server">   <ProgressTemplate>     Please wait...   </ProgressTemplate> </atlas:UpdateProgress>

Conclusion
In this article we have seen just how easy it is now, using Microsoft's Atlas, to implement AJAX type functionality to your new or existing web applications. We have stepped through two examples: one demonstrating the basic concepts of AJAX and the Atlas framework, and the other demonstrating how we can place an ASP.NET server control, inside the proper Atlas server controls to AJAX-enable them. Hopefully, through this article I have helped to demystify AJAX and Atlas a little for you and have sparked your interest to investigate these technologies further.

Happy Programming!

By Erich Peterson

---

Attachments

Download the code samples examined in this article

Suggested Readings

Visit the Atlas Homepage

More Atlas Resources (Videos, Articles, WebCasts, and Books)

Building Interactive User Interfaces with Microsoft ASP.NET AJAX

Windows Internet Technology | ASP.NET [1.x] [2.0] | ASPMessageboard.com | ASPFAQs.com | Advertise | Feedback | Author an Article