An Introduction to AJAX and Atlas with ASP.NET 2.0By 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.
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
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
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
If you want to learn about what all this markup means, check out the Atlas documentation
Lastly, if you view the source of the
Default.aspx page you will see Atlas has added a new server control declaration:
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
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:
Place those ASP.NET controls that participate in the asynchronous postback within 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:
- The UpdatePanel's
Update()method is called explicitly
- An UpdatePanel event causes the
Update()method to be called implicitly
- A server control that is inside the UpdatePanel causes a postback
Modeattribute, 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
(you could also add this to the page's code-behind class, if you'd rather):
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
AtlasSecondExamplefolder you will find the database file named
Database.mdf. Copy that file into your newly created website's
|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 |
Default.aspx page in source view and make the code between your
<form> tags look
like the following:
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
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
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 statement simply returns all the fields and records from the
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
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.