Rita Rita - 1 year ago 214
ASP.NET (C#) Question

Export HTML Table to Excel

I have HTML table on the ASP.NET MVC View page. Now I have to export this table to Excel.

(1) I have used partial view (Inquiries.ascx) to display the table data from database (using LINQ to Entity)
(2) I also have used UITableFilter plugin to filter the records (Ex: http://gregweber.info/projects/demo/flavorzoom.html )

(3) At any point of time, I have to filter the visible records to Excel.

Appreciate your responses.



Here is my View:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Mvc.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="Content2" ContentPlaceHolderID="cphHead" runat="server">
<script src="../../Scripts/jquery.tablesorter.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.uitablefilter.js" type="text/javascript"></script>

<script type="text/javascript">
//Load Partial View

// To Apply Filter Expression using uiTableFilter plugin
$("#searchName").keyup(function() {
$.uiTableFilter($("#tblRefRequests"), this.value);
$("#tblRefRequests").tablesorter({ widthFixed: true, widgets: ['zebra'] });

//Export the HTML table contents to Excel
$('#export').click(function() {
//Code goes here


//Main Content
<asp:Content ID="Content1" ContentPlaceHolderID="cphContent" runat="server">
<h2 class="pageName">View All Inquiries</h2>
<input type="submit" value="Export to Excel" id="export" />
<div id='MyInquiries'></div>

Strongly Typed Partial view user control (Inquiries.ascx) to generate table:

<tr><td valign ="middle">Filter Expression: <%= Html.TextBox("searchName")%></td></tr>
<table id="tblRefRequests" >
<th>TX Date</th>
<th>Email Address </th>
<th>Document Name</th>

<% foreach (var item in Model) { %>
<td visible =false><%= item.RequestID %></td>
<td><%= String.Format("{0:d}", item.RequestDate) %></td>
<td><%= item.CustomerName %></td>
<td><%= Html.Encode(item.Email) %></td>
<td><%= item.ProductName %></td>
<td><%= Html.Encode(item.DocDescription)%></td>
<% } %>

Here is my Controller code to load the Inquiries partial view:

public PartialViewResult Inquiries()
var model = from i in myEntity.Inquiries
where i.User_Id == 5
orderby i.TX_Id descending
select new {
RequestID = i.TX_Id,
CustomerName = i.CustomerMaster.FirstName,
RequestDate = i.RequestDate,
Email = i.CustomerMaster.MS_Id,
DocDescription = i.Document.Description,
ProductName = i.Product.Name
return PartialView(model);

Answer Source

Try the jQuery plugin: table2csv. Use the argument, delivery:'value', to return the csv as a string.

Here is an implementation:

  1. Add a regular html input button and a .NET HiddenField to the page
  2. Add an onclick event to that button called "Export"
  3. Create a javascript function, Export, that stores the return value of table2CSV() into the hidden field, and posts back.
  4. The server receives the hiddenfield post data (the csv as a string)
  5. The server outputs the string to the browser as a csv file


// javascript  
function Export()  
    $('#yourHiddenFieldId').val() = $('#yourTable').table2CSV({delivery:'value'});  
    __doPostBack('#yourExportBtnId', '');  

// c#  
        Response.ContentType = "text/csv";  
        Response.AddHeader("Content-Disposition", "attachment; filename=TheReport.csv");  
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download