Skip to main content

Exporting/Download HTML Table as CSV File Using jQuery

Whenever we are working on any project generally we need to display data into the grid, and often we need to download those records as a excel or CSV file. So in our today’s article we will see how to download/export html table data as CSV file using JQuery.

In the jQuery there is a plugin called “tabletoCSV” which is very easy to use and it will done the task done.

Now lets see below I have created a simple “HTML table with Export as CSV button”

<body>
 <form id="myform" runat="server">
 <div>
 <table id="tabletodownload" style="border:1px solid #000;">
 <thead>
 <tr> <th> Customer Name </th> <th> Order Value </th> <th> Ordered On </th> </tr>
 </thead>
 <tbody>
 <tr> <td> Tarun </td> <td> $ 5,000 </td> <td> 7, Oct 2017 </td> </tr>
 <tr> <td> James <td> <td> $ 4,000 </td> <td> 10, Oct 2017 </td> </tr>
 <tr> <td> Vijay </td> <td> $ 3,000 </td> <td> 29, Sept 2017 </td> </tr>
 <tr> <td> Andy </td> <td> $ 2,000 </td> <td> 22, Oct 2017 </td> </tr>
 <tr> <td> Andrew </td> <td> $ 1,000 </td> <td> 29, Oct 2017 </td> </tr>
 </tbody>
 </table>
 <br />
 <button type="button" id="btnDownload"> Download as CSV</button>
 </div>
 </form>
</body>

 

Use below script to download the html table as csv file

<script type="text/javascript">
$(document).ready(function() {
$('#btnDownload').click(function() {
$("#tabletodownload").tableToCSV({
filename: 'CustomerList'
});
});
});
</script>

If we run this page in the browser then it will display like below screen and you can export tables as CSV by clicking on the ‘Download as CSV‘ button.

For the above example we need to reference to js file 1 is the JQuery file and another is the “tabletoCSV” plugin js file.

<script type="text/javascript" src="jquery.min.js" />
<script type="text/javascript" src="/jquery.tabletocsv.js" />

Output will be look like as below

 

You can download working example from this link

Serialization & Deserialization using JSON In C#

Introduction

The very useful method of converting JSON object to .Net object and .Net object to Json object is using the JsonConvert. It converts Json objects to .Net object and with the Same property with value and .Net objects to equivalent JSON object.

In this article we will see how to serialize .NET type objects into JSON object and then deserialize data in the JSON format back into .NET types using the JsonConvert class.

What is JSON?

JSON (JavaScript Object Notation) is one lightweight and efficient data exchange format or we can say like JSON is most desirable data encoding format which allows fast exchanges of small amounts of data between client browsers and web services or web api.

JsonConvert

JsonConvert class is in the namespace “Newtonsoft.Json” and for this namespace you need to add reference of Newtonsoft.Json dll or nuget package. You can install a Newtonsoft.Json nuget package by command “Install-Package Newtonsoft.Json” in package manager console.

If we want to convert .Net object to Json object then the SerializeObject() method will be used and when we want to convert Json object back to .Net object then DeserializeObject() method will be used from the JsonConvert class

JSON Serialization

Now lets see the JSON Serialization process with code example, we have an instance of Customer class as below

public class Customer
{
public int Id { get; set; }
public string Name { get; set; }
public string Email { get; set; }
public string PhoneNo { get; set; }
}

Now create an object of Customer class and initilize value of each properties. Then call SerializeObject() of JsonConvert class with passing Customer object.
See the below codesnippet

// Serializaion .Net Object
Customer customer = new Customer();
customer.Id = 1;
customer.Name = "Tarun Dudhatra";
customer.Email = "email@address.com";
customer.PhoneNo = "5*9*9 5*8*5";

// Convert Customer object to JOSN encoded format
string jsonDataString = JsonConvert.SerializeObject(customer);

Console.Write(jsonDataString);
Console.ReadKey();

It will return the JSON string as below

{"Id":1,"Name":"Tarun Dudhatra","Email":"email@address.com","PhoneNo":"5*9*9 5*8*5"}

JSON Deserialization

See the below JSON Deserialization process with code example, we have same Customer class string as below

{"Id":2,"Name":"FirstName LastName","Email":"email@address.com","PhoneNo":"5*9*9 5*8*5"}

Now call the DeserializeObject() of JsonConvert class and pass the object type of Customer so it will deserialize it into Customer Class.
See the below codesnippet

Deserializaion JSON Object

string JSONObject = @"{ 'Id':2,'Name':'FirstName LastName','Email':'email@address.com','PhoneNo':'5*9*9 5*8*5'}";

Customer customer = JsonConvert.DeserializeObject<Customer>(JSONObject);

Console.WriteLine( "Id : " + customer.Id);
Console.WriteLine( "Name : " + customer.Name);
Console.WriteLine( "Email: " + customer.Email);
Console.WriteLine( "Phone: " + customer.PhoneNo);
Console.ReadKey();

It will print the below out put on the screen

Id : 2
Name : FirstName LastName
Email: email@address.com
Phone: 5*9*9 5*8*5

That’s it, in my upcoming article we will see other interesting stuff like this.