This article will show you how you can export the gridview
or table data into json format using
jQuery in asp.net and c#.net.
Some of my previous articles are as follows: Retrieve
Connection String From Web.config In ASP.net Using C#.Net
(AppSettings,ConnectionStrings), Html
Table With Its Attributes Or Css Table Attributes, Bind
GridView To DataTable and Convert GridView Data Into Chart In Asp.Bet Using
jQuery, Access
Hidden Or HiddenFor Fields Value At Controller End In Asp.Net Mvc Using C#,
Li
Html Tag Styling By Css3 With Dynamic Circular Item Count In Asp.Net In Asp.Net,
jQuery
DateTime Picker Calendar With Plush & Minush Date Changer In Asp.Net,
Dynamic
Thumbnails Image Preview Slider With Zoom Effect Using jQuery In Asp.Net and
C#.Net.
So for this article first we will create a new asp.net
application and add the below code into the page.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication4.WebForm1"
%>
<!DOCTYPE html
PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Export GridView Or Table Data Into jSon Format Data By C#.Net In Asp.net Using
jQuery </title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="Js/html2canvas.js" type="text/javascript"></script>
<script src="Js/jquery.base64.js" type="text/javascript"></script>
<script src="Js/tableExport.js" type="text/javascript"></script>
<script>
function
data() {
var
data = $('#<%=GridView1.ClientID %>').tableExport({ type: 'json', escape: 'false'
});
alert(data);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:GridView ID="GridView1" runat="server" Width="30%">
</asp:GridView>
<br />
<input type="button" value="Export to Json" id="btnExport" onclick="javascript:data();"
/>
</form>
</body>
</html>
|
In above code I have added javascript library reference into the header of the page, and add the javascript code into the header of the page. Now add a gridview into the page.
Now open the .cs page and add the below code to bind the
gridview.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
namespace WebApplication4
{
public partial class WebForm1 : System.Web.UI.Page
{
protected
void Page_Load(object
sender, EventArgs e)
{
DataTable
dt = new DataTable();
if
(!IsPostBack)
{
dt = GetDataToBind();
GridView1.DataSource = dt;
GridView1.DataBind();
}
}
public
DataTable GetDataToBind()
{
DataTable dt = new
DataTable("SaleData");
dt.Columns.Add(new DataColumn("Month", typeof(string)));
dt.Columns.Add(new DataColumn("Sale", typeof(string)));
DataRow
dr1 = dt.NewRow();
dr1["Month"]
= "Group 1";
dr1["Sale"]
= "10000";
dt.Rows.Add(dr1);
DataRow
dr2 = dt.NewRow();
dr2["Month"]
= "Group 2";
dr2["Sale"]
= "34300";
dt.Rows.Add(dr2);
DataRow
dr3 = dt.NewRow();
dr3["Month"]
= "Group 3";
dr3["Sale"]
= "23400";
dt.Rows.Add(dr3);
DataRow
dr4 = dt.NewRow();
dr4["Month"]
= "Group 4";
dr4["Sale"]
= "30040";
dt.Rows.Add(dr4);
DataRow
dr5 = dt.NewRow();
dr5["Month"]
= "Group 5";
dr5["Sale"]
= "3422";
dt.Rows.Add(dr5);
return
dt;
}
}
}
|
In above I have added code to bind the gridview. Now we have done run the application to check the output.
Now click on the button to export the table or gridview data
into the json format.
About the Author
0 comments:
Please let me know your view