Download File - Asp.net MVC with Jquery

Question

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 ?

Rajesh Dhiman · Accepted Answer · 2014-02-24 13:40:15Z

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"));
    }

answered Feb 24, 2014 at 13:40

Rajesh Dhiman

1,8961 gold badge18 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Peru Over a year ago

Not working in IE8 is the Problem !! Any work arounds ?

Peru Over a year ago

Nope !! just the Block UI Freezed !! guess unblock ui is not called

Peru Over a year ago

Nope...nothing came up after Block UI...!!! so how s the flow works...any links?? is load similar to ready ?

Rajesh Dhiman Over a year ago

Here you can find about load. but you need to debug what is not working properly.

Yuri Morales Over a year ago

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

|

anthr · Accepted Answer · 2014-02-24 13:50:00Z

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>

answered Feb 24, 2014 at 13:50

anthr

7196 silver badges13 bronze badges

2 Comments

Peru Over a year ago

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

anthr Over a year ago

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.

lopezbertoni · Accepted Answer · 2014-02-24 13:41:48Z

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?)
        }
    });
}

answered Feb 24, 2014 at 13:41

lopezbertoni

3,6413 gold badges41 silver badges54 bronze badges

Collectives™ on Stack Overflow

Download File - Asp.net MVC with Jquery

3 Answers 3

12 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

12 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related