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

我想摆脱忙碌信息并在打开/另存为对话框时解锁用户界面。

Answer 1

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

我不认为这是可能的..从我可以看到的页面显然回发但是因为响应是文件流，页面没有重新加载，没有客户端事件触发页面只是停留在冷门。

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

的iFrame

对话框应该仍然正常，但您现在可以控制取消阻止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，Jernej

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

2 个答案: