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

Question

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

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

我能够从代码后台调用JavaScript方法来显示“页面加载”动画gif，但是长时间运行的任务会挂起UI，导致动画gif实际上直到长时间运行的任务完成后才显示，这正好与我的意愿相反。

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

显然，我做错了什么。

欢迎提供建议。

谢谢。

Chris

以下是代码后台示例：

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

        Response.Flush();

        Thread.Sleep(10000);
    }

- Chris

---

你不能从代码后台调用JavaScript。你所能做的就是将它添加到响应流中，这就是ClientScript.RegisterStartupScript正在做的事情。最终，这将被发送回浏览器。这是两个完全不同的上下文。Codebehind在服务器上运行，而JavaScript在浏览器上执行。 - womp

Answer 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

- mscccc

Answer 2

以下示例适用于您。只需将其放置在页面加载事件中即可。

  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>");

- Adeel

---

有相同的想法，似乎需要在页面的顶部指令中添加Buffer="false"，否则它会一次性显示所有内容。 - John

Answer 3

原因是Page.Load事件在向客户端发送任何响应之前触发，因此任何针对客户端的指令（例如执行您的javascript）都不会发生，直到客户端收到响应。因此，在Page.Load中放置长时间运行的任务将不会产生您想要的效果。这听起来像使用AJAX或其他形式的异步数据检索的情况。在这种情况下，您返回给客户端的页面不包含长时间运行任务的结果，因此页面本身（带有它的旋转器）加载快速，然后客户端请求数据;当数据准备好（10-15秒后），您可以使用结果更新客户端中的DOM。

- STW

Answer 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秒后自动隐藏图像。

- Nate Dudek

---

我只是使用Thread.Sleep来模拟长时间运行的任务。我尝试了你的方法，在page_load方法中放置了Thread.Sleep(10000)，但直到10秒后它仍然没有加载gif。 - Chris

知道了，我以为你在使用Thread.Sleep来延迟GIF的消失。在这种情况下，Yoooder的回答是最好的方向。您仍然可以使用jQuery并利用“.ajax”方法调用一个带有“WebMethod”属性的页面方法。这里有一篇文章：http://encosia.com/2008/05/29/using-jquery-to-directly-call-aspnet-ajax-page-methods/您的WebMethod将包含Thread.Sleep以模拟长时间运行的任务。 - Nate Dudek

Answer 5

回到老派的方式，你可以关闭缓冲。默认情况下启用缓冲，页面在完全生成后再发送给客户端。如果你关闭缓冲，它会随着加载而发送，因此你可以发送HTML来切换加载图形，执行长时间运行的任务，然后发送一些JavaScript来关闭它。

- Simon Halsey

Answer 6

看起来 JavaScript 的 onload 在 ASP 的 onload 处理之后显示。您可能希望将耗时操作延迟到 Page.LoadComplete - 这样，用户在进行密集操作之前就可以看到 JavaScript 渲染。

然后，在函数完成后根据需要更新页面内容。

您能提供一些代码示例吗？

- liquidleaf

---

我修改了原始帖子，包括代码后台的示例。 - Chris