1

Am dowloading a file using JQUERY MVC. User clicks on button and am downloading the File looks as simple as it is.

My Jquery Event

$(document).on("click", "#download", function () {
    $.blockUI();
    window.location = "../Home/Download";
    $.unblockUI();
    }

and which calls my server side

public ActionResult Download()
    {
    return File();
    }

Everything is fine Except that am using Block UI(Jquery Plugin) to keep the user know that Download is in progress..."Please wait"

and once the Download is complete i need to unblock UI and let the user Save/open file. how can i modify the above code to achieve this or any other idea ??

Currently my c# code is called and the next line in jquery is executed and block ui is Gone next sec. how can i make the process wait until the download completed ?

Kumar V
  • 8,810
  • 9
  • 39
  • 58
Peru
  • 2,871
  • 5
  • 37
  • 66

3 Answers3

1

You don't need to window.location. You can simply create an iframe using jQuery and set its url to your action. To unblock UI .load method can be used. You also need to create a hidden container in your html that will contain the iframe so that it remains hidden.

<div id="DivIframeContainer" style="display:none;" />

$(document).on("click", "#download", function () {
    $.blockUI();       
var iframe = $("<iframe/>").load(function () {
     $.unblockUI();
}).attr({
    src: "../Home/Download"
}).appendTo($("#DivIframeContainer"));
    }
Rajesh Dhiman
  • 1,888
  • 1
  • 17
  • 30
  • Not working in IE8 is the Problem !! Any work arounds ? – Peru Feb 24 '14 at 14:27
  • Nope !! just the Block UI Freezed !! guess unblock ui is not called – Peru Feb 24 '14 at 14:30
  • Nope...nothing came up after Block UI...!!! so how s the flow works...any links?? is load similar to ready ? – Peru Feb 24 '14 at 14:31
  • [Here](https://api.jquery.com/load/) you can find about load. but you need to debug what is not working properly. – Rajesh Dhiman Feb 24 '14 at 14:33
  • All work except $.unblockUI(); looks like never execute at this point. I put an alert and nothing. – Yuri Morales Mar 28 '14 at 18:59
  • You need to show me your code, only then I can help you. – Rajesh Dhiman Mar 29 '14 at 13:12
  • Is the same code than yours except src value. Everything works except the block when finish load (unblockUi). By the way here is my controller action: public ActionResult CreateFile(string documentno, string storesid) {....... return File(ms, @"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet.main+xml", "InvCycleCount.xlsx"); } – Yuri Morales Apr 01 '14 at 13:31
  • Nope.. Just Unblock never execute. I deleted Unblock code and put console.log and alert and nothing. – Yuri Morales Apr 01 '14 at 14:10
  • Try [this](http://stackoverflow.com/questions/3749231/download-file-using-javascript-jquery) – Rajesh Dhiman Apr 01 '14 at 14:15
  • No. I just need the event when finish downloading excel file to UnblockUI like 1st post. Normally I use ajax for this but Ajax and MVC do not working together downloading file. Maybe my solution can be 2 steps. 1- creating the file and save it physically on disk (here I can controll when finish) and 2- call download method. – Yuri Morales Apr 01 '14 at 14:26
  • Actually I am not able to find out what's not working with your code. Is this the load function or UnblockUI. If any of this is not working then you must receive some error. So you need to debug your code and find out the issue. – Rajesh Dhiman Apr 01 '14 at 14:30
  • 1
    No, your code is fine. Because when I remove the src attribute the UnblockUI run successful. I think is the return in the controller. My actionresult is fine and has not contain errors but looks like the "return File(ms, @"application/vnd.openxm......" dont like to your code. lol – Yuri Morales Apr 01 '14 at 14:35
1

The way that the user interacts with file downloads should be left up to the browser.

In your example, your UI will tell them that the file is downloading, when in fact the browser will do the same thing.

You should simply use an anchor with the href set to the download location:

<a href="downloadlinkhere"> Download </a>
anthr
  • 719
  • 5
  • 13
  • right !!! but it will be just loading so there are chances that user may click again something or same thing as he waits. tatz WY am blocking the UI – Peru Feb 24 '14 at 14:09
  • Right, but what I mean is that this is a Browser UX problem, and not a coding problem - unless there's any specific reason that you don't want your users to download 2 times if they click twice, then you should let the browser do its thing. – anthr Feb 24 '14 at 14:34
0

You can do it calling your sever side via AJAX. Here's an example on how to Block your UI when you make an ajax call.

Attach the Block/Unblock methods to the $(document).ready function. Every time an AJAX call is made, the UI is going to be blocked.

$(document).ready(function () {

}).ajaxStart(function () {
    $.blockUI();
}).ajaxStop(function () {
    $.unblockUI();
});

$(document).on("click", "#download", function () {
    DownloadFile();
}

function DownloadFile() {
    $.ajax({
        url: "../Home/Download",
        data: { null },
        success: function (data) {
            //Do something with data that is returned. (The downloaded file?)
        }
    });
}
lopezbertoni
  • 3,551
  • 3
  • 37
  • 53