Atlas Update Panels - Part 1

Hi all !

Today, my chief stopped by with a big smile on his face. “Koen, I’ve created a wonderful ASP.NET site. It provides easy update forms, dynamic drop down boxes… Only one thing: it flashes so hard that an epileptic guy would go crazy on it. Can you help me?”

Now it was my turn to smile :-). The reason why it flashes is that asp.net uses postbacks. Those postbacks push and retrieve entire pages to the webserver. As a result, you see the screen “clean up” and a second or so later, you can see it rebuilding.

It would be great if there was a technique that only postbacks the part which is relevant, the part that changes. But hey, such a thing already exists: AJAX. AJAX stands for Asynchronic JavaScript And Xml. The idea behind AJAX, in a nutshell, is exactly what we described above.

Microsoft wraps this technology in what they call ‘Atlas’. Atlas is eventually a collection of free-to-use javascripts. Those javascripts are shown in visual studio as components, which you can drag&drop.

I’ll discuss all the useful components in later posts, but for now, I want to focus on the UpdatePanel and UpdateProgress.

If you place an update panel on your site, you can tell asp.net that when (eg. ) I click a certain button, only that specific content needs to be updated. The way to tell this, is via a trigger.

Take a look at this example : Open Image

As you van see I created a basic form. Just one list box and one textbox, where I can enter some values. No more, no less. (I’ve put some code behind the button, but that isn’t important for now because we only focus on the ajax-part, which is pure html). If you really want to see the “flashes”, add some color to the background.

When you want to use the Atlas functionallity, you need to add the Atlas control (which you can find in the Microsoft.Web.Atlas.dll), or you can install the Microsoft Atlas pack, available on the microsoft website or via http://ajax.asp.net .

Now for the fun part.

To avoid the postbacks, we need to add an update panel. If you have installed the atlas pack, you’ll see an UpdatePanel component in your toolbox. Drag this on your form and give it a proper name (eg: upnlData). Then, drag your listbox, textbox and “new value”-text in this update panel. Also, you need to add the scriptmanager. This component must appear before the update panel or any other atlas-component in general. I’ll explain this manager later on.

If you have done all this, you should see something like this :
Open Image

Now we need to tell the panel that it should update its content only when I push the button. So when I push the add-button, only the content in the panel is updated, the title or other elements remain untouched.

To teach the panel this update-rule, we need to add a so called “trigger”. I’ll show you the html code later on, but let’s first do it the UI way. If you examine the properies of this updatepanel, you’ll find one called ‘Triggers’. Open this by clicking the triple-point button. You’ll get this window : Open Image

When you click "new trigger", the following appears : Open Image

You can create a trigger the fires when a control throws an event (eg : the click-event for a button) or when some property of a control changes its value (eg : the text-property of a button). In this case, we want to fire the trigger after a user clicks the add-button. So this is what you should enter : Open Image

There is only one thing left to configure. Remember the ScriptManager I told you to add? Well, this scriptmanager does all the work actually. We need to tell it that we want this page partionally rendered. To do this, set the EnablePartialRendering-option to true.

In later posts, I’ll explain in-depth the goal of the scriptmanager, but remember for now that this manager “manages”, delegates and organises all the atlas related things, and that it should always be added to an atlas-enabled page. Also, it must appear before any other atlas-component!

Well, I think we’re ready now. Just run the page and see for yourself! :)

As you can see, it’s not much effort to make a page ajax enabled !


See you at the next post!

Gr, K