MVC - Return A File (Excel) From A Controller’s Action Method And Create An Excel Blob In To The jQuery Along With Loader Effect

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.
 MVC - Return A File (Excel) From A Controller’s Action Method And Create An Excel Blob In To The jQuery Along With Loader Effect
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.
MVC - Return A File (Excel) From A Controller’s Action Method And Create An Excel Blob In To The jQuery Along With Loader Effect
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.
MVC - Return A File (Excel) From A Controller’s Action Method And Create An Excel Blob In To The jQuery Along With Loader Effect
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.
MVC - Return A File (Excel) From A Controller’s Action Method And Create An Excel Blob In To The jQuery Along With Loader Effect
Output
 
First, the button will be enabled before clicking it.
MVC - Return A File (Excel) From A Controller’s Action Method And Create An Excel Blob In To The jQuery Along With Loader Effect
 Second, after button click and during processing, it will be disabled and text will be "Loading ...".
 MVC - Return A File (Excel) From A Controller’s Action Method And Create An Excel Blob In To The jQuery Along With Loader Effect
 Third, after process completion, button will come back to the original state and excel file will be downloaded.
MVC - Return A File (Excel) From A Controller’s Action Method And Create An Excel Blob In To The jQuery Along With Loader Effect

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.


Similar Articles