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 an Excel file and make it auto-downloadable using jQuery
  • Display a loader while processing to generate an 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 the Loader effect
  • AJAX call to action method from button click
  • Return a file from the action method
  • Create a blob for an Excel file and make it auto-downloadable using jQuery
  • Display a loader while processing to generate an 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 an Excel file and make it auto-downloadable using jQuery
  • Display a loader while processing to generate an Excel file and download it using jQuery
  • Output
• Summary

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.

• Return a file from the action method of the controller
• Create a blob for an Excel file and make it auto-downloadable using jQuery
• Display a loader while processing to generate an Excel file and download it using jQuery.

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.

• Ajax call to action method from button click
• Return a file from the action method
• Create a blob for an Excel file and make it auto-downloadable using jQuery
• Display a loader while processing to generate an Excel file and download it using jQuery

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.