How can I defer loading UpdatePanel content until after the page renders?

Question

Old hand at ASP.NET, new to the UpdatePanel. I have a reporting page which executes a fairly length SQL query... takes about 10 seconds right now. What I would like to do is have my page fully render, with some placeholder text (Loading...) and then have the UpdatePanel kick off the actual time-consuming reporting process and render the report when it's done.

So... my theory is to use RegisterStartupScript() to kick this off and drop the string from GetPostBackEventReference() to trigger the UpdatePanel update. Some problems crop up:

1) Can I actually use GetPostBackEventReference w/ the UpdatePanel or do I need to trigger it some other way? Use this method on a button inside the Update Panel?

2) What event gets triggered when the postback reference is the UpdatePanel? It's not clear to me. I've got to call my databinding code somewhere! Again, maybe I need to use a button inside?

Answer 1

I had to do something very similar recently, here's how i did it (right or wrong):

The trick is a "Hidden Async Postback Trigger".

<asp:UpdatePanel ID="upFacebookImage" runat="server">
   <ContentTemplate>
      <!-- Your updatepanel content -->
   </ContentTemplate>
   <Triggers>
      <asp:AsyncPostBackTrigger ControlID="hiddenAsyncTrigger" EventName="Click" />
   </Triggers>
</asp:UpdatePanel>
<asp:Button ID="hiddenAsyncTrigger" runat="server" Text="AsyncUpdate" style="display:none;" />

Then from JavaScript, whenever you want to trigger the async postback, you do this:

__doPostBack('<%= hiddenAsyncTrigger.ClientID %>', 'OnClick');

In my example, i needed to trigger an async postback from a particular JS event. But you could attach it to doc ready.

I seem to remember trying @Marko Ivanovski's way, but for some reason it didn't work. I think you need to specify a "postback-able" control (ie a button) to trigger the postback.

HTH.

Answer 2

Updating this with my solution, I pieced together mostly from the first answer above.

I need my page to load, then then start loading content for my update panel. The panel calls some webservices and we don't want the whole page to crash in the event that the remote server doesn't respond. We don't want the wait either.

My HTML:

<asp:UpdatePanel ID="udpCheckout" runat="server" UpdateMode="Always">
        <ContentTemplate>
            <asp:Image ID="imgSpinner" runat="server" Visible="true" ImageUrl="~/images/ajax-loader.gif" />
            <br />
            <asp:Label ID="lblWait" runat="server" Visible="true" Text="Please wait..."></asp:Label>
            <asp:Button ID="hiddenAsyncTrigger" runat="server" Text="AsyncUpdate" style="display:none;" />
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="hiddenAsyncTrigger" EventName="Click" />
        </Triggers>
    </asp:UpdatePanel>

My Code behind snippets:
In page_load:

ScriptManager.RegisterStartupScript(Me.Page, Me.Page.GetType, "LoadUpdate", GetPostBackEventReference(hiddenAsyncTrigger, String.Empty), True)

And the button handler:

Sub LoadUpdatePanels(ByVal o As Object, ByVal e As EventArgs) Handles hiddenAsyncTrigger.Click
        System.Threading.Thread.Sleep(5000)  'wait 5 seconds so I can see the page change
        imgSpinner.Visible = False
        lblWait.Text = "Content is now loaded."
        'udpCheckout.Update()
    End Sub

This was my test to see if I could get it working. Now to replace all of this with the real code!