如何在ASP.NET MVC 5中将HTML表从局部视图导出到excel

Question

I have spent hours searching all over the internet but it seems no one has a current answer. I have a simple table set up in a PARTIAL view and want to export the data in the html table not from the database. I do not have the option of using any plugins either. I am open to doing it through JavaScript/Jquery but I am fairly new to MVC and I have exhausted other solutions on the internet.

Address Book Summary (Partial View) :

<table class="table table-bordered table-responsive table-striped" id="tblAddressBook">
    <thead>
        <tr>
            <th> @Html.DisplayNameFor(model => model.Name)</th>
            <th> @Html.DisplayNameFor(model => model.Address)</th>
         <tr>
     </thead>
     <tbody>
     @foreach (var item in Model)
        {
        <td class="text-right">@Html.DisplayFor(modelItem => item.Name)</td>
        <td class="text-right">@Html.DisplayFor(modelItem => item.Address)</td>
     }
     </tbody>
     <tfoot>
        <td class="text-right>Model.Sum(model => model.TotalPeople))</td>
        <td class="text-right>Model.Sum(model => model.Addresses))</td>
     </tfoot>

Address Book

<button type="button" class="btn btn-primary">
    Export
</button>
<div id="summaryAddressBook">
            @Html.Partial("AddressBook/_Summary", Model.Peoples)
</div>

Address Book Controller

public ActionResult Export() {
   Response.ContentType = "application/x-msexcel"; 
   Response.AddHeader("Content-Disposition", "attachment;filename=ExcelFile.xls");
   return View();
}

Answer 1

Personally, here is how I would get it done. I would use JQuery to gather up the data from the table through this:

var tableData = {}
$('#tblAddressBook > tbody  > tr').each(function() {...add each row's columns to tableData...});

Then make an AJAX call to an MVC Controller method. See Here: Making a Simple Ajax call to controller in asp.net mvc

With your data now in the controller method, you can go ahead and create your excel file with the data. I would probably go with .csv file, rather than .xls if you can, considering you most likely need a third party library to export to .xls.

Edit: Alternatively, you can skip the jquery and pass the table's model straight to the controller, see here: Pass Table Value from View to Controller MVC

Answer 2

If "Address Book Summary"(PartialView) contains only the table then change the code :-

public ActionResult Export() {
    Response.ContentType = "application/x-msexcel"; 
    Response.AddHeader("Content-Disposition", "attachment;filename=ExcelFile.xls");
    return View();
}

to :-

public ActionResult Export()
{
    Response.ContentType = "application/x-msexcel"; 
    Response.AddHeader("Content-Disposition", "attachment; filename=ExcelFile.xls");
    return PartialView("Address_Book_Partial_View_FileName_Here_Without_Extension");
}