A Quick Exploration of the Atlas UpdatePanel control...

By: Brett Burch Spacer Date: June 10, 2006Spacer Printer Friendly Version

I've been messing around with Atlas a bit and think the Update Panel server control is what I'm looking forward to most. This article is a brief introduction to the Update Panel control, and only touches the most basic aspects of the Update Panel and Atlas.

Essentially I want to show how easy it was for me to set up an AJAX enabled page that swaps UserControls in a Placeholder control by clicking a LinkButton. The sample shows a prototype that could be built into a tabbed (Yahoo-esque?) interface for viewing data about a customer by your favorite customer service representative. The actual web form itself is very simple. The code below shows the web form.

<form id="form1" runat="server">

    <div>

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

 

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

            <ContentTemplate>

                <uc1:TabbedAccountDashboard ID="TabbedAccountDashboard1" runat="server" />

            </ContentTemplate>           

        </atlas:UpdatePanel>   

    </div>

</form>

The only code on the actual page of relevance is the Update Panel which has my "Sales Dashboard" user control in it and the ScriptManager server control, which adds the Atlas JavaScript file references to the HTML output delivered to the browser.

The User Control itself contains the "tabs" and the content-swapping code. There are a set of LinkButtons on the top which would become the tabs. A placeholder below is the container for the UserControls which are then swapped out based on the currently viewed tab.

<div id="primary-nav">
    <ul>
        <li id="acctsum"><asp:LinkButton runat="server" ID="lbAccountSummary" CommandArgument="AccountSummary.ascx" Text="Account Summary" OnClick="lbAccountSummary_Click"></asp:LinkButton></li>
        <li>&nbsp;|&nbsp;</li>
        <li id="act"><asp:LinkButton runat="server" ID="lbActivities" CommandArgument="Activities.ascx" Text="Activities" OnClick="lbActivities_Click"></asp:LinkButton></li>
        <li>&nbsp;|&nbsp;</li>
        <li id="notes"><asp:LinkButton runat="server" ID="lbNotes" CommandArgument="Notes.ascx" Text="Notes" OnClick="lbNotes_Click"></asp:LinkButton></li>
        <li>&nbsp;|&nbsp;</li>
        <li id="tix"><asp:LinkButton runat="server" ID="lbTickets" CommandArgument="Tickets.ascx" Text="Tickets" OnClick="lbTickets_Click"></asp:LinkButton></li>
    </ul>
</div>
...
<div style="padding:3px;">
    <asp:PlaceHolder ID="placeholder" runat="server"></asp:PlaceHolder>   
</div>

I use the LinkButton CommandArgument property to declare the UserControl of choice to render in the Placeholder. The server-side events that are called when a user clicks a LinkButton are shown below.

public partial class dotnet_atlas_TabbedAccountDashboard : System.Web.UI.UserControl

{

    protected void Page_Load(object sender, EventArgs e)

    {

        if (!this.IsPostBack) this.LoadPlaceholderWithContent("AccountSummary.ascx");

    }

 

    protected void lbAccountSummary_Click(object sender, EventArgs e)

    {

        this.LoadPlaceholderWithContent(((LinkButton)sender).CommandArgument);

    }

 

    protected void lbActivities_Click(object sender, EventArgs e)

    {

        this.LoadPlaceholderWithContent(((LinkButton)sender).CommandArgument);

    }

 

    protected void lbNotes_Click(object sender, EventArgs e)

    {

        this.LoadPlaceholderWithContent(((LinkButton)sender).CommandArgument);

    }

 

    protected void lbTickets_Click(object sender, EventArgs e)

    {

        this.LoadPlaceholderWithContent(((LinkButton)sender).CommandArgument);

    }

 

    /// <summary>

    ///

    /// </summary>

    /// <param name="SenderCommandArgument"></param>

    private void LoadPlaceholderWithContent(string SenderCommandArgument)

    {

        Control ctrl = this.LoadControl(SenderCommandArgument);

        this.placeholder.Controls.Add(ctrl);

    }

}

All the above code can be written and executed on the server, but the client does not have to PostBack and refresh the entire page in order to be updated. To compare the difference, view the side-by-side comparison. The content user controls merely contain static HTML in this example, so the performance difference is negligible. If, however, there was code in each of the User Controls that queried a database and dynamically generated their content, the difference would be quite noticeable to the end user.