In this article, I will explain how to export file by jQuery in both ASP.NET Web Forms and ASP.NET MVC. As you know, jQuery is a good foundation and great framework written by Javascript at client-side. It enables any web developers to program these Javascript code fragments such as interact these elements by using selectors, animations, mobile, call ajax and so on. Important of all, It also supports almost all modern browsers(e.g: IE6+, Opera, Firefox, Google Chrome...). Furthermore, it is being widely used by almost web developers all over the development world. So, except for these well-known stuffs in jQuery, I saw that we have the ability to export file by jQuery in almost any dynamic web language such as PHP, ASP.NET Web Forms, ASP.NET MVC, etc... Today, I feel free to write this article to support and help these web developers which have the demand "Export File by jQuery" for their projects. Let's get started!!
In order to export file by jQuery in ASP.NET Web Forms and ASP.NET MVC, you must meet the following requirements before do.
I will propose a common requirement for both ASP.NET Web Forms and ASP.NET MVC. Suppose that we are required to export excel with the person data from the server back to the client on ASP.NET Web Forms and ASP.NET MVC 3. We have to use jQuery to do this goal.
In order to achieve this goal, please you follow steps by steps as follows: Step 1: Open Visual Studio 2012 Step 2: Choose menu File > New > Project... Step 3: Choose tab Visual C# > Web, then select template project "Asp.Net Empty Web Application" Step 4: Type project Name "ExportExcelbyjQueryAspNetWebForms" and edit solution name "ExportExcelByjQuery". Then, select OK. Step 5: Create ObjectData folder to contain Person class. Step 6: Create Person class
using
System;
System.Collections.Generic;
System.Linq;
System.Web;
namespace
ExportExcelbyjQueryAspNetWebForms.ObjectData
{
public
class
Person
int
PersonID {
get
;
set
; }
string
FirstName {
LastName {
DateTime Birthday {
BirthPlace {
}
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ExportExcelbyjQueryAspNetWebForms.Default" %>
<!DOCTYPE html>
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
head
runat
"server"
title
>Demo Export Excel By jQuery Technique</
</
body
form
id
"frm"
"mainForm"
div
h2
>Export Excel By jQuery Unified Export File</
asp:GridView
ID
"grdView"
DataKeyNames
"PersonID"
AllowPaging
"true"
OnPageIndexChanging
"grdView_PageIndexChanging"
AutoGenerateColumns
"false"
Columns
asp:BoundField
DataField
"FirstName"
HeaderText
"First Name"
/>
"LastName"
"Last Name"
"Birthday"
DataFormatString
"{0:dd/MM/yyyy}"
"BirthPlace"
"Birth place"
img
"loading"
src
"Images/301.gif"
width
"30"
height
style
"display: none"
input
type
"button"
"export-excel"
value
"Export Excel"
script
"<%= Page.ResolveUrl("
~/Scripts/jquery-1.7.2.min.js") %>"></
~/Scripts/jquery-unified-export-file-1.0.min.js") %>"></
"text/javascript"
$(function () {
$('input.export-excel').bind('click', function () {
$.UnifiedExportFile({
action: '/Default.aspx',
data: { IsExportExcel: true },
downloadType: 'Progress',
ajaxLoadingSelector: '#loading'
});
using ExportExcelbyjQueryAspNetWebForms.ObjectData;
using NPOI.HSSF.UserModel;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Threading;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace ExportExcelbyjQueryAspNetWebForms
public partial class Default : System.Web.UI.Page
private List<
> GetPersons()
List<
> persons = new List<
>();
for (int i = 0; i < 1000; i++)
persons.Add(new Person
FirstName = "Kevin" + (i + 1),
LastName = "Ly",
Birthday = new DateTime(1989, 9, 9),
BirthPlace = "Ho Chi Minh city"
return persons;
protected void Page_Load(object sender, EventArgs e)
if (!IsPostBack)
grdView.DataSource = GetPersons();
grdView.DataBind();
if (Request.QueryString["IsExportExcel"] != null)
bool isExportExcel;
if (bool.TryParse(Request.QueryString["IsExportExcel"], out isExportExcel))
if (isExportExcel)
Thread.Sleep(10000);
var workbook = new HSSFWorkbook();
var sheet = workbook.CreateSheet("Persons");
// Add header labels
var rowIndex = 0;
var row = sheet.CreateRow(rowIndex);
row.CreateCell(0).SetCellValue("First Name");
row.CreateCell(1).SetCellValue("Last Name");
row.CreateCell(2).SetCellValue("Birthday");
row.CreateCell(3).SetCellValue("BirthPlace");
rowIndex++;
// Add data rows
foreach (var person in GetPersons())
row = sheet.CreateRow(rowIndex);
row.CreateCell(0).SetCellValue(person.FirstName);
row.CreateCell(1).SetCellValue(person.LastName);
row.CreateCell(2).SetCellValue(person.Birthday.ToString("MM/dd/yyyy"));
row.CreateCell(3).SetCellValue(person.BirthPlace);
// Save the Excel spreadsheet to a MemoryStream and return it to the client
using (var exportData = new MemoryStream())
Response.Cookies.Add(new HttpCookie("Downloaded", "True"));
workbook.Write(exportData);
string saveAsFileName = string.Format("PersonExport-{0:d}.xls", DateTime.Now).Replace("/", "-");
Response.ContentType = "application/vnd.ms-excel";
Response.AddHeader("Content-Disposition", string.Format("attachment;filename={0}", saveAsFileName));
Response.Clear();
Response.BinaryWrite(exportData.GetBuffer());
Response.End();
protected void grdView_PageIndexChanging(object sender, GridViewPageEventArgs e)
grdView.PageIndex = e.NewPageIndex;
In order to achieve this goal, please you follow steps by steps as follows: Step 1: Right click on Solution. Then choose menu Add > New Project... Step 2: Choose tab Visual C# > Web, then select template project "ASP.NET MVC 3 WEB APPLICATION" and type name project "ExportExcelbyjQueryAspNetMvc". The next, click OK.
ExportExcelbyjQueryAspNetMvc.Models
ExportExcelbyjQueryAspNetMvc.Models;
NPOI.HSSF.UserModel;
System.IO;
System.Threading;
System.Web.Mvc;
ExportExcelbyjQueryAspNetMvc.Controllers
HomeController : Controller
private
List<Person> GetPersons()
List<Person> persons =
new
List<Person>();
for
(
i = 0; i < 50; i++)
persons.Add(
FirstName =
"Kevin"
+ (i + 1),
LastName =
"Ly"
,
Birthday =
DateTime(1989, 9, 9),
BirthPlace =
"Ho Chi Minh city"
return
persons;
//
// GET: /Home/
ActionResult Index(
bool
? IsExportExcel)
if
(IsExportExcel ==
true
)
var workbook =
HSSFWorkbook();
var sheet = workbook.CreateSheet(
"Persons"
);
row.CreateCell(0).SetCellValue(
row.CreateCell(1).SetCellValue(
row.CreateCell(2).SetCellValue(
row.CreateCell(3).SetCellValue(
foreach
(var person
in
GetPersons())
row.CreateCell(2).SetCellValue(person.Birthday.ToString(
"MM/dd/yyyy"
));
(var exportData =
MemoryStream())
var cookie =
HttpCookie(
"Downloaded"
"True"
Response.Cookies.Add(cookie);
saveAsFileName =
.Format(
"PersonExport-{0:d}.xls"
, DateTime.Now).Replace(
"/"
"-"
File(exportData.ToArray(),
"application/vnd.ms-excel"
"attachment;filename={0}"
, saveAsFileName));
View(GetPersons());
@model List<
ExportExcelbyjQueryAspNetMvc.Models.Person
@{
ViewBag.Title = "Export Excel By jQuery in Asp.Net Mvc";
Layout = "~/Views/Shared/_Layout.cshtml";
>Export Excel By jQuery Unified Export File in ASP.NET MVC 3</
table
border
"1"
thead
tr
th
>First Name</
>Last Name</
>Birthday</
>Birth Place</
tbody
@foreach (var person in Model)
>@person.FirstName</
>@person.LastName</
>@person.Birthday.ToString("MM/dd/yyyy")</
>@person.BirthPlace</
"/Content/Images/301.gif"
"50"
button
>Export Excel</
>@ViewBag.Title</
link
href
"@Url.Content("
~/Content/Site.css")"
rel
"stylesheet"
"text/css"
~/Scripts/jquery-1.7.2.min.js")"
></
~/Scripts/jquery-unified-export-file-1.0.min.js")"
$('button.export-excel').bind('click', function () {
$.UnifiedExportFile(
action: window.location.href,
@RenderBody()
In order to know the further details, please access 2 resource links as follows:
After this post, you can know how to export file by using jQuery in both ASP.NET Web Forms and ASP.NET MVC. In fact, we also may export file in PHP or any dynamic web languages. Good luck to you!! DOWNLOAD SOURCE CODE .ZIP HERE