Introduction to the Atlas Controls...

---

By: Brian Mains Date: May 3, 2006 Download the code. Printer Friendly Version

---

Introduction to the Atlas Controls

Atlas is a free framework to develop richer web applications using AJAX with ASP.NET. It provides a means to perform server-side callbacks using client-side scripting capabilities, update only a region of the page, and add additional UI capabilities such as dragging-and-dropping capabilities or an auto-suggestion textbox. Atlas renders a series of scripts with predefined actions and the greatest thing about the framework is that you don't necessarily need to code the javascript yourself; instead, Atlas has a series of server-side controls that render the functionality for you. However, there are means to still use javascript and XHTML to perform the updates, which isn’t very difficult to do. A few good overview articles of how AJAX and Atlas works are:

• http://atlas.asp.net/docs/
• http://developer.mozilla.org/en/docs/AJAX
• http://adaptivepath.com/publications/essays/archives/000385.php

In this article, I'm going to take a look at the basic components that can be used to create a simple, yet rich interface. In order to use Atlas, you have to download the latest toolkit available at http://atlas.asp.net. Follow the installation program to the end, which will create a new template in your Visual Studio 2005 or Visual Web Developer software, called the “Atlas Web Site” template. In addition to the IIS extension, this update installs a bunch of client-side scripts and a Microsoft.Web.Atlas.dll (server-side controls and code) in the c:\program files\Microsoft ASP.NET\Atlas folder. When you create a new Atlas web site, the Microsoft.Web.Atlas.dll is added by default and the web.config file has all of the necessary definitions for Atlas to work, which there are quite a few.

In this example, I will be using this subset of controls:

• ScriptManager – This manager is similar to the WebPartsManager class in that it is required to be in the page, one of the first controls rendered. It manages the client-side scripts used in the application. It also enables partial page rendering.
• UpdatePanel – This panel marks a section of the page that can receive updates to it via client script, instead of refreshing the whole page.
• ControlEventTrigger – This trigger refreshes an update panel whenever the control, specified by the ControlID property, has its event, specified by the EventName property, fired. More on this later.
• UpdateProgress – This control renders a predefined template of HTML in the screen that appears whenever there is a delay in the web site, such as retrieving a large amount of data from the database.
• TimerControl – This control is a timer that fires a Tick event whenever a certain interval of time elapses. It is a great control to use when you need to refresh certain content, such as stock information or other real-time data.

The ScriptManager control is the root of all controls, similar to the WebPartManager control. It must be defined first, and renders links to a bunch of Atlas scripts that are necessary for the framework. In order for only the update panel to update through client-side script, we must set EnablePartialRendering to true, as in the following designation. Otherwise, the whole page will refresh.

The concept I'm using is a simple search form that searches for results in a database; the page has a textbox and linkbutton control. I’m simply querying the sys.objects table from the master database where the text in the textbox matches any part of the object name in the table. The results are then returned a gridview, which is stored in an update panel.

The panel that contains the gridview updates on two occasions; when the linkbutton is clicked, and when a timer control's time has elapsed. Ignore the second trigger; let's focus on the first one. This update panel reacts to a click event for the linkbutton without requiring any code! The click event refreshes the update panel without refreshing the page. The data source is dependent on the text in the textbox (through a ControlParameter), so whatever results match the text will be returned in the gridview. Furthermore, events within the gridview, like paging and sorting, all happen without refreshing the page also.

Keep in mind that the gridview does support client-side paging and sorting callbacks, which we could use instead of the Atlas framework; however, it wouldn’t be as dynamic and wouldn't support dynamic updating through the partial page rendering when doing the search, as well as support for the timer refreshes (more on this later).

You can still define an event handler for the button without any problems. In fact, I have an event handler defined to illustrate the next function. The linkbutton click event handler delays the processing of the event for five seconds so that the UpdateProgress control illustrates its “please wait” message. This control defines a template, so any code could be used: an image, an embedded movie, text, etc.

I was shocked at first because I didn't know how the UpdateProgress control was shown on the screen when there was a delay, but there isn't any need to define something. The framework knows to show it whenever there is a delay in processing. You will see it when you perform events like paging or sorting, where there may even be a small delay. In the example attached, you will see how this control works effortlessly.

The last control is a timer control, which specifies an interval period in milliseconds. Whenever the time elapses, a Tick event fires. It is easy to create a ControlEventTrigger based on this event that will refresh the content at a repeated interval, making it a great way to incorporate more real-time data, such as stock or news information. Only a portion of the page will have to be rendered. In this example, the gridview we populated with the search will be refreshed every 20 seconds. While this may not be the most useful here, it illustrates the concept of the TimerControl control.