Creating Atlas Update Panels

I am in the middle of a project and am using Atlas UpdatePanels which I thought would make for a good post. Atlas is the codename for Microsoft's AJAX framework.

First off go to the official Atlas website: download the framework and install it. Open visual studio and in your list of project templates you will see "Atlas Web Site".



Provide a path for the project and click OK. Once created go the the project explorer and delete the readme.txt and eula.rtf files. If you look at the web.config file you will notice that there is a lot of new things added. Also you will find Microsoft.Web.Atlas.dll in your bin folder.

Now open the Default.aspx file in source mode. You can delete the script block at the bottom. Find the atlas:ScriptManager control and set EnablePartialRendering to true like this:

<atlas:scriptmanager id="ScriptManager1" runat="server" enablepartialrendering="true"/>

This will let us update content panels without posting back. In your page add a Button control with an OnClick event which we will be using later. Just below the button add an Atlas UpdatePanel. If you type "<atlas:" you will see all of the available Atlas controls. Your UpdatePanel should look something like this:

<atlas:updatepanel id="UpdatePanel1" runat="server">
</atlas:UpdatePanel>

Within your update panel type an open carrot ("<") and you will see the intellisense come up with two tags: "ContentTemplate" and "Triggers". Everything placed within the ContentTemplate we will be able to update. This is where we will put all of our asp controls. The Triggers tag is where we will catch events which will cause our UpdatePanel to be updated. I like to add my triggers first so it is easy to locate.

Within the Triggers tag type an open carrot again. You will see two tags come up. We will be using atlas:ControlEventTrigger. This control has two properties: ControlID and EventName. Set the ControlID to the ID of the Button control we created earlier. Set the EventName to "Click".

After the Triggers tag add the ContentTemplate tag and put a Label control within it. So far your code should look something like this:

<atlas:scriptmanager id="ScriptManager1" runat="server" enablepartialrendering="true"/>
<asp:button id="Button1" runat="server" text="Show me the money!" onclick="Button1_Click">
<atlas:updatepanel id="UpdatePanel1" runat="server">
<triggers>
<atlas:controleventtrigger controlid="Button1" eventname="OnClick">
</triggers>
<contenttemplate>
<asp:label id="Label1" runat="server" text=""></asp:Label>
</contenttemplate>
</atlas:UpdatePanel>

Now we are ready to add some functionality. In our Button OnClick event add something like this: (I used a C# code behind file)

Label1.Text = String.Format("{0:c}", DateTime.Now.Ticks);

Save everything and view your page in a browser. When you click the button it will update the label without posting back. Thats it! Play around with it and be creative. You will find other uses for your update panels.

The source code for this example can be downloaded here.