Question

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

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

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

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

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

这里有什么想法吗？

Answer 1

作为Professional AJAX.NET库的替代品，jQuery有一种非常好的方法。

查看使用.NET PageMethod的this example（如果可能，请在您的方案中）。

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

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

查看javascript on my contact page的示例（查看来源）。

我在页面上有一个按钮，添加jQuery onClick。
当单击显示隐藏的加载div时，对带有表单参数的页面方法进行ajax调用。
页面方法会发送电子邮件等，然后返回到我在那里的onSuccess javascript方法中的表单。
onSuccess隐藏了加载div。

Answer 2

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

动画gif的简单反馈给终端用户带来了幻觉，即应用程序没有停顿，他们会更耐心。

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

Answer 3

这是我的解决方案：

下载并检查免费Professional AJAX.NET库的样本。
编写一个AjaxMethod，用于创建文件并将文件位置作为参数返回。
将您的客户端函数编写为步骤2中的调用方法。此方法调用时显示指示符。
编写客户端回调方法以隐藏指示符并显示/下载用户请求的文件。
使用按钮元素添加客户端函数调用。

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

希望这有帮助！

Answer 4

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

我将使用非常基本的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的{{1}}处理程序触发XMLHttpRequest更改。

我使用的后端php脚本（声明为表单的readyState）只是睡眠（5），让“正在加载...”消息显示5秒钟。

action

<?php sleep(5); header('Cache-Control: no-cache'); echo "OK"; ?>标头是必需的，因为通常如果您没有设置它，浏览器将缓存响应，以避免在需要时重新提交请求。

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

整个事情可以通过像Prototype这样的Javascript框架轻松处理，利用其浏览器安全方法，节省您的调试时间。

编辑：

我选择了php'因为我不知道ASP.NET也不知道ASP，对不起。

在执行WebRequest时显示加载文本

4 个答案: