Async UpdatePanel On Page Load : The Official Microsoft ASP.NET Forums

Reply

jrp210

Member

20 Points

Async UpdatePanel On Page Load

Mar 06, 2008 03:33 AM|LINK

I have several update panels loading data from web services when a page loads. The web service calls take several seconds and I would like to display the page but then kickoff the loading of the data into the UpdatePanels asyncronously. Does the UpdatePanel support async page loads without using a button trigger event?

I have seen many demos in which a button is used to trigger the update but in my case I need the UpdatePanels to load when the page loads along with the UpdateProgress displaying a "Data Loading " message.

Thanks,

Jason

Reply

DisturbedBud...

Star

11523 Points

1911 Posts

Re: Async UpdatePanel On Page Load

Mar 06, 2008 03:03 PM|LINK

This will do what you want. It does use a single, hidden button to trigger the load of the various UpdatePanels. What it does is, initially, each updatepanel contains a panel with visible="false". This way, the contents of those panels are not rendered to the page, allowing the entire page to load. When the page is loaded, the pageLoad event clicks the hidden button which makes the panels (as well as their contents) visible. Each would load at its own rate. I did not include any UpdateProgress controls in my example, but they would display as normal if included.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" %>
<%@ Register Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI" TagPrefix="asp" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <script language="javascript" type="text/javascript">
        function pageLoad() {
            document.getElementById('<%= Button1.ClientID %>').click();
        }
    </script>
    <script runat="server">
        Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
            ' Delay added for effect:
            System.Threading.Thread.Sleep(2000)
            Panel1.Visible = True
            Panel2.Visible = True
            Panel3.Visible = True
        End Sub
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        Initial, visible content.
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <asp:Panel ID="Panel1" runat="server" Visible="False">
                    Panel 1 Contents</asp:Panel>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Button1" />
            </Triggers>
        </asp:UpdatePanel>
        <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <asp:Panel ID="Panel2" runat="server" Visible="False">
                    Panel 2 Contents</asp:Panel>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Button1" />
            </Triggers>
        </asp:UpdatePanel>
        <asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <asp:Panel ID="Panel3" runat="server" Visible="False">
                    Panel 3 Contents</asp:Panel>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Button1" />
            </Triggers>
        </asp:UpdatePanel>
        <asp:Button ID="Button1" runat="server" style="display:none;" />
    </form>
</body>
</html>

When you ask a question, remember to click "mark as answered" when you get a reply which answers your question.

My latest ASP.NET AJAX blog entries.

Marked as answer by jrp210 on Mar 06, 2008 03:52 PM

Reply

jrp210

Member

20 Points

108 Posts

Re: Async UpdatePanel On Page Load

Mar 06, 2008 03:52 PM|LINK

Thanks, I did something similar using the Timer control. Basically enabled a timer when the page loads and had the timer kick off the loading of the panel.

Marked as answer by jrp210 on Mar 06, 2008 03:52 PM

Reply

jrp210

Member

20 Points

108 Posts

Re: Async UpdatePanel On Page Load

Mar 06, 2008 08:40 PM|LINK

Ran into a bit of a snag. I was hoping the two timers would start at the same time so the panels would load simultaneously, but that doesn't seem to be the case. The first timer runs and displays the Update Progress "Loading..." and then displays the content. The second panel is refreshed after the first one is completed and it doesn't show the Update Progress while waiting.

Is there a way to load them both at the same time?

Thanks.

Reply

DisturbedBud...

Star

11523 Points

1911 Posts

Re: Async UpdatePanel On Page Load

Mar 06, 2008 08:44 PM|LINK

Can you post your (simplified) source code?

When you ask a question, remember to click "mark as answered" when you get a reply which answers your question.

My latest ASP.NET AJAX blog entries.

Reply

jrp210

Member

20 Points

108 Posts

Re: Async UpdatePanel On Page Load

Mar 07, 2008 03:26 AM|LINK

DisturbedBuddha

Can you post your (simplified) source code?

I simplified things a bit by putting each content category into a user control widget which is then called by the default.aspx page. The updatepanels are still updating one at a time but by me using mutliviews it looks like they are starting at the same time

Default.aspx:

<body>

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" LoadScriptsBeforeUI="true"></asp:ScriptManager>

<div>

<tr>

<asp:UpdatePanel ID="up" runat="server" UpdateMode="Conditional">

<uc1:FactivaNews ID="News" runat="server" />

</ContentTemplate>

</asp:UpdatePanel>

</td>

<asp:UpdatePanel ID="up0" runat="server" UpdateMode="Conditional">

<uc2:AnalystReports ID="AnalystReports" runat="server" />

</ContentTemplate>

</asp:UpdatePanel>

</td>

<asp:UpdatePanel ID="up1" runat="server" UpdateMode="Conditional">

<uc3:SignificantDevelopments ID="SignificantDevelopments" runat="server" />

</ContentTemplate>

</asp:UpdatePanel>

</td>

</tr>

</table>

</div>

</form>

</body>

This is a snapshot of the Analyst Reports .ascx:

<asp:MultiView ID="mvAnalystReports" runat="server" ActiveViewIndex="0">

<asp:View ID="vAnalystReportsProgress" runat="server">

<img alt="" src="Images/indicator.gif" style="width: 16px; height: 16px" /><asp:Label

ID="label1" runat="Server" Font-Size="smaller" ForeColor="DimGray"

Text=" Loading Analyst Reports..." />

</asp:View>

<asp:View runat="server" ID="vAnalystReports">

<asp:DataList ID="dlAnalystReports" runat="server">

<a href="<%# DataBinder.Eval(Container.DataItem, "CitationURL")%>" target="_blank" ><%# DataBinder.Eval(Container.DataItem, "Source")%></a><br /></div>

</ItemTemplate>

</asp:DataList>

</asp:View>

</asp:MultiView>

<asp:Timer ID="AnalystReportsTimer" runat="server" onTick="LoadAnalystReports" Interval="1">

</asp:Timer>

I would like for all three to kick off at the same time (asyncronously) but I can't seem to do it. Pageflakes.com does something similar but not sure how it is done. Any help would be much appreciated.

Edited by jrp210 on Mar 08, 2008 07:18 PM
Edited by jrp210 on Mar 09, 2008 07:02 AM

Reply

Jonathan She...

All-Star

31269 Points

3445 Posts

Re: Async UpdatePanel On Page Load

Mar 12, 2008 07:59 AM|LINK

Hi Jrp20,

You'd better add a loading gif in your UpdatePanel instead of the UpdateProgress. When the UpdatePanel is refreshed, we remove the images. Here is the whole sample, please wholly copy my sample to your project.

<%@ Page Language="C#" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<script runat="server">
    

    protected void Page_Load(object sender, EventArgs e)
    {
        if (ScriptManager1.IsInAsyncPostBack)
        {
            System.Threading.Thread.Sleep(3000);
            if (Panel1.Controls.Contains(Image1))
            {
                Panel1.Controls.Remove(Image1);
                Image1.Dispose();
            }
            if (Panel2.Controls.Contains(Image2)) {
                Panel2.Controls.Remove(Image2);
                Image2.Dispose();
            }


        }
    }
</script>


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <%=DateTime.Now.ToString() %>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always">
        <ContentTemplate>
            <%=DateTime.Now.ToString() %>
            <asp:Panel ID="Panel1" runat="server">
                <asp:Image ID="Image1" runat="server" ImageUrl="~/pic/25-1.gif" />
            </asp:Panel>
        </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Always">
        <ContentTemplate>
            <%=DateTime.Now.ToString() %>
            <asp:Panel ID="Panel2" runat="server">
                <asp:Image ID="Image2" runat="server" ImageUrl="~/pic/25-1.gif" />
            </asp:Panel>
        </ContentTemplate>
    </asp:UpdatePanel>
    <script type="text/javascript" language="javascript">
            var firstFlag = true;
            Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
            function pageLoad(){
                if(firstFlag)  __doPostBack("UpdatePanel1","");
            }
            function BeginRequestHandler(sender, args){
                firstFlag = false;
            }
    </script>


    </form>
</body>
</html>

Best regards,

Jonathan

Please mark the replies as answers if they help or unmark if not.
If you have any feedback about my replies, please contact msdnmg@microsoft.com.
Microsoft One Code Framework

Edited by Jonathan Shen – MSFT on Mar 12, 2008 08:03 AM

Reply

alexdive

Member

2 Points

7 Posts

Re: Async UpdatePanel On Page Load

Sep 30, 2008 12:54 PM|LINK

Sorry, the solution posted will cause an infinite pageLoad loop in Firefox. IE will hand this more gracefully, but eventually the solution marked as correct is not firefox compatible. if anybody has found a better solution, I am really looking forward to read it! thanks

Reply

Jonathan She...

All-Star

31269 Points

3445 Posts

Re: Async UpdatePanel On Page Load

Oct 01, 2008 01:41 AM|LINK

Hi Alexdive,

I have copied your code and have a test. It works pretty here. I have tested on Firefox 3.03, IE6, IE7 and IE8.

Best regards,

Jonathan

Please mark the replies as answers if they help or unmark if not.
If you have any feedback about my replies, please contact msdnmg@microsoft.com.
Microsoft One Code Framework

Reply

lgranata

Member

2 Points

1 Post

Re: Async UpdatePanel On Page Load

Jan 20, 2010 10:49 AM|LINK

Hi, I've tested the code and its true, with Firefox 3.0.11 I was having some looping issues.

I have solved it by the following way, adding a line in the script block (bold one), so the script block looks like the following:

Maybe there is a more elegant approach, but this do the trick for me

I've tested in Firefox, IE6 and Chrome without problems

Cheers

Leo

Edited by lgranata on Jan 20, 2010 10:51 AM
Edited by lgranata on Jan 20, 2010 10:52 AM
Edited by lgranata on Jan 20, 2010 11:19 AM

Async UpdatePanel On Page Load RSS

9 replies

jrp210

Async UpdatePanel On Page Load

DisturbedBud...

Re: Async UpdatePanel On Page Load

jrp210

Re: Async UpdatePanel On Page Load

jrp210

Re: Async UpdatePanel On Page Load

DisturbedBud...

Re: Async UpdatePanel On Page Load

jrp210

Re: Async UpdatePanel On Page Load

DisturbedBuddha

Jonathan She...

Re: Async UpdatePanel On Page Load

alexdive

Re: Async UpdatePanel On Page Load

Jonathan She...

Re: Async UpdatePanel On Page Load

lgranata

Re: Async UpdatePanel On Page Load

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft