代码之家 › 专栏 › 技术社区 › Bryan

如何将加载UpdatePanel内容推迟到页面呈现之后?

updatepanel asp.net javascript

Bryan · 技术社区 · 14 年前

ASP.NET的老手,更新面板的新手。我有一个报告页面,它执行相当长的SQL查询…现在大约需要10秒钟。我想做的是让我的页面完全呈现,带有一些占位符文本(正在加载…),然后让UpdatePanel启动实际耗时的报告过程,并在完成后呈现报告。

所以…我的理论是使用registerStartupscript()来启动它,并从getPostbackEventReference()中删除字符串以触发更新面板更新。出现了一些问题:

1)我是否可以使用带有updatepanel的getpostbackeventreeference,或者我是否需要以其他方式触发它?在更新面板内的按钮上使用此方法?

2)当回发引用是updatepanel时会触发什么事件?我不清楚。我必须在某个地方调用数据绑定代码!再说一遍,也许我需要在里面用一个按钮?

4 回复 | 直到 7 年前

RPM1984 14 年前

<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;" />

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

Pyrenus 13 年前

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

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

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

Marko 14 年前

UpdatePanel

<head>

<script type="text/javascript">

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

</script>

Zeek2 7 年前

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

document.getElementById("hiddenAsyncTrigger").clickââ();

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