Javascript 如何将UpdatePanel内容的加载延迟到页面呈现之后？_Javascript_Asp.net_Updatepanel

Javascript 如何将UpdatePanel内容的加载延迟到页面呈现之后？

javascript asp.net

Javascript 如何将UpdatePanel内容的加载延迟到页面呈现之后？,javascript,asp.net,updatepanel,Javascript,Asp.net,Updatepanel,ASP.NET的老手，UpdatePanel的新手。我有一个报告页面，它执行相当长的SQL查询。。。现在大约需要10秒。我想做的是让我的页面完全呈现，带有一些占位符文本（加载…），然后让UpdatePanel启动实际耗时的报告过程，并在完成后呈现报告所以。。。我的理论是使用RegisterStartupScript（）启动此操作，并从GetPostBackEventReference（）中删除字符串以触发UpdatePanel更新。出现了一些问题： 1）我是否可以使用带有UpdatePane

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

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

1）我是否可以使用带有UpdatePanel的GetPostBackEventReference，或者我是否需要以其他方式触发它？在更新面板内的按钮上使用此方法

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

试试这样的东西（未测试）

将

UpdatePanel

的UpdateMode设置为Conditional

将此添加到您的

部分：

<script type="text/javascript">

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

</script>


window.onload=uu doPostBack（'UpdatePanel1'，''）；//用UpdatePanel的ID替换UpdatePanel1

最近我不得不做一些非常类似的事情，下面是我是如何做的（对还是错）：

诀窍是“隐藏的异步回发触发器”

然后，在JavaScript中，每当您想要触发异步回发时，都可以执行以下操作：

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

uu doPostBack（'OnClick'）；

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

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

HTH.

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

我需要加载我的页面，然后开始加载更新面板的内容。面板调用了一些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>

和按钮处理程序：

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

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

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

但是，我发现有必要防止在后续页面加载时调用它（因为它会导致不必要的页面加载循环和随后的闪烁）。请参见下面整洁的小图标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>


...  
函数DoPostLoad（）
{
如果（IsPostBack（）！=true）/***这是新的和必需的***
document.getElementById（“hiddenAsyncTrigger”）。单击（）；
}
函数IsPostBack（）{//Ref。https://stackoverflow.com/questions/26978112/execute-javascript-only-on-page-load-not-postback-sharepoint
var ret=''=''真'；
返回ret；
}
. . .

Bingo，这就成功了。不过有点修改，因为我使用了GetPostBackEventReference（btnTrigger，string.Empty）；然后是RegisterStartupScript（）。是的，如果您想启动特定的服务器端事件处理程序，那么是的-您需要这样做。在我的例子中，我只需要回发来再次运行页面加载。很高兴它成功了。一个缺点。。。如果手动回发，似乎不会触发UpdateProgress控件。有趣（在我的场景中不需要）。您实际上不需要UpdateProgress控件，只需使用创建一个隐藏的占位符，并在启动异步回发时显示它即可。UpdateProgress控件（与许多其他Web窗体服务器控件一样）非常方便，但可以轻松替换。我只想说按钮上的style=“display:none；”而不是Visible=false是至关重要的。当使用Visible=false时，我能够触发回发（使用GetPostBackEventReference），但它不是异步的。

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