在打开/另存为对话框出现后使用 jQuery BlockUI 插件解锁 UI

Question

我使用jQuery BlockUI Plugin 在触发点击事件时显示忙碌消息。

在下面的场景中，它工作正常。忙碌消息在点击事件时显示并锁定 UI，并在回发完成后消失。

不涉及文件创建，调用浏览器打开/另存为对话框

标记：

$(function() { // when document has loaded

    ($.unblockUI); //unlock UI

    //Show busy message on click event and disable UI
    $('#btnDemo').click(function() {
    $.blockUI({ message: '<h3>Please wait...</h3>' });

    });

});

<asp:Button ID="btnDemo" runat="server" Text="Hello World" /><br/>

后面的代码：

   Protected Sub btnDemo_Click(ByVal sender As Object, ByVal e As EventArgs) Handles btnDemo.Click
        Label1.Text = "Hello World"
        Threading.Thread.Sleep(6000)
    End Sub

现在，问题来了。涉及文件创建，它调用浏览器打开/另存为对话框。忙碌消息在点击事件时显示并锁定 UI，但在回发完成和用户保存文件时不会消失和解锁 UI。

标记：

$(function() { // when document has loaded

    ($.unblockUI); //unlock UI

    //Show busy message on click event and disable UI
    $('#btnCreateFile').click(function() {
    $.blockUI({ message: '<h3>Please wait...</h3>' });

    });

});

<asp:Button ID="btnCreateFile" runat="server" Text="Create File" /><br/>

代码隐藏：

   Protected Sub btnCreateFile_Click(ByVal sender As Object, ByVal e As EventArgs) Handles btnCreateFile.Click

    Dim filename As String = "demo.xls"
    Response.ContentType = "application/vnd.ms-excel"
    Response.AddHeader("Content-Disposition", String.Format("attachment;filename={0}", filename))
    Response.Clear()

    Response.[End]()

    End Sub

当打开/另存为对话框出现时，我想摆脱忙碌消息并解锁 UI。

Answer 1

我在这里问了同样的问题：Unblock (jQuery BlockUI) after file sent to browser through response stream（没有答案）。

我不认为这是可能的.. 从我可以看到页面明显回发但由于响应是文件流页面不会重新加载，没有客户端事件触发页面只是停留在边缘.

大多数教程建议您创建文件并将客户端重定向到“下载页面”。您可以通过 iFrame 完成所有这些操作。所以回发，生成文件，设置一些客户端站点 jquery 在 document.ready 上运行以创建一个 iFrame，其 src 为：/downloadFile.aspx?fileID=blah

对话框仍应正常显示，但您现在可以控制解除对 UI 的阻止。

Answer 2

Javascript：

$(document).ready(function () {
    $('#create_pdf_form').submit(function () {
      blockUIForDownload();
    });
  });

  var fileDownloadCheckTimer;
  function blockUIForDownload() {
    var token = new Date().getTime(); //use the current timestamp as the token value
    $('#download_token_value_id').val(token);
    $.blockUI();
    fileDownloadCheckTimer = window.setInterval(function () {
      var cookieValue = $.cookie('fileDownloadToken');
      if (cookieValue == token)
       finishDownload();
    }, 1000);
  }

服务器端：

var response = HttpContext.Current.Response;
response.Clear();
response.AppendCookie(new HttpCookie("fileDownloadToken", downloadTokenValue); //downloadTokenValue will have been provided in the form submit via the hidden input field
response.AddHeader("Content-Disposition", string.Format("attachment; filename={0}", desiredFileName)); //desiredFileName will be whatever the resutling file name should be when downloaded

//Code to generate file and write file contents to response

response.Flush();

这是解决方案的链接。

http://geekswithblogs.net/GruffCode/archive/2010/10/28/detecting-the-file-download-dialog-in-the-browser.aspx

br，杰内伊