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

$         


        

Answer 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>

Answer 2

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

Answer 3

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