ASP.Net 在新页面上显示加载覆盖答案

【问题标题】：ASP.Net display a loading overlay on new pageASP.Net 在新页面上显示加载覆盖
【发布时间】：2013-03-08 12:46:08
【问题描述】：

我目前在我的 ASP.net Web 表单站点中有两个页面。在第一页，用户可以输入一些详细信息，然后按一个按钮。然后，这将 response.redirect 到与它一起发送用户详细信息的下一页。

下一页的页面加载为

protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {   
            GetInformation();        
        }
    }

GetInformation() 使用这些用户详细信息进行长时间处理，大约需要 15-20 秒。

当用户按下第一页上的按钮时，它会一直停留在第一页，直到 GetInformation() 完成运行，然后它会加载新页面。

我想要做的是，当用户按下按钮时，新页面出现，然后有一个覆盖显示加载或其他内容，然后让它启动 GetInformation()。 GetInformation 完成后，覆盖将消失。

我在 Google 上进行了搜索，看到了一些想法，但似乎没有一个真正适合我的问题。

最好的方法是什么？

【问题讨论】：

标签： c# asp.net asp.net-ajax

【解决方案1】：

只有在page_load事件完全执行后才会显示页面。所以不要在page_load事件中调用你的函数。而是使用定时器控件来触发你的函数调用。

假设你添加了一个计时器控件，例如

<asp:Timer ID="tmr" runat="server" Interval="3000" OnTick="tmr_Tick" Enabled="true">
</asp:Timer>

现在服务器端代码看起来像这样

protected void tmr_Tick(object sender, EventArgs e)
{
    tmr.Enabled = false;
    GetInformation();        
    loadingIndicator.Style.Add("display", "none");
}

现在为了显示加载指示器，在页面上放置一个这样的 div

<div id="loadingIndicator" runat="server" style="background-image:url(ajax-loader-small.gif);background-repeat: no-repeat; width: 100%; height: 104px; background-position: center;">
</div>

默认情况下会显示加载指示器，当GetInformation()完成执行后，我们可以更改显示

希望这会有所帮助....

【讨论】：

如何从服务器代码中显示加载指示符？您当前的代码将不起作用
到目前为止似乎有效，谢谢。我认为仍然需要稍微调整我的代码，因为浏览器已经显示了它检索到的所有详细信息，但它仍然在选项卡上显示连接，就好像它仍在尝试做某事一样。
如果你想让我查看代码，请在你的问题中更新你的代码
是我的错，我没有停止计时器。我如何将您的代码变成叠加层？目前它只出现在页面顶部，然后当计时器消失并且我的所有数据加载时。我希望它覆盖整个页面。
必须有一些 jquery 插件来放置一个覆盖。一个简单的谷歌搜索会给你很多选择:)

【解决方案2】：

非常简单的解决方案：

创建一个新页面Loading.aspx。添加适当的样式和所有内容，使其看起来像您预期的加载页面。
在此页面中，在<head> 标签内添加以下标签：<meta http-equiv="refresh" content="0;URL='LongLoadingPage.aspx'" />

现在不是直接重定向到LongLoadingPage.aspx，而是重定向到Loading.aspx页面。

当然，这是一种快速且简单的解决方案，可能有更好的解决方案，您可以使用 AJAX 请求（使用 UpdatePanel 或 vanilla XMLHttpRequest）初始化长时间运行的操作。

【讨论】：

谢谢，这是我的备份解决方案！