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

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!

Answer 3

Simplifying RPM1984's very helpful earlier answer (thanks ;)) and showing some tweaks & a little more of the surrounding detail that I found necessary:

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

<asp:UpdatePanel ID="upFacebookImage" runat="server">
    <ContentTemplate>
        <asp:PlaceHolder runat="server" ID="PlaceHolderMediaPrompts" />
        <asp:Button ID="hiddenAsyncTrigger" runat="server" Text="AsyncUpdate" OnClick="WasPage_Load" style="display:none;" />
    </ContentTemplate>
</asp:UpdatePanel>

Note:

1. The hidden button's vital OnClick= parameter, this is what specifies the server function to call!

2. No trigger clause or triggers in the Update-panel, I am using the child controls which are automatically triggers - specifically the button Click event.

And to trigger it from client-side Javascript you can use:

document.getElementById("hiddenAsyncTrigger").click‌​();

However, I found it necessary to prevent this being called on subsequent page loads (as it caused unnecessary page load looping & consequent flicker). See the neat little IsPostBack() check below :)

e.g. To invoke this after page load (as per the original question), I just added a call to invoke the above line of code as the onload-parameter to the main Body-tag thus:

<body onload="DoPostLoad();">
...  
    <script type="text/javascript">
        function DoPostLoad()
        {
            if ( IsPostBack() != true ) // ***This is NEW and ESSENTIAL! ***
                document.getElementById("hiddenAsyncTrigger").click();
        }

        function IsPostBack() { // Ref. https://stackoverflow.com/questions/26978112/execute-javascript-only-on-page-load-not-postback-sharepoint
             var ret = '<%= Page.IsPostBack%>' == 'True';
             return ret;
        }
        . . .
    </script>
</body>

Answer 4

Try something like this (not tested).

Set the UpdateMode of the UpdatePanel to Conditional.

Add this to your <head> section:

<script type="text/javascript">

    window.onload = __doPostBack('UpdatePanel1', ''); // Replace UpdatePanel1 with the ID of your UpdatePanel

</script>