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

时间:2010-10-07 00:48:34

标签: javascript asp.net updatepanel

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

所以...我的理论是使用RegisterStartupScript()来启动它并从GetPostBackEventReference()中删除字符串以触发UpdatePanel更新。出现了一些问题:

1)我可以实际使用UpdatePanel的GetPostBackEventReference,还是需要以其他方式触发它?在更新面板内的按钮上使用此方法?

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

4 个答案:

答案 0 :(得分:12)

我最近必须做一些非常相似的事情,这就是我做的事情(对或错):

技巧是“隐藏的异步回发触发器”。

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

然后从JavaScript开始,每当你想要触发异步回发时,你都会这样做:

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

在我的示例中,我需要从特定的JS事件触发异步回发。但你可以将它附加到doc ready。

我似乎记得尝试@Marko Ivanovski的方式,但由于某种原因它没有用。我认为您需要指定一个“可回发”控件(即按钮)来触发回发。

HTH。

答案 1 :(得分:2)

使用我的解决方案更新此内容,我主要从上面的第一个答案拼凑而成。

我需要加载我的页面,然后开始为我的更新面板加载内容。该面板调用一些Web服务,我们不希望在远程服务器没有响应的情况下整个页面崩溃。我们也不想等待。

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

我的代码背后的代码:
在page_load中:

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

这是我的测试,看看我是否能让它运转起来。现在用真实代码替换所有这些!

答案 2 :(得分:0)

尝试类似(未经测试)的

UpdatePanel UpdateMode 设置为条件

将其添加到您的<head>部分:

<script type="text/javascript">

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

</script>

答案 3 :(得分:0)

简化RPM1984非常有用的早期答案(谢谢;))并显示一些调整和放大我发现必要的一些细节:

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

注意:

  1. 隐藏按钮的重要 OnClick =参数,这是指定要调用的服务器函数!

  2. 在更新面板中没有触发子句或触发器,我正在使用自动触发的子控件 - 特别是按钮Click事件。

  3. 要从客户端Javascript触发它,您可以使用:

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

    但是,我发现必要可以防止在后续页面加载时调用它(因为它导致不必要的页面加载循环和随后的闪烁)。请参阅下面的整洁的小 IsPostBack()检查:)

    e.g。要在页面加载后调用此方法(根据原始问题),我只是添加了一个调用来调用上面的代码行作为主要标签的onload参数:

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