Click here to Skip to main content
15,845,565 members
Articles / Web Development / ASP.NET

A Generic Way to Delay-load/Lazy-load Any Number of Control/s using UpdatePanel

Rate me:
Please Sign up or sign in to vote.
4.15/5 (5 votes)
7 Oct 2010CPOL2 min read 45.5K   772   22   8
Delay-loading using UpdatePanel


This article describes a very simple way to delay load any given section of a page, which is time-consuming. It puts the time intensive logic in an UpdatePanel and uses an UpdateProgress control to keep the user informed about the partial delayed loading of that section.


Here's how it appears when the updateProgress indicator is still working and we have the rest of the page loaded.


In the above screenshot, the 3 images show up when the page loads & the UpdateProgress spinning GIF image tells the user that the dotted section is still loading. After delay loading is all done, the LinkButton gets active and is ready to use.

Two advantages when using this technique:

  1. In this example, I am using just a linkButton in the UpdatePanel which would be delay-loaded. But this can be extended to any control or any UI-logic which can reside in that UpdatePanel. This makes it pretty generic and extensible. As an example, this similar approach can be applied on delay loading of any Tab contents in a ajaxToolkit:TabContainer control.
  2. Also to delay load this UpdatePanel, the logic doesn't use any hidden button OR Timer.
    It does a Postback on that UpdatePanel from clientside PageLoad.
    In the PreRender event of the UpdatePanel, based on the "EVENTTARGET" & "EVENTARGUMENT", it executes the postback. So this is another way to execute a server side code without using a hidden button. This concept can be applied elsewhere too.

Here's the client side part of the code:

<asp:UpdatePanel ID="upUpdatePanel" runat="server" UpdateMode="Conditional" 
        onprerender="upUpdatePanel_PreRender" >
        <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
        <br /> 
        <asp:LinkButton ID="LinkButton1" runat="server" Enabled="false" 
		ForeColor="Black" Font-Bold="true" Font-Size="Large" 
		onclick="LinkButton1_Click">LinkButton disabled so far</asp:LinkButton>
<asp:UpdateProgress ID="updProgressTab" runat="server" 
		AssociatedUpdatePanelID="upUpdatePanel" >
        <div style="position: relative; top: 50%; text-align: center;">
            <asp:Image ID="imgLoading" runat="server" 
		ImageUrl="simple.gif" Width="34px" Height="30px" />Refreshing...
<script language="javascript" type="text/javascript">
    function pageLoad(sender, e) {
        if (!e.get_isPartialLoad()) { 
            __doPostBack('<%= upUpdatePanel.ClientID %>', 'aaaa');

This line below ---

"if (!e.get_isPartialLoad())" -- makes sure the logic inside that If statement gets fired just once during the async process. something similar to server-side !IsPostback.
It uses any arbitrary EVENTARGUMENT string -- for example, I used "aaaa" -- to make sure that in the UpdatePanel pre-render event, this code gets executed just once.
It's worth mentioning here that UpdatePanel events like load, PreRender will be run for any postback, -- be it partial or regular.

Here's the PreRender event handler in codebehind:

protected void upUpdatePanel_PreRender(object sender, EventArgs e)
        if (Request["__EVENTTARGET"] == upUpdatePanel.ClientID && 
			Request.Form["__EVENTARGUMENT"] == "aaaa")
            LinkButton1.Enabled = true;
            LinkButton1.Text = "Enabled Now";

In this example, I kept the LinkButton present in the UpdatePanel, disabled till the delay-loading is completed. Once the delay load is done, the link-button is enabled.

That's all about it. Hope this was useful. I thank you for reading this article.


  • 7th October, 2010: Initial post


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By
United States United States

Comments and Discussions

QuestionIs that possible to delay UpdatePanel update on the client side? Pin
MonsterMMORPG9-May-16 8:51
MonsterMMORPG9-May-16 8:51 
QuestionLarger and larger post data Pin
gqqnbig9-Feb-16 11:41
gqqnbig9-Feb-16 11:41 
QuestionI would like to include this in DataList Pin
rImrose17-Aug-13 21:12
rImrose17-Aug-13 21:12 
QuestionThis will help you Pin
Nachiket Marathe5-Jul-12 20:53
Nachiket Marathe5-Jul-12 20:53 
QuestionReplay to article Pin
Nachiket Marathe5-Jul-12 20:44
Nachiket Marathe5-Jul-12 20:44 
GeneralSame code with multiple panels Pin
Shafaqat309_126-Jan-11 23:36
Shafaqat309_126-Jan-11 23:36 
GeneralRe: Same code with multiple panels Pin
Shafaqat309_129-May-11 6:09
Shafaqat309_129-May-11 6:09 
GeneralMy vote of 5 Pin
Eric Xue (brokensnow)7-Oct-10 16:43
Eric Xue (brokensnow)7-Oct-10 16:43 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.