Export an HTML table inside Razor view, as csv file

I am working on an asp.net mvc web application, and inside a razor view i will generate an HTML table, the markup is as following:-

<table class="table table-striped table-bordered bootstrap-datatable datatable">
    <tr>
        <th></th>
        <th>
            Name
        </th>
        <th class="hidden-phone hidden-tablet">
             Description
        </th>
        <th>
            User Groups
        </th>
        <th>
            Security Roles
        </th>
        <th class="hidden-phone hidden-tablet">

        </th>
    </tr>

    <tr id = "15">
        <td>
            <a href="/SecurityGroup/Edit/15">Edit</a> 
  </td>
        <td>
			<a href="/SecurityGroup/Details/15">All T Users</a>
        </td>
        <td class="hidden-phone hidden-tablet">
			this group contains all T Group users.
        </td>
        <td>
            The are <a href="/SecurityGroup/Details/15">85</a> Users.
			
        </td>
        <td>
            
           <ul>
  <li class=" icon-arrow-right"></li><a href="/SecurityRole/Details/13">Read</a>
  </ul>
        </td>
        <td class="center hidden-phone hidden-tablet">
            
          
           
            <a class="btn btn-success" href="/SecurityGroup/Details/15">
    <i class="icon-zoom-in icon-white"></i>
    Details
    </a>

        </td>
    </tr>
    <tr id = "16">
        <td>
            <a href="/SecurityGroup/Edit/16">Edit</a> 
  </td>
        <td>
			<a href="/SecurityGroup/Details/16">Services Team</a>
        </td>
        <td class="hidden-phone hidden-tablet">
			this group contains all the Core services users.
        </td>
        <td>
            The are <a href="/SecurityGroup/Details/16">10</a> Users.
			
        </td>
        <td>
            
           <ul>
  <li class=" icon-arrow-right"></li><a href="/SecurityRole/Details/17"> Services</a>
  </ul>
        </td>
        <td class="center hidden-phone hidden-tablet">
            
          
           
            <a class="btn btn-success" href="/SecurityGroup/Details/16">
    <i class="icon-zoom-in icon-white"></i>
    Details
    </a>

        </td>
    </tr>
    

</table>

now i manually select the HTML table by moving the mouse over the HTML table rows inside the browser ,, and i copy the content, then i paste it inside Excel sheet, then the HTML table will be pasted successfully inside the excel sheet,.

so my question if how i can add a link inside my razor view, which will select the html table and show it inside Excel sheet (by creating a .csv file), seems that it is not a complected tasks, as Excel sheets will automatically understand html table when
using copy/paste.

can anyone advice on this please?

a-rad

This may be of interest to you: http://forums.asp.net/t/1961968.aspx?webgrid+export+to+CSV

and: http://www.mikesdotnetting.com/article/204/exporting-the-razor-webgrid-to-excel

but the links are talking about using WebGrid to export csv files, while in my case i use an HTML table not a webgrid .. so can you advice ?

also it mentioned to use the following inside the view:-

@{
    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";
}

but i do not wwrite sql statments directly inside a view ,, and i am using EF where i pass model objects to the view,, nit sure who this code works..

Hi john,

Thanks for your post.

johnjohn123123

but the links are talking about using WebGrid to export csv files, while in my case i use an HTML table not a webgrid .. so can you advice ?

Do you want to export the html table to excel?

So I did a simple sample,you can refer to the following code snippet according to your own requirement to modify this and use it:

action:

public ActionResult mydemo1()
        {
            Response.AddHeader("Content-type", "application/vnd.ms-excel");
            return View();
        }

view:

@{
    ViewBag.Title = "mydemo1";
    Layout = "";
}

<h2>mydemo1</h2>
<style type="text/css">
    body {
        font-family:Tahoma;
    }
    h2 {
        color:red
    }
    table {
        border:1px solid black; border-spacing:0
    }
    td {
        color:green;font-size:.8em;padding:5px
    }
    .heading {
        background:#ccc
    }

</style>
<table>
    <tr class="heading">
        <th>
            Name
        </th>
        <th>
            Age
        </th>

    </tr>
    <tr>
        <td>
            Test1
        </td>
        <td>
            15
        </td>
    </tr>
    <tr>
        <td>
            Test2
        </td>
        <td>
            16
        </td>
    </tr>
</table>

Hope this can be helpful.

Best Regards,

Eileen

i find an approach which i was looking for in this link

http://jsfiddle.net/terryyounghk/KPEGU/

but i am not sure if there are any concerns in using such an approach inside asp.net MVC Razor views ?

can anyone advice please ?

johnjohn123123

but i am not sure if there are any concerns in using such an approach inside asp.net MVC Razor views ?

You can use JQuery to export the table into CSV.

In your HTML table you typically format certain columns such as currency, numbers, dates. When you export to csv using jquery these will be exported as strings and not as numbers. Sometimes this may pose problems to your users. Also in some scenarios your
users may need more or less columns in csv then what is shown in the Html table.

pprasannak

You can use JQuery to export the table into CSV

You mean same as the approach mentioned in this link
http://jsfiddle.net/terryyounghk/KPEGU/
or you are talking about different approaches ? .

pprasannak

When you export to csv using jquery these will be exported as strings and not as numbers. Sometimes this may pose problems to your users.

in my case i do not have currency or specially formatted strings.

pprasannak

Also in some scenarios your users may need more or less columns in csv then what is shown in the Html table.

but if i am not wrong this requires a lot of work, to select which columns to export , baring in mind that i have around 50 views that i need to add export capabilities to it. while exporting all the fields might not be the best solution , but end users
can manually delete unwanted columns from the Excel sheet editor…

Can you advice on this please ?

Leave a Reply