CODEWITHSUNDEEP
jqueryasp.net-mvcdownload
Peru
Peru

Reputation: 2971

Download File - Asp.net MVC with Jquery

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 ?

Upvotes: 1

Views: 4019

Answers (3)

anthr
anthr

Reputation: 719

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>

Upvotes: 1

lopezbertoni
lopezbertoni

Reputation: 3641

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

Upvotes: 0

Rajesh Dhiman
Rajesh Dhiman

Reputation: 1896

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

Upvotes: 1

Related Questions