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

• Download example - 1.35 KB

Introduction

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.

Background

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" >
    <ContentTemplate>
        <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>
    </ContentTemplate>
 </asp:UpdatePanel>
<asp:UpdateProgress ID="updProgressTab" runat="server" 
		AssociatedUpdatePanelID="upUpdatePanel" >
     <ProgressTemplate>
        <div style="position: relative; top: 50%; text-align: center;">
            <asp:Image ID="imgLoading" runat="server" 
		ImageUrl="simple.gif" Width="34px" Height="30px" />Refreshing...
        </div>
     </ProgressTemplate>
</asp:UpdateProgress>
<script language="javascript" type="text/javascript">
    function pageLoad(sender, e) {
        if (!e.get_isPartialLoad()) { 
            __doPostBack('<%= upUpdatePanel.ClientID %>', 'aaaa');
        }
    }
</script>

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")
        {
            System.Threading.Thread.Sleep(6000);
            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.

History

• 7^th October, 2010: Initial post