Exporting The Razor WebGrid To Excel

4.5 (14 votes)

This article looks at how you can provide your users with the ability to export the contents of a Razor Web Pages WebGrid to an Excel file.

First, I should point out that the methods featured in this article result in a chunk of HTML being saved with a .xls extension. Since HTML is supported natively by Microsoft Office, the resulting file will open in Excel (almost) happily. You may get a warning that the file format doesn't match the extension when opening the file, but if you accept that warning, the data will display just fine. However, the file will not work as a data source for a mail merge, nor can you connect to it via OleDB.

The first thing you need is a grid:

@{
    Page.Title = "Export To Excel";
    var db = Database.Open("Northwind");
    var query = "SELECT CustomerID, CompanyName, ContactName, Address, City, Country, Phone FROM Customers";
    var data = db.Query(query);
    var grid = new WebGrid(data, ajaxUpdateContainerId: "grid");
}
<h1>Export to Excel</h1>
<div id="gridContainer">
    <div id="grid">
        @grid.GetHtml(    
            tableStyle : "table",
            alternatingRowStyle : "alternate",
            headerStyle : "header",
            columns: grid.Columns(
                grid.Column("CustomerID", "ID"),
                grid.Column("CompanyName", "Company Name"),
                grid.Column("ContactName", "Contact Name"),
                grid.Column("Address"),
                grid.Column("City"),
                grid.Column("Country"),
                grid.Column("Phone")
            )
        )
        <img src="/images/excel-icon.png" id="excel" alt="Export to Excel" title="Export to Excel" />
    </div>
</div>

When the user clicks on the image, it should result in the data being downloaded as an Excel file. At the moment, it is just an image, and it appears below the grid. Here's a little bit of jQuery to move the image to the footer area of the grid and to change the cursor when the user hovers over it:

<script type="text/javascript">
    $(function () {
        $('#excel').appendTo($('tfoot tr td')).on('hover', function () {
            $(this).css('cursor', 'pointer');
        });
        $('#excel').on('click', function () {
            $('<iframe src="/GenerateExcel"></iframe>').appendTo('body').hide();
        });
    });
</script>

The jQuery code also adds a handler to the click event of the image. It creates an iframe which it then adds to the body element, and then it makes the display property equal 'none' using the jQuery hide command. The src for the iframe is a file called GenerateExcel.cshtml, which is responsible for creating the Excel file. The hidden iframe technique is a clean way to manage downloads via AJAX without leaving the current page. Adding an iframe dynamically like this effectively "sucks" the HTTP response from the src URL through to the current page.

Here's the code for GenerateExcel:

@{
    Layout = null;
    var db = Database.Open("Northwind");
    var sql = "SELECT CustomerID, CompanyName, ContactName, Address, City, Country, Phone FROM Customers";
    var data = db.Query(sql);
    var grid = new WebGrid(data, canPage: false, canSort: false);
    Response.AddHeader("Content-disposition", "attachment; filename=report.xls");
    Response.ContentType = "application/octet-stream";
}
@grid.GetHtml(
    columns: grid.Columns(
        grid.Column("CustomerID", "ID"),
        grid.Column("CompanyName", "Company Name"),
        grid.Column("ContactName", "Contact Name"),
        grid.Column("Address"),
        grid.Column("City"),
        grid.Column("Country"),
        grid.Column("Phone")
    )
)

As with any file that is intended to deliver a non-html response, the Layout is set to null to prevent stray HTML being included in the output. The same query is executed against the database and a WebGrid is created and printed to the page. The WebGrid has paging and sorting disabled, which results in all the data from the query being displayed. The Content-Disposition value is set to attachment, and the Content-type is set to application/octet-stream. This combination results in the browser offering a choice to the user - save or open, rather than attempting to display the response.

This all works fine, but there is a limitation. The WebGrid only accepts CSS class names as a means to style the output. That works in a web page but not in an Excel worksheet. If you want to have any control over the style of your worksheet, you have to eschew the WebGrid in favour of your own HTML table, where you can inject inline styles. Here's a revised version of GenerateExcel.cshtml that adds gridlines to the cells, and make the header row bold:

@{
    Layout = null;
    var db = Database.Open("Northwind");
    var sql = "SELECT CustomerID, CompanyName, ContactName, Address, City, Country, Phone FROM Customers";
    var data = db.Query(sql);
    var columns = data.First().Columns;
    Response.AddHeader("Content-disposition", "attachment; filename=report.xls");
    Response.ContentType = "application/octet-stream";
}
<table style="border: 1px solid #a59f9f;">
    <tr style="font-weight: bold">
    @foreach(var column in columns){
        <td style="border: 1px solid #a59f9f;">@column</td>
    }
    </tr>
    @foreach(var row in data){
        <tr>
        @foreach(var column in columns){
            <td style="border: 1px solid #a59f9f;">@row[column]</td>
        }
        </tr>
    }
</table>

And there you have it. As was mentioned at the top of this article, the files generated through this method ar pseudo-Excel files. The technique only works if you generate 97-2003 Excel files (.xls extension). If you attempt to generate OpenXML-based Excel 2007+ (.xlsx) files, the result will fail to open. If you need to generate files that can act as OLEDB data sources, or you need to have an 'x' on the end of your file extension, you should use OLDB to generate the files instead.

The source code for the sample site that accompanies this article is available as a GitHub repo.

 

Date Posted:
Last Updated:
Posted by:
Total Views to date: 26774

2 Comments

- Nathan

Great article as always, thank you!

Quick question. What is the correct method for altering the javascript for it to call the GenerateExcel method by passing it a variable containing an ID. This could then be used to query the SQL and thus return a subset of the customers table.

My approach so far is to append a query string to the iframe "src" value. This seems to generate the correct outcome but I cannot figure out the syntax for it using an ID variable from razor code in the same file?

Thanks

$('<iframe src="GenerateExcelStyled?id=">

- David

Thank you for the great article, it was very helpful.

Is there a way to have the freeze pane option automatically inserted into the export?

Recent Comments

Praveen 12/02/2016 14:22
In response to Migrating Classic ASP To ASP.NET Razor Web Pages Part One- Razor Syntax And Visual Basic
Nicely written article, just what I wanted to get me started, I am going to start working on a this...

Whitney W. 11/02/2016 15:37
In response to Adding A Controller
I am really new to everything and just started programming. I really need help in my project since I...

Fredrik 11/02/2016 13:10
In response to Request.Form Is Empty When Posting To ASPX Page
It worked. Thank you!...

David Valdez 11/02/2016 03:08
In response to Reading Excel Files Without Saving To Disk In ASP.NET
Muchas, muchas, gracias. Thank you so much from Dominican Republic....

Zahid 10/02/2016 00:42
In response to How To Send Email In ASP.NET MVC
Hello Sir, Great post. Just a quick question, is it possible if we can ask a client to save in an...

Al Wilton 07/02/2016 03:11
In response to Windows Authentication With ASP.NET Web Pages
I've been using this advise for quite a while. Today I was setting up a .NET 4.6.1 site and it drove...

Anders 06/02/2016 15:38
In response to iTextSharp - Working with Fonts
Thanks a lot for this excellent series on iTextSharp....

J_R 06/02/2016 02:45
In response to Simple File Download Protection with ASP.NET
Mike, Thank you for taking the time to write this. It really helped me - though I could not out a...

Nemat 04/02/2016 16:24
In response to Solved - The Microsoft.ACE.OLEDB.12.0 provider is not registered on the local machine
Installing Microsoft Access Database Engine 2010 64 bit helped me. Thanks A lot!...

Bill Barbour 03/02/2016 18:34
In response to ASP.NET MVC 5 with EF 6 - Working With Files
Wonderful example. I have it all working. I would like to add the image to each row of the index you...