Article Overview
- Background
- Return a file from the action method of the controller
- Create a blob for excel file and make it auto downloadable using jQuery
- Display a loader while processing to generate excel file and download it using jQuery
- Pre-requisites
- How to Return a File (Excel) from a Controller’s Action method and create an Excel Blob into the jQuery along with Loader effect
- AJAX call to action method from button click
- Return a file from the action method
- Create a blob for excel file and make it auto downloadable using jQuery
- Display a loader while processing to generate excel file and download it using jQuery
- Complete example
- Ajax call to action method from button click
- Return a file from the action method
- Create a blob for excel file and make it auto downloadable using jQuery
- Display a loader while processing to generate excel file and download it using jQuery
- Output
- Summary
Background
There was a requirement where I have 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 the generating and downloading Excel file. Hence, I have to customize the searched solution in a different way.
This article mainly focuses on three key things:
- Return a file from the action method of the controller
- Create a blob for excel file and make it auto downloadable using jQuery
- Display a loader while processing to generate excel file and download it using jQuery
Here, I have kept all the key details at 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 in to the jQuery along with Loader effect
There are mainly four key steps to implement this:
- Ajax call to action method from button click
- Return a file from the action method
- Create a blob for excel file and make it auto downloadable using jQuery
- Display a loader while processing to generate excel file and download it using jQuery
Now, let us see in detail.
Ajax call to action method from button click
I have kept a button “Export to Excel” and its click calling an action method.
$.ajax({
url: '@Url.Action("ExportToExcel", "Export")',
Return a file from 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 excel file and make it auto downloadable using jQuery
On the success of AJAX call, create a Blob of excel type. Create anchor link and set 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 excel file and download it using jQuery
In the Ajax call, start and stop loader in “success” and “complete” respectively.
beforeSend: function () {
complete: function () {
Here, I have given high-level steps for our requirement. Now, let us see the complete example as below which will give you more clarity about these steps.
Complete example
For the complete example, I have prepared and uploaded a file which contains all the code.
- Ajax call to action method from button click
- Return a file from the action method
- Create a blob for excel file and make it auto downloadable using jQuery
- Display a loader while processing to generate excel file and download it using jQuery
- Output
Ajax call to action method from button click
First, set one “Export to Excel” button. Second, call an ajax method on button click.
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.
Create a blob for excel file and make it auto downloadable using jQuery
First, create a blob object of excel on ajax success. Second, create an object URL and make it downloadable.
This is already covered in "success" of the above first image.
Display a loader while processing to generate excel file and download it using jQuery
First, start a loader in beforeSend of ajax call. Second, stop loader in complete.
Output
First, the button will be enabled before clicking it.
Second, after button click and during processing, it will be disabled and text will be "Loading ...".
Third, after process completion, button will come back to the original state and excel file will be downloaded.
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 Loader effect.