1

我的网络表单上有一个按钮。单击此按钮将在 onclick 事件处理程序期间执行 HttpWebRequest。在请求之后，我们将请求中的响应复制到 HttpContext.Current.Response 并将其发送给客户端。

此 Web 请求可能需要一段时间（最多 5 秒，因为它正在生成报告）。在此期间，除了浏览器进度条和旋转的 IE 图标（如果他们使用的是 IE），用户没有任何迹象表明正在发生任何事情。所以在发生这种情况时我需要一个加载指示器。

我尝试使用在按钮的 onclick 事件（使用 OnClientClick）期间触发的 javascript，虽然它有效，但我不知道如何找出 Web 请求何时完成。由于我们只是将响应发送给客户端，因此不会发生完整的回发。

我尝试将按钮包装在 UpdatePanel 中并使用 UpdateProgress，但是当我们将响应发送到 HttpContext.Current.Response 并调用 Response.End() 时，我们在 javascript 中收到错误，因为响应不好形成（我们正在发回一个 Excel 表供用户下载）。

由于我们正在发回一个文件供用户下载，我不想弹出一个单独的窗口，因为在 IE 中他们会得到阻止下载的信息栏。

这里有什么想法吗？

4

4 回答 4

4

作为 Professional AJAX.NET 库的替代方案，jQuery 提供了一种非常好的方法。

看看这个使用 .NET PageMethod 的例子（如果可能的话）。

您在 jQuery 中定义页面方法调用，您可以在隐藏的 div 中添加 loading... 消息。

说出您想要在成功时返回的回调（即生成 5 秒报告时），然后隐藏加载并处理数据。

以我的联系页面上的 javascript为例（查看源代码）。

  1. 我在页面上有一个按钮，添加 jQuery onClick。
  2. 当单击显示隐藏的加载 div 时，对采用表单参数的页面方法进行 ajax 调用。
  3. page 方法发送电子邮件等，然后返回到我在那里的 onSuccess javascript 方法中的表单。
  4. onSuccess 隐藏加载 div。
于 2009-02-25T16:13:54.357 回答
1

我过去使用的一个简单技巧是重定向到带有动画进度条 (gif) 的中间页面，然后让该页面真正发布数据。（甚至弹出一个带有动画的图层和一条礼貌的消息，要求用户等待一两分钟）

动画 gif 的简单反馈给最终用户创造了应用程序没有停止并且他们会更有耐心的错觉。

另一种方法是将数据交给工作线程并立即返回一条消息，说明报告将通过电子邮件发送或在网站的“报告”部分准备就绪时提供。但是，这种方法缺乏报告完成时即时通知的好处。

于 2008-10-08T22:59:13.330 回答
1

这是我的解决方案：

  1. 下载并查看免费的Professional AJAX.NET库示例。
  2. 编写一个创建文件并返回文件位置作为参数的 AjaxMethod。
  3. 编写您的客户端函数以在第 2 步调用方法。调用此方法时显示指标。
  4. 编写一个客户端回调方法来隐藏指标并显示/下载用户请求的文件。
  5. 添加您的客户端函数调用您的按钮元素。

当您在服务器端的方法结束时，您的回调将被调用。

希望这可以帮助 ！

于 2009-02-24T09:53:39.020 回答
0

我在这里介绍的解决方案旨在展示一种方法，让“正在加载...”框在您进行服务器端处理时出现，并在服务器端处理完成时消失。

我将使用非常基本的 AJAX 机制（在 FF 上测试，但 IE 也应该没问题）来完成此操作，即不使用像 Prototype 或 jQuery 或 Dojo 这样的框架，因为您没有指定您对它们的了解。

为了让您更好地理解其中的技巧，以下只是一个小示例，并不假装是开箱即用的解决方案。我倾向于不肤浅，但我认为一个更清晰的例子可以比很多词更好地解释。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>First Example</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            .hidden {
                display: none;
            }
            .loadingInProgress {
                color: #FFFFFF;
                width: 75px;
                background-color: #FF0000;
            }
        </style>
    <script type="text/javascript">
        var httpRequest;
        if (window.XMLHttpRequest) { // Mozilla, Safari, ...
            httpRequest = new XMLHttpRequest();
            httpRequest.overrideMimeType('text/xml');
        } else if (window.ActiveXObject) { // IE
            try {
                httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
            }
            catch (e) {
                try {
                    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
                }
                catch (e) {}
            }
        }

        if (!httpRequest) {
            alert('Giving up :( Cannot create an XMLHTTP instance');
        }

        httpRequest.onreadystatechange = function(){
            switch (httpRequest.readyState) {
            case 1: // Loading
                document.getElementById('loading').className = "loadingInProgress";
                break;
            case 4: // Complete
                document.getElementById('loading').className = "hidden";
                if (httpRequest.status == 200) {
                    // perfect!
                } else {
                    // there was a problem with the request,
                    // for example the response may be a 404 (Not Found)
                    // or 500 (Internal Server Error) response codes
                }
                break;
            }
        };

        function go() {
            httpRequest.open('GET', document.getElementById('form1').action, true);
            httpRequest.send('');
        }
    </script>

  </head>
  <body>
      <div id="loading" class="hidden">Loading...</div>
      <form id="form1" name="form1" action="doSomething.php">
          <input type="button" value="Click to submit:" onclick="go()" />
      </form>
  </body>
</html>

如您所见，<div>其中包含“正在加载...”消息。

原理是显示/隐藏<div>取决于XMLHttpRequest对象的readyState.

我已经使用 的onreadystatechange处理程序XMLHttpRequest来触发readyState更改。

我使用的后端 php 脚本（声明为表单的action）只是休眠（5），让“正在加载...”消息出现 5 秒。

<?php
sleep(5);
header('Cache-Control: no-cache');
echo "OK";
?>

标Cache-control: no-cache头是必需的，因为通常如果您不设置它，浏览器将缓存响应，避免在需要时重新提交请求。

Mozilla MDC是“入门”AJAX 文档的一个很好的来源。

整个事情可以由像 Prototype 这样的 Javascript 框架更温和地处理，利用其浏览器安全的方法，为您节省数小时的调试时间。

编辑：

我选择了 php，因为我不了解 ASP.NET 和 ASP，对此感到抱歉。

于 2009-03-02T13:47:09.797 回答