Click here to Skip to main content
Click here to Skip to main content

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

, 7 Oct 2010 CPOL
Rate this:
Please Sign up or sign in to vote.
Delay-loading using UpdatePanel

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.

Loading22.PNG

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

  • 7th October, 2010: Initial post

License

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

Share

About the Author

simpledotnetsolutions

United States United States

http://simpledotnetsolutions.wordpress.com/

Comments and Discussions

 
QuestionThis will help you PinmemberNacx085-Jul-12 20:53 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.1411023.1 | Last Updated 7 Oct 2010
Article Copyright 2010 by simpledotnetsolutions
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid