DataTable To JSON Array

Share |

In this post I will discuss about converting any data table in the JSON array. JSON can be very effectively used for Ajax operations since data handling becomes more easier in case of JSON. Here I will not discuss how to use JSON in Ajax. I will simply provide code for converting Data Table into JSON Array.
Remember to add System.Web.Script.Serialization and System.Globalization; namespaces
Let us assume a demo table as below (DOWNLOAD)
<br /> <br /> public static DataTable DT<br /> {<br /> get<br /> {<br /> //Write your DataBase Logic Here.<br /> DataTable dt1 = (DataTable)HttpContext.Current.Session["DT"];<br /> if (dt1 == null)<br /> {<br /> dt1 = new DataTable();<br /> dt1.TableName = "GENERAL";<br /> dt1.Columns.Add(new DataColumn("EmpId", typeof(string)));<br /> dt1.Columns.Add(new DataColumn("Name", typeof(string)));<br /> dt1.Columns.Add(new DataColumn("Designation", typeof(string)));<br /> dt1.Columns.Add(new DataColumn("Department", typeof(string)));<br /> dt1.Columns.Add(new DataColumn("Contry", typeof(string)));<br /> dt1.Rows.Add(new object[] { "0", "A", "Manager", "Mech", "India" });<br /> dt1.Rows.Add(new object[] { "1", "B", "Team Leader", "Mech", "India" });<br /> dt1.Rows.Add(new object[] { "2", "C", "Team Leader", "IT", "India" });<br /> dt1.Rows.Add(new object[] { "3", "D", "Team Leader", "Mech", "India" });<br /> dt1.Rows.Add(new object[] { "4", "E", "Sw Developer", "IT", "India" });<br /> dt1.Rows.Add(new object[] { "5", "F", "Sw Developer", "IT", "India" });<br /> dt1.Rows.Add(new object[] { "6", "G", "Sw Developer", "IT", "India" });<br /> dt1.Rows.Add(new object[] { "7", "H", "Sw Developer", "IT", "India" });<br /> dt1.Rows.Add(new object[] { "8", "I", "Sr. Sw Developer", "IT", "India" });<br /> dt1.Rows.Add(new object[] { "9", "J", "Sr. Sw Developer", "IT", "India" });<br /> dt1.Rows.Add(new object[] { "10", "K", "Sr. Sw Developer", "IT", "India" });<br /> dt1.Rows.Add(new object[] { "11", "L", "Sr. Sw Developer", "IT", "India" });<br /> HttpContext.Current.Session["DT"] = dt1;<br /> }<br /> <br /> return dt1;<br /> }<br /> set<br /> {<br /> //Write your DataBase Logic Here.<br /> HttpContext.Current.Session["DT"] = value;<br /> }<br /> <br /> }<br /> <br />
For this table JSON output will be as below
<br /> <br /> { "Rows" :[{"EmpId":"0","Name":"A","Designation":"Manager","Department":"Mech","Contry":"India"},{"EmpId":"1","Name":"B","Designation":"Team Leader","Department":"Mech","Contry":"India"},{"EmpId":"2","Name":"C","Designation":"Team Leader","Department":"IT","Contry":"India"},{"EmpId":"3","Name":"D","Designation":"Team Leader","Department":"Mech","Contry":"India"},{"EmpId":"4","Name":"E","Designation":"Sw Developer","Department":"IT","Contry":"India"},{"EmpId":"5","Name":"F","Designation":"Sw Developer","Department":"IT","Contry":"India"},{"EmpId":"6","Name":"G","Designation":"Sw Developer","Department":"IT","Contry":"India"},{"EmpId":"7","Name":"H","Designation":"Sw Developer","Department":"IT","Contry":"India"},{"EmpId":"8","Name":"I","Designation":"Sr. Sw Developer","Department":"IT","Contry":"India"},{"EmpId":"9","Name":"J","Designation":"Sr. Sw Developer","Department":"IT","Contry":"India"},{"EmpId":"10","Name":"K","Designation":"Sr. Sw Developer","Department":"IT","Contry":"India"},{"EmpId":"11","Name":"L","Designation":"Sr. Sw Developer","Department":"IT","Contry":"India"}]} <br /> <br />
Add following functions to build JSON string from an object
<br /> <br /> // <summary><br /> /// Quotes the string.<br /> /// </summary><br /> /// <param name="s">The s.</param><br /> <br /> /// <param name="sb">The sb.</param><br /> void QuoteString(string s, StringBuilder sb)<br /> {<br /> QuoteString(s, '"', sb);<br /> }<br /> /// <summary><br /> /// Quotes the string.<br /> /// </summary><br /> /// <param name="s">The s.</param><br /> /// <param name="quoteChar">The quote char.</param><br /> /// <param name="sb">The sb.</param><br /> void QuoteString(string s, char quoteChar, StringBuilder sb)<br /> {<br /> if (s == null || (s.Length == 1 && s[0] == '\0'))<br /> {<br /> sb.Append(new String(quoteChar, 2));<br /> return;<br /> }<br /> <br /> char c;<br /> int len = s.Length;<br /> <br /> sb.EnsureCapacity(sb.Length + s.Length + 2);<br /> <br /> sb.Append(quoteChar);<br /> <br /> for (int i = 0; i < len; i++) { c = s[i]; switch (c) { case '\\': sb.Append("\\\\"); break; case '\b': sb.Append("\\b"); break; case '\t': sb.Append("\\t"); break; case '\r': sb.Append("\\r"); break; case '\n': sb.Append("\\n"); break; case '\f': sb.Append("\\f"); break; default: if (c < ' ') { sb.Append("\\u"); sb.Append(((int)c).ToString("x4", CultureInfo.InvariantCulture)); } else if (c == quoteChar) { sb.Append("\\"); sb.Append(c); } else { sb.Append(c); } break; } } sb.Append(quoteChar); }
Above functions will be responsible to convert an object into JSON variable, now we will write one function which will break the table and call above functions, which in turn update the string builder.
<br /> public void DTSerialize(object o, StringBuilder sb)<br /> {<br /> DataTable dt = o as DataTable;<br /> <br /> if (dt == null)<br /> throw new NotSupportedException();<br /> <br /> DataColumnCollection cols = dt.Columns;<br /> DataRowCollection rows = dt.Rows;<br /> <br /> bool b = true;<br /> <br /> sb.Append('[');<br /> <br /> foreach (DataRow row in rows)<br /> {<br /> if (b) { b = false; }<br /> else { sb.Append(","); }<br /> <br /> sb.Append('{');<br /> <br /> bool bc = true;<br /> <br /> foreach (DataColumn col in dt.Columns)<br /> {<br /> if (bc) { bc = false; }<br /> else { sb.Append(","); }<br /> <br /> QuoteString(col.ColumnName, sb);<br /> sb.Append(':');<br /> JavaScriptSerializer JS = new JavaScriptSerializer();<br /> JS.Serialize(row[col], sb);<br /> }<br /> <br /> sb.Append('}');<br /> }<br /> <br /> sb.Append(']');<br /> }<br />
In page load we will simply call following code, this will convert table into JSON string and write it on Page.
<br /> protected void Page_Load(object sender, EventArgs e)<br /> {<br /> <br /> StringBuilder sb = new StringBuilder();<br /> DTSerialize(DT, sb);<br /> sb.Insert(0, " { \"Rows\" :", 1);<br /> sb.Insert(sb.Length, "}", 1);<br /> string jsStr = "var Table = " + sb.ToString();<br /> Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "", jsStr, true);<br /> Response.Write(sb.ToString());<br /> <br /> <br /> }<br />
In above code I have registered JAVA script block as well, this just for demo purpose; if we put following code we will get an alert with first employee ID.
<br /> <script language="javascript"> alert(Table.Rows[0].EmpId); </script><br />
Download Demo Code Here --> DataTableToJSONArray.zip

Read more...

Export Grid To Excel

Share |

This is simple code to export gridview data in export to excel.

Here I assume that Data table name is “_sampleData” and it is already there. To execute the code I also assumed that button names “Button1” is also present and I have called one function named “GridExportToExcel” on click event of that button.

Following is the function to export Gridview control to excel function has two parameters one is gridview object and name of the excel file. This function generates excel file in “.xls” format.

<br /> <br /> public void GridExportToExcel(GridView gv, string exportedFileName)<br /> {<br /> HttpContext.Current.Response.ClearHeaders();<br /> HttpContext.Current.Response.Clear();<br /> HttpContext.Current.Response.Buffer = true;<br /> HttpContext.Current.Response.AddHeader("content-disposition", "attachment;filename=" + exportedFileName + ".xls");<br /> HttpContext.Current.Response.ContentType = "application/vnd.ms-excel";<br /> HttpContext.Current.Response.Charset = "";<br /> System.IO.StringWriter oStringWriter = new System.IO.StringWriter();<br /> System.Web.UI.HtmlTextWriter oHtmlTextWriter = new System.Web.UI.HtmlTextWriter(oStringWriter);<br /> gv.RenderControl(oHtmlTextWriter);<br /> HttpContext.Current.Response.Write(oStringWriter.ToString());<br /> HttpContext.Current.Response.End();<br /> }<br /> <br />

Download Demo Code here --> ExportToExcelDemo.zip

Read more...

News Feed - Web User Control

Share |

This is very simple code to create web user control to display News Feeds. Using this user can change properties of News Feeds and set his/her own url, number of news to display.

This code is developed in ASP.NET using C#, JavaScript and Simple HTML.

Lets step by step develop web user control for feeds

--------------------- Step 1 --------------------------------

Create one Web User control Named NewsFeed. Copy Past following code in C# file i.e. in ascx file. Just check out Properties in the code.

<br /> public partial class NewsFeed : System.Web.UI.UserControl;<br /> {<br /> public string feedUrl = "http://www.moneycontrol.com/rss/business.xml";<br /> public string feedNumber = "10";<br /> public string errMessage = "Error Occured while Fetching Feeds!";<br /> protected void Page_Load(object sender, EventArgs e)<br /> {<br /> <br /> }<br /> public string feed { set { feedUrl = value; } }<br /> public string NumberOfFeeds { set { feedNumber = value; } }<br /> public string ErrorMessage { set { errMessage = value; } }<br /> }<br /> <br />

--------------------- Step 2 --------------------------------

Here we will use google code to read feeds and retrieve data. For more information you can check Google Code.

Put following Code in HTML view of same Web User Control. Following code will include google JSAPI file in your code, and it will load Google Ajax Feed API.

<script type="text/javascript" src="http://www.google.com/jsapi"></script><br /> <script type="text/javascript"> google.load("feeds", "1") //Load Google Ajax Feed API (version 1) </script><br /> <br /> <div id="feeddiv"></div>

--------------------- Step 3 --------------------------------

We will use following code to set properties of Web User control in javaScript. Check out variables "feedUrl" , "feedNumber"; these variables are set in ASCX file. "feeddiv" is a div tag set in above code. We will display our feed in this div tag.

<br /> <script type="text/javascript"> <br /> var feedcontainer=document.getElementById("feeddiv")<br /> window.onload=function(){ rssfeedsetup('<%= feedUrl %>','<%=feedNumber%>') } </script><br />

--------------------- Step 4 --------------------------------

Following code takes care of Feeds retrieval, and manipulate HTML which we are suppose to display in Div tag discussed above.

"display" feed function automatically get called once we retrieve feeds using googleFeed.

"errMessage" is set in ASCX page. Which can be set as property of Web User Control.

This is very simple code to develop. Any one with basic understanding of HTML, JavaScript and ASPX can develop web user control to display Feeds.

Download Demo Code here --> NewsFeeds.zip

Read more...