Article Overview

Background

There was a requirement where I had to “Export data into the Excel file with ASP .NET MVC”. I have gone through various links and found one common solution using “Response. End()”. My basic requirement was to display a loader while generating and downloading Excel files. Hence, I have to customize the searched solution in a different way.

This article mainly focuses on three key things.

Here, I have kept all the key details in one place with the whole example.

Prerequisites

You should have basic knowledge of ASP .NET MVC and jQuery.

How to Return a File (Excel) from a Controller’s Action method and create an Excel Blob into jQuery along with the Loader effect.

There are mainly four key steps to implement this.

Now, let us see in detail.

Ajax calls to action method from the button click

I have kept a button “Export to Excel” and its click calls an action method.

$.ajax({
    url: '@Url.Action("ExportToExcel", "Export")',
});

Return a file from an action method

I have created a GridView object and assigned data to it. And then, stored it into a byte array. Finally, I return a File as an ActionResult.

var grdReport = new System.Web.UI.WebControls.GridView();
byte[] bindata = System.Text.Encoding.ASCII.GetBytes(sw.ToString());
return File(bindata, "application/ms-excel", "ReportFile.xls");

Create a blob for an Excel file and make it auto-downloadable using jQuery.

On the success of the AJAX call, create a Blob of Excel type. Create an anchor link set the file to it and make it auto-downloadable.

var blob = new Blob([response], { type: 'application/ms-excel' });
document.body.appendChild(a);

Display a loader while processing to generate an Excel file and download it using jQuery

In the Ajax call, start and stop loader in “success” and “complete” respectively.

beforeSend: function () {
    // Your code before the request is sent
},
complete: function () {
    // Your code after the request is completed
}

Here, I have given high-level steps for our requirements. Now, let us see the complete example below which will give you more clarity about these steps.

Complete example

For the complete example, I have prepared and uploaded a file that contains all the code.

Ajax calls to action method from the button click

First, set one “Export to Excel” button. Second, call an Ajax method on the button click.

Export to Excel

Return a file from the action method

First, create a GridView and set data to it. Second, create StringWriter and HTMLTextWriter to render GridView. Third, use a byte array to store the result into it. Fourth, return a file as ActionResult.

StringWriter

Create a blob for an Excel file and make it auto-downloadable using jQuery.

First, create a blob object of Excel on Ajax's success. Second, create an object URL and make it downloadable.

This is already covered in the "success" of the above first image.

Success

Display a loader while processing to generate Excel file and download it using jQuery

First, start a loader in before sending the Ajax call. Second, stop the loader in complete.

Loader

Output

First, the button will be enabled before clicking it.

Enabled

Second, after the button clicks and during processing, it will be disabled and the text will be "Loading.

Loading

Third, after process completion, the button will come back to the original state, and the Excel file will be downloaded.

Excel file

Summary

Now, I believe you will be able to return a File (Excel) from a Controller’s Action method and create an Excel Blob into the jQuery along with the Loader effect.