javascript 如何将加载 UpdatePanel 内容推迟到页面呈现之后？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3877951/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I defer loading UpdatePanel content until after the page renders?
提问by Bryan
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.
ASP.NET 的老手，UpdatePanel 的新手。我有一个报告页面，它执行相当长的 SQL 查询......现在大约需要 10 秒。我想要做的是让我的页面完全呈现，并带有一些占位符文本（正在加载...），然后让 UpdatePanel 启动实际耗时的报告过程并在完成后呈现报告。
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:
所以...我的理论是使用 RegisterStartupScript() 来启动它并从 GetPostBackEventReference() 中删除字符串以触发 UpdatePanel 更新。出现了一些问题：
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?
1) 我真的可以使用带有 UpdatePanel 的 GetPostBackEventReference 还是我需要以其他方式触发它？在更新面板内的按钮上使用此方法？
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?
2) 当回发引用是 UpdatePanel 时会触发什么事件？我不清楚。我必须在某处调用我的数据绑定代码！再说一次，也许我需要在里面使用一个按钮？
回答by RPM1984
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:
然后在 JavaScript 中，每当您想触发异步回发时，您可以这样做：
__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.
在我的示例中，我需要从特定的 JS 事件触发异步回发。但是您可以将其附加到文档就绪。
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.
我似乎记得尝试过@Marko Ivanovski 的方式，但由于某种原因它没有用。我认为您需要指定一个“可回发”控件（即按钮）来触发回发。
HTH.
哈。
回答by Pyrenus
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:
我的 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:
我的代码片段背后的代码：
在 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!
这是我的测试，看看我是否可以让它工作。现在用真正的代码替换所有这些！
回答by Zeek2
Simplifying RPM1984's very helpful earlier answer (thanks ;)) and showing some tweaks & a little more of the surrounding detail that I found necessary:
简化 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>
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.
隐藏按钮的重要OnClick= 参数，这是指定要调用的服务器函数的参数！
更新面板中没有触发器子句或触发器，我使用的是自动触发的子控件 - 特别是按钮 Click 事件。
And to trigger it from client-side Javascript you can use:
并从客户端 Javascript 触发它，您可以使用：
document.getElementById("hiddenAsyncTrigger").click??();
However, I found it necessaryto prevent this being called on subsequent page loads (as it caused unnecessary page load looping & consequent flicker). See the neat little IsPostBack()check below :)
但是，我发现有必要防止在后续页面加载时调用它（因为它会导致不必要的页面加载循环和随之而来的闪烁）。请参阅下面整洁的小IsPostBack()检查 :)
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-tag 的 onload-parameter 因此：
<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>
回答by Marko
Try something like this (not tested).
尝试这样的事情（未测试）。
Set the UpdateModeof the UpdatePanelto Conditional.
设置的UpdateMode的UpdatePanel到条件。
Add this to your <head>section:
将此添加到您的<head>部分：
<script type="text/javascript">
window.onload = __doPostBack('UpdatePanel1', ''); // Replace UpdatePanel1 with the ID of your UpdatePanel
</script>
