Magnus Rahl
Aug 20, 2010
  8904
(0 votes)

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.
Aug 20, 2010

Comments

Lars Flågan
Lars Flågan Sep 21, 2010 10:33 AM

using the update panel for this sort of functionality is not wise. Have a look at jQuery and jTemplates.

Magnus Rahl
Magnus Rahl Sep 21, 2010 10:33 AM

As I stated in the beginning of the post jQuery or similar would be a better choice. This is to be seen as an alternative second-best approach.

Please login to comment.
Latest blogs
What’s next after Google Optimize’s sunsetting?

Google has announced that it is sunsetting the Google Optimize and Optimize 360 services, forcing customers to explore new platforms and invest in...

Ynze | Jan 31, 2023 | Syndicated blog

What’s next after Google Optimize’s sunsetting?

Google has announced that it is sunsetting the Google Optimize and Optimize 360 services, forcing customers to explore new platforms and invest in...

Ynze | Jan 31, 2023 | Syndicated blog

Migrating from Providers to CMS 12 ASP.NET Identity with cookie tweaks

Notes on migrating a multi-site from Membership and Role Providers to ASP.NET Identity and changing cookie options dynamically.

Johan Kronberg | Jan 30, 2023 | Syndicated blog

Integrating generative AI in Optimizely CMS: A quick test with OpenAI

Some of the new AI services have received a lot of attention recently. Can you integrate them in Optimizely CMS? Of course, you can!

Tomas Hensrud Gulla | Jan 30, 2023 | Syndicated blog