Basic introduction to the Atlas UpdatePanel

Introduction

Welcome! I have left adopting Atlas far too late as far as I'm concerned. It is so powerful and yet so easy. I didn't have a lot of time on my hands, so I thought getting to use this new technology would require a lot of my time and it didn't.

This article will give you a quick jumpstart into the amazing world of Atlas!!!

Let's do it!

1. Download Atlas, it's a 2.2 MB file so I doubt the boss will mind ;) Download here.
2. Reference the Microsoft.Atlas DLL.
3. Check to see if the Atlas Tools are added to your toolbox; if not, then right click your Toolbox and click Choose Items and just browse to the Atlas DLL.

Now comes the fun part.

Starting with Atlas

Drag and drop the ScriptManager tool onto your webpage. It'll create the following code:

<atlas:ScriptManager runat="server" ID="">

Then, all you do is set the following:

• Set EnablePartialRendering="true"
• Give the UpdatePanel an ID

Your tag should look something like this now:

<atlas:ScriptManager runat="server" EnablePartialRendering="true" ID="updateManager">

Great, step one complete. Remember, when using any Atlas control, you must have a ScriptManager on that page!

Creating an UpdatePanel

Now, drag and drop the UpdatePanel onto your form.

It'll create the following code:

<atlas:UpdatePanel ID="" runat="server">
</atlas:UpdatePanel>

Again, give it an ID, then set its Mode to Conditional so your tag should look like this:

<atlas:UpdatePanel ID="atlasPanel" runat="server" RenderMode="Inline" Mode="Conditional">
</atlas:UpdatePanel>

Now, the content for this panel must be entered as normal ASP.NET between ContentTemplate tags, so it should look like this now:

<atlas:UpdatePanel ID="atlasPanel" runat="server" RenderMode="Inline" Mode="Conditional">
  <ContentTemplate>
  </ContentTemplate>
</atlas:UpdatePanel>

So for example, you have two drop downs in the ContentTemplate. The first drop down being a set of countries and the second being a set of provinces or states.

<atlas:UpdatePanel ID="atlasPanel" runat="server" RenderMode="Inline" Mode="Conditional">
    <ContentTemplate>
          <asp:DropDownList ID="drpCountry" runat="server" 
              DataTextField="DESCRIPTION" 
              DataValueField="PK" AutoPostBack="True">
          </asp:DropDownList>
          <asp:DropDownList ID="drpProvince" runat="server" 
              DataTextField="DESCRIPTION" 
              DataValueField="PK" AutoPostBack="True">
          </asp:DropDownList>
    </ContentTemplate>
</atlas:UpdatePanel>

So, when the user selects a different country, the province drop down reloads. Now usually, you'd have a postback to the server and the whole screen would reload. Not anymore. Simply select a different country; now, the provinces magically change without the postback.

Additional events to update your panel

The second part of the magic is, let's say, you have a button on the form somewhere that reloads both dropdowns, all you need to do is add a trigger to the UpdatePanel as follows:

<atlas:UpdatePanel ID="atlasPanel" runat="server" RenderMode="Inline" Mode="Conditional">
  <ContentTemplate>
    <asp:DropDownList ID="drpCountry" runat="server" 
      DataTextField="DESCRIPTION" DataValueField="PK" AutoPostBack="True">
    </asp:DropDownList>
    <asp:DropDownList ID="drpProvince" runat="server" 
      DataTextField="DESCRIPTION" DataValueField="PK" AutoPostBack="True">
    </asp:DropDownList>
  </ContentTemplate>
  <Triggers>
    <atlas:ControlEventTrigger ControlID="btnReload" EventName="Click" />
  </Triggers>
</atlas:UpdatePanel>

and still no postback of the form!!!

Conclusion

Get started using Alas people, it's fun, it's free, it's easy, and besides, such a performance boost is bound to get you some brownie points from the boss and the clients!