This article covers the core concepts of AJAX and the features offered by the Atlas Framework. This article is based on the April Community Technology Preview (CTP) of Atlas and ASP.NET v2.0
A brief history of AJAX
The main drawback with web applications in comparison with thick client Windows applications is the constant need to refresh a page when new content is available. Often, only certain sections of a web page need to be refreshed, but the application refreshes the whole web page to ensure that all the data is presented. If an application could avoid these page refreshes the end user experience of web-based applications would be enhanced immensely. Avoiding constant refreshes also provides better application performance as full post backs are avoided.
Developers have tried various techniques over the years to achieve the goal of avoiding or reducing page refreshes. Seeing the importance of such a feature, Microsoft provided Microsoft Remote Scripting, which required the programmer to use a Java applet to achieve the capability. As technology evolved, Microsoft then introduced the XMLHTTPRequest object as part of its MSXML object library, which is Microsoft’s API for processing XML-based data. The implementation of the XMLHTTPRequest object was a joint development effort between the Outlook Web Access (OWA) Team and the Web Data team for SQL Server at Microsoft.
The XMLHTTPRequest object combines the power of XML and HTTP and allows an application to perform HTTP GET and POST operations from client scripts, and to retrieve data back from the server in XML format. XMLHTTPRequest also has the ability to make asynchronous calls – this prevents the user interface from locking up so the user can carry out operations on the page while another section is being updated.
With the inception of the .NET Framework, web services became a popular technique to expose functionality as consumable logic. A need arose for client applications to be able to consume web services while avoiding a full page submit to the server. Building on the capabilities of XMLHTTPRequest, Microsoft provided a HTML Control called the WebServices behavior. This HTML Control provided a way to consume web services from client side applications.
These advances led to the widespread use of XMLHTTPRequest in JavaScript for web applications, leading in turn to the development of different libraries and frameworks that wrap the XMLHTTPRequest and provide innovative ways of building richer and more interactive user interfaces for the web. These are now known as AJAX. AJAX is a technique for building rich and interactive web applications by leveraging client side technologies such as JavaScript and XML. The core components used in AJAX are illustrated in Figure 1.
Figure 1: AJAX, core components
Microsoft has now introduced its own offering in the form of “Atlas”, which is a framework that adds AJAX support to ASP.NET 2.0. Atlas is a free framework that Microsoft believes will help programmers to build richer and more interactive web applications.
The individual technologies that comprise Atlas have been available since the year 2000, and are de facto industry standards. Atlas provides added value in comparison to using these components individually, as it forms a framework that brings the components together and provides a comprehensive platform for building web applications based on AJAX techniques. The Atlas Framework provides controls that can be used in web applications without the user having to learn the intricacies of working directly with the XMLHTTPRequest object and its object model. This is a major advantage in terms of developer productivity.
Since Atlas is built as a layer on top of ASP.NET 2.0, the features of this framework are available to other applications that make use of ASP.NET 2.0, such as Microsoft Office SharePoint Server (MOSS) 2007. For example, the web parts infrastructure that is the essential foundation of SharePoint Server based applications can leverage the features of Atlas, so improving the user experience.
Atlas Framework – Core Concepts and Features
The Atlas framework is available as a free add-on to ASP.NET 2.0, and can be downloaded from atlas.asp.net. The Atlas framework comprises a client-side framework and a server-side framework. We’ll take a look at the server-side extensions provided by the Atlas Framework first.
Server Side Framework
* Atlas Server Controls: The Atlas Server Controls provide the infrastructure required to enable AJAX features on a web application by adding the required scripts etc.
* Bridges: This layer includes the various bridges that enable the consumption of services. This includes the following three types of bridges:
1. Application Services Bridge – The application services bridge enables the use of some of the application services such as the profile service available in ASP.NET 2.0 on the client side.
2. Web Services Bridge – This Bridge enables the consumption of web services from the client side. This includes support for Windows Communication Foundation (WCF) based services as well as regular web services.
3. Third Party Services Bridge – This is provided to enable any ISV to provide additional services.
The core components of the server-side and the client-side frameworks are illustrated in Figure 2.
Figure 2: The Atlas framework
Now we take a look at the client-side extensions provided by the Atlas framework.
Client Side Framework
* Atlas Components: The framework provides certain components for commonly used scenarios such as listview and dataview, which can be used in client scripts to render data based on templates.
* Component Model and UI Framework: the Component model provides a declarative scripting model known as the Atlas XML Script. This layer also provides support for features such as data binding on the client side.
* Base Class Library (BCL) and Networking Services: This includes a set of helper classes for developers and the necessary infrastructure required to make web service calls from client scripts.
* Core: This layer forms the core script engine. This provides a rich type system for JavaScript and provides some of the constructs such as Classes, Namespaces, interfaces and inheritance found in programming languages such as C#.
* Browser Compatibility: This layer enables cross-browser compatibility. The browsers currently supported include Internet Explorer, Firefox/Mozilla and Safari, implying that it is possible to use any of the Atlas features across any of these browsers.
Design Principles for building Atlas-based web applications
Atlas allows developers to build highly interactive and personalised web applications; however, good design is still required. In fact, new responsibilities come with new technologies and features, along with the requirement for developers to have an understanding of newer design principles and guidelines.
Before starting to write applications based on these new features, it is important that the developer be aware of some important guidelines. The guidelines for building AJAX-style applications are still evolving; however, the design principles as specified by Thomas Baekdal, a usability expert are outlined below:
1. Do not load entire pages
2. Know the difference between a web application and a web site
3. Do not break what the user is focusing on
4. Consider how to handle users that cannot use XMLHttpRequest
5. Do use it to eliminate confirmation pages
6. Do not use it to eliminate acceptance
7. Do not over-use it
Most of these are self-explanatory, and in-depth coverage of best practice design principles and guidelines is beyond the scope of this article. To get a good understanding of these guidelines I recommend reading the XMLHttpRequest Usability Guidelines compiled by Thomas Baekdal.
Atlas in Action
Once the user is familiar with the guidelines, they can start to build web applications based on Atlas. This article demonstrates some of the basic concepts involved in building Atlas-based web applications via the use of a demo application.
Firstly download and install the April CTP of Atlas Framework.
Start Visual Studio 2005 and open a new Atlas Web Application. The key item to notice once the project is created is that a new DLL, ‘Microsoft.Web.Atlas.dll” is included in the project.
In the demo application there are two separate sections on the same webpage that make use of partial rendering to display data in the respective sections. Each of these two sections are wrapped in two separate UpdatePanel controls provided by the Atlas Framework to achieve the goal of partial rendering. Each section uses an ASP.NET Repeater control to retrieve data from a table in the Database.
To keep the demo application simple, we will use the tables: Categories, Products, Regions and Territories from the Northwind Database, which is a sample database provided with Microsoft SQL Server.
STEP 1: The first step involved is to enable partial rendering. If you open the default.aspx page in the Design View, a ScriptManager control is present. This control is responsible for enabling the AJAX features on the web page. Select the ScriptManager tasks option and check Enable Partial Rendering as shown in Figure 3.
STEP 2: The next step is to add the UpdatePanel controls as illustrated in Figure 4.
The UpdatePanel controls represent the partial areas on the web page that will be refreshed. Based on the markup shown above, we have now divided the page into two sections.
STEP 3: We now add the standard ASP.NET functionality into each of these panels. Add a Dropdown to the first section and databind it to the Categories table in the NorthWind Database. This dropdown acts as a filter for this section. We also add a Repeater control. The data from the Products table is retrieved based on the category selected in the dropdown and populated in the Repeatercontrol. These are standard ASP.NET databinding features and hence I will not explain them here in detail. These controls are placed in the first UpdatePanel.
STEP 4: Add a dropdown to the second UpdatePanel and databind it to the Region table. A Repeater control is added and this is databound to the Territories table. Once the data-binding is complete, some simple coloring is added to give an elegant look to the UI. These controls are placed in the second UpdatePanel.
After carrying out these operations the UI should look like that shown in Figure 5.
STEP 5: The UpdatePanel control has a property called Mode that can be set to Conditional so that the specific panel is only rendered again based on a condition. Next we set the Mode property of both UpdatePanels to Conditional. The condition itself is specified within a Triggers tag of the UpdatePanel. The script is shown in Figure 6.
Figure 6: UpdatePanel Mode
The Mode property and the triggers tag are highlighted in red in Figure 6. We use the value in the dropdown lists within each panel as the trigger condition.
This implies that the first panel will refresh the data when the value in the first dropdown list (Category dropdown) changes and similarly the data in the second UpdatePanel will change when the value in the second dropdown list (Region dropdown) is changed.
STEP 6: Now we add an UpdateProgress control to the page. This is an important design principle to incorporate when building applications based on Atlas because you need to give some kind of feedback to users when data on the page changes.
UpdateProgress provides a visual cue to the user whenever any content on the page is updated. This is necessary in Atlas based applications since the page is not completely refreshed when we retrieve new data. Figure 7 shows the script used to add an UpdateProgress control.
Figure 7: UpdateProgress Control
The UpdateProgress control has a ProgressTemplate tag that contains the HTML markup displayed when data is loaded on the page.
STEP 7: Run the application. If you use any of the dropdowns to filter the data, you will notice that the data in the repeater control changes based on the filter, but no post back occurs. This provides a better browsing experience for the user.
Figure 8 shows the webpage with the UpdateProgress panel displaying the “Loading Data” text as data is updated.
Figure 8: Page displaying the UpdateProgress
From this sample, we can conclude that it is not a difficult task to migrate existing applications based on vanilla ASP.NET to Atlas and leverage the AJAX features provided by Atlas.
