World is now on Opti ID! Learn more

Magnus Rahl
Aug 20, 2010
  9577
(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

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
Troubleshooting Optimizely Shortcuts: Why PageShortcutLink Threw an Error and the Solution

As developers working with Optimizely, we often encounter unique challenges that push us to explore the platform's depths. Recently, I tackled a...

Amit Mittal | Jul 9, 2025

Commerce 14.41 delisted from Nuget feed

We have decided to delist version 14.41 of the Commerce packages as we have discovered a bug that prevents current carts to be saved into...

Shahrukh Ikhtear | Jul 8, 2025

How Optimizely SaaS CMS Isn’t Just Another Commodity

CMS platforms these days are becoming commoditised. The modelling of most systems lends itself to automation. Giving marketers more flexibility wit...

Chuhukon | Jul 4, 2025 |

How to Set Up CI/CD Pipeline for Optimizely Frontend Hosting Using GitHub Actions

As I promised in my previous blog post about getting started with Optimizely Frontend Hosting, today I’m delivering on that promise by sharing how ...

Szymon Uryga | Jul 2, 2025