解鎖界面與打開/另存爲對話框後的jQuery插件BlockUI

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的說明的iFrame：/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，耶爾內伊