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

发布于 2024-09-26 02:34:44 字数 432 浏览 1 评论 0原文

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

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

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

爱，才寂寞 2024-10-03 02:34:44

我最近不得不做一些非常类似的事情，这就是我的做法（正确或错误）：

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

<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 事件触发异步回发。但您可以将其附加到准备好的文档中。

我似乎记得尝试过@Marko Ivanovski 的方法，但由于某种原因它不起作用。我认为您需要指定一个“可回发”控件（即按钮）来触发回发。

HTH。

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.

回复收藏 0 原文

装迷糊 2024-10-03 02:34:44

用我的解决方案更新这个问题，我主要是从上面的第一个答案中拼凑出来的。

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

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

这是我的测试，看看我是否可以让它工作。现在用真正的代码替换所有这些！

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!

回复收藏 0 原文

情绪少女 2024-10-03 02:34:44

尝试这样的（未经测试）。

将 UpdatePanel 的 UpdateMode 设置为Conditional。

将其添加到您的部分：

<script type="text/javascript">

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

</script>

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>

回复收藏 0 原文

泪眸﹌ 2024-10-03 02:34:44

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

注意：

隐藏按钮的重要OnClick=参数，这是指定要调用的服务器函数的内容！
更新面板中没有触发子句或触发器，我正在使用自动触发的子控件 - 特别是按钮单击事件。

要从客户端 Javascript 触发它，您可以使用：

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

但是，我发现有必要防止在后续页面加载时调用它（因为它导致不必要的页面加载循环和随之而来的闪烁））。请参阅下面简洁的 IsPostBack() 检查:)

例如，要在页面加载后调用此功能（根据原始问题），我刚刚添加了一个调用来调用上面的代码行作为 onload 参数到主要的 Body 标签：

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

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:

The hidden button's vital OnClick= parameter, this is what specifies the server function to call!
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>

回复收藏 0 原文

~没有更多了~