ASP.NET - 页面加载时显示消息答案

【问题标题】：ASP.NET - Display Message While Page Is LoadingASP.NET - 页面加载时显示消息
【发布时间】：2010-06-10 18:05:10
【问题描述】：

我有一个页面在 page_load 方法中执行长时间运行的任务（10 到 15 秒）。

我有客户端 javascript 代码，可以向用户显示一个不错的“页面加载”动画 gif。

我能够从代码隐藏调用 JavaScript 方法，以显示“页面加载”动画 gif，但是，长时间运行的任务正在挂起 UI，因此动画 gif 直到实际显示在长时间运行的任务完成后，这与我想要的完全相反。

为了测试这一点，我在 page_load 方法中调用了 JavaScript 方法来显示动画 gif。然后，我使用 Thread.Sleep(10000)。发生的情况是，动画 gif 直到 Thread.Sleep 完成后才会显示。

显然我做错了什么。

任何建议将不胜感激。

谢谢。

克里斯

下面是代码隐藏示例：

protected void Page_Load(object sender, EventArgs e)
    {
        ClientScript.RegisterStartupScript
              (GetType(), "Javascript", "javascript: ShowWaitIndicator(); ", true);

        Response.Flush();

        Thread.Sleep(10000);
    }

【问题讨论】：

您不能从代码隐藏调用 javascript。您所能做的就是将它添加到响应流中，这就是 ClientScript.RegisterStartupScript 正在做的事情。这最终将被发送回浏览器。这是两个完全不同的语境。 Codebehind 在服务器上运行，javascript 在浏览器上执行。

标签： c# asp.net javascript

【解决方案1】：

我通过在页面上放置一个计时器来实现这一点。在第一次勾选后禁用它并运行您的任务。

<asp:Timer runat="server" id="UpdateTimer" interval="500" ontick="UpdateTimer_Tick" />

我将其放置在 UpdatePanel 中以满足我的需要。我不确定什么最适合你。然后在你的代码后面...

Protected Sub UpdateTimer_Tick(ByVal sender As Object, ByVal e As EventArgs)
        UpdateTimer.Enabled = False

        ' run method here

    End Sub

【讨论】：

【解决方案2】：

原因是 Page.Load 事件在任何响应发送到客户端之前触发；因此，在客户端收到响应之前，不会发生针对客户端的任何指令（例如执行您的 javascript）。

所以... 将长时间运行的任务放在 Page.Load 中不会产生您想要的效果。这听起来像是使用 AJAX 或其他形式的异步数据检索的情况。在这种情况下，您返回给客户端的页面不包含您长时间运行的任务的结果——因此页面本身（带有它的微调器）会快速加载，然后 客户端 请求数据；数据准备好后（10-15 秒后），您可以使用结果更新客户端中的 DOM。

【讨论】：

【解决方案3】：

以下示例对您有用。只需放置在页面加载事件中。

  Response.Write("<div id=\"loading\" style=\"position:absolute; width:100%; text-align:center; top:300px;\"><img src=\"http://www.cse.iitk.ac.in/users/singhroh/images/loading.gif\" border=0></div>");
  Response.Flush();
  System.Threading.Thread.Sleep(5000);        
  Response.Write("script>document.getElementById('loading').style.display='none';</script>");

【讨论】：

有同样的想法似乎需要您将 Buffer="false" 添加到页面的顶部指令，否则它只会一次显示所有内容。

【解决方案4】：

我会避免从代码隐藏中调用您的 JavaScript。

相反，使用 jQuery 库。您可以使用以下代码在加载 DOM 后立即触发您的代码：

$(document).ready(function() {
     //Call your JavaScript method here.
});

您还需要将 jQuery 添加到您的页面，这是 Microsoft CDN 中包含的单个脚本。将此添加到您的标记中以执行此操作：

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>

这将在页面加载时立即调用您的 GIF JavaScript 方法，您可以消除 Thread.Sleep。我假设您的动画 GIF 方法会在 10-15 秒后自动隐藏图像。

【讨论】：

我只是使用 Thread.Sleep 来模拟一个长时间运行的任务。我尝试了您的方法，并将 Thread.Sleep(10000) 放入 page_load 方法中，直到 10 秒后它仍然不会加载 gif。
知道了，我以为你在使用 Thread.Sleep 来延迟 GIF 的消失。在这种情况下，Yoooder 的回应是最好的选择。您仍然可以使用 jQuery 并利用“.ajax”方法来调用带有“WebMethod”属性的页面方法。这里有一篇关于它的文章：encosia.com/2008/05/29/… 你的 webmethod 将包含你的 Thread.Sleep 来模拟长时间运行的任务。

【解决方案5】：

老派，你可以关闭缓冲。使用缓冲（默认），页面在发送到客户端之前在其整体中生成。如果您关闭缓冲，它会在加载时发送，因此您可以发送 html 以打开加载图形，执行长时间运行的任务，然后发送一些 javascript 将其关闭。

【讨论】：

【解决方案6】：

听起来 Javascript onload 是在 ASP onload 进程之后显示的。您可能希望将耗时的操作延迟到 Page.LoadComplete - 这样，您的用户将在密集操作发生之前看到 Javascript 呈现。

然后，您将在功能完成后根据需要更新页面内容。

能否提供代码示例？

【讨论】：

我修改了原始帖子以包含代码隐藏的示例。