Load page elements asynchronously using UpdatePanel and Timer

If you want to load your pages asynchronously element by element facebook-style to speed up the first display of the page your first choice would probably not be UpdatePanel but rather AJAX using jQuery or a similar framework.

Using updatepanels is however something that is almost always available in EPiServer projects without any modifications. So if you want to perform an asyncronous load in a single location using the “OOTB” controls, this is a way to do it:

Markup:

<asp:ScriptManager runat="server />
<asp:UpdatePanel runat="server" UpdateMode="Conditional" RenderMode="Inline">
    <ContentTemplate>
        <asp:Literal runat="server" ID="litData">Loading...</asp:Literal>
        <asp:Timer runat="server" Interval="1" OnTick="GetData" />
    </ContentTemplate>
</asp:UpdatePanel>

Codebehind:

protected void GetData(object sender, EventArgs e)
{
    var timer = sender as Timer;
    if (timer != null)
    {
        timer.Enabled = false;
        litData.Text = Loaded;
    }
}

You can use this technique in databound controls as well, that is where it really might prove interesting when loading several elements which each of them load slowly. In that case you can use the sender object (the timer) as an “entry point” to the control hierarchy to get the elements you want to update (i.e. use timer.Parent.FindControl to find siblings of the timer).

Of course you’d like to put some more interesting content in your panel when it loads, I’m just illustrating the principle. Two important things to note though:

• Be careful to disable the timer at the first call or it will continue loading the same data over and over.
• Note the properties of the UpdatePanel. By default it loads as a block element and you might not want that, so set it to render inline. The update must also be conditional or else you’ll get very strange behaviour.