javascript - 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.