In this article I will explain with an example, how to export HTML Table data to Excel file in ASP.Net Core MVC.
View
The ASP.Net TagHelpers is inherited inside the View.
The View consists of an HTML Table and an HTML Form which has been created using following ASP.Net Tag Helpers attributes.
asp-action – Name of the Action. In this case the name is Export.
asp-controller – Name of the Controller. In this case the name is Home.
method – It specifies the Form Method i.e. GET or POST. In this case it will be set to POST.
The Form consists of an HTML Hidden Field element and a Submit button.
Inside the jQuery document ready event handler, the Submit button has been assigned a jQuery Click event handler.
When the Submit button is clicked, the contents of HTML DIV dvCustomers is extracted and set into the Hidden Field element.
Finally, the Form is submitted and the contents of the Hidden Field are sent to the Controller’s Action method (Export).
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div id="dvCustomers">
<table style="border: 1px solid B8DBFD; border-collapse: collapse; font-size: 10pt; font-family: Arial;">
<tr>
<th style="background-color: #B8DBFD; padding: 5px; border: 1px solid B8DBFD;">Customer Id</th>
<th style="background-color: #B8DBFD; padding: 5px; border: 1px solid B8DBFD;">Name</th>
<th style="background-color: #B8DBFD; padding: 5px; border: 1px solid B8DBFD;">Country</th>
</tr>
<tr>
<td style="padding: 5px; border: 1px solid B8DBFD;">1</td>
<td style="padding: 5px; border: 1px solid B8DBFD;">John Hammond</td>
<td style="padding: 5px; border: 1px solid B8DBFD;">United States</td>
</tr>
<tr>
<td style="padding: 5px; border: 1px solid B8DBFD;">2</td>
<td style="padding: 5px; border: 1px solid B8DBFD;">Mudassar Khan</td>
<td style="padding: 5px; border: 1px solid B8DBFD;">India</td>
</tr>
<tr>
<td style="padding: 5px; border: 1px solid B8DBFD;">3</td>
<td style="padding: 5px; border: 1px solid B8DBFD;">Suzanne Mathews</td>
<td style="padding: 5px; border: 1px solid B8DBFD;">France</td>
</tr>
<tr>
<td style="padding: 5px; border: 1px solid B8DBFD;">4</td>
<td style="padding: 5px; border: 1px solid B8DBFD;">Robert Schidner</td>
<td style="padding: 5px; border: 1px solid B8DBFD;">Russia</td>
</tr>
</table>
</div>
<br />
<form asp-action="Export" asp-controller="Home" method="post">
<input type="hidden" name="GridHtml" />
<input type="submit" id="btnSubmit" value="Export" />
</form>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btnSubmit").click(function () {
$("input[name='GridHtml']").val($("#dvCustomers").html());
});
});
</script>
</body>
</html>
Namespaces
You will need to import the following namespace.
Controller
The Controller consists of following two Action methods.
Action method for handling GET operation
Inside this Action method, simply the View is returned.
Action method for handling the Excel File Export and Download operation
This Action method is executed when the Submit button is clicked.
Note: The following Action method performs File Download and hence the return type is set to FileResult.
Inside this Action method, the contents of HTML DIV sent from the View is extracted from the GridHtml parameter.
Then, the string is read and converted to a Byte Array using the GetBytes method of Encoding class.
Finally, the Byte Array is exported and downloaded as Excel file using the File function.
public class HomeController : Controller
{
public IActionResult Index()
{
return View();
}
[HttpPost]
public FileResult Export(string GridHtml)
{
return File(Encoding.ASCII.GetBytes(GridHtml), "application/vnd.ms-excel", "Grid.xls");
}
}
Screenshots
The HTML Table
![ASP.Net Core MVC: Export Html Table data to Excel]()
The Exported Excel file
![ASP.Net Core MVC: Export Html Table data to Excel]()
Downloads
