Introduction
Web development is changing day by day, and it has been changing from day one. Nowadays, every developer has his/her own writing style. Some like pure, server side, and some like a mixture. Nowadays JavaScript is just like a boom in the market. And the way MS (Microsoft) has implemented it is a great job.
But there are still many things we do on our own. Here I am going to demonstrate an example by which we can convert an ASP.NET DataTable
in to a JSON string in two ways. It will be very useful to use it in JavaScript.
This will solve the problem for developers on how to use server data on the client side in a well structured manner.
Background
It is assumed that the person who will use this has a good knowledge of JSON and how to manipulate it in the server.
Code
public string JSON_DataTable(DataTable dt)
{
StringBuilder JsonString = new StringBuilder();
JsonString.Append("{ ");
JsonString.Append("\"TABLE\":[{ ");
JsonString.Append("\"ROW\":[ ");
for (int i = 0; i < dt.Rows.Count; i++)
{
JsonString.Append("{ ");
JsonString.Append("\"COL\":[ ");
for (int j = 0; j < dt.Columns.Count; j++)
{
if (j < dt.Columns.Count - 1)
{
JsonString.Append("{" + "\"DATA\":\"" +
dt.Rows[i][j].ToString() + "\"},");
}
else if (j == dt.Columns.Count - 1)
{
JsonString.Append("{" + "\"DATA\":\"" +
dt.Rows[i][j].ToString() + "\"}");
}
}
if (i == dt.Rows.Count - 1)
{
JsonString.Append("]} ");
}
else
{
JsonString.Append("]}, ");
}
}
JsonString.Append("]}]}");
return JsonString.ToString();
}
public string CreateJsonParameters(DataTable dt)
{
StringBuilder JsonString = new StringBuilder();
if (dt != null && dt.Rows.Count > 0)
{
JsonString.Append("{ ");
JsonString.Append("\"Head\":[ ");
for (int i = 0; i < dt.Rows.Count; i++)
{
JsonString.Append("{ ");
for (int j = 0; j < dt.Columns.Count; j++)
{
if (j < dt.Columns.Count - 1)
{
JsonString.Append("\"" + dt.Columns[j].ColumnName.ToString() +
"\":" + "\"" +
dt.Rows[i][j].ToString() + "\",");
}
else if (j == dt.Columns.Count - 1)
{
JsonString.Append("\"" +
dt.Columns[j].ColumnName.ToString() + "\":" +
"\"" + dt.Rows[i][j].ToString() + "\"");
}
}
if (i == dt.Rows.Count - 1)
{
JsonString.Append("} ");
}
else
{
JsonString.Append("}, ");
}
}
JsonString.Append("]}");
return JsonString.ToString();
}
else
{
return null;
}
}
Using the Code
As you can see, the code is very easy to understand. These functions are ready to use. You can find the full source code in the download source code section.
Using the JSON_DataTable method
- Add the namespace:
using Ravs.Factory.JSON;
- Create the object:
JSON_Class Object_JSON_Class = new JSON_Class();
- Use of first case JSON:
Object_JSON_Class.JSON_DataTable(ProvideRequiredDataTable);
Here, the above method will provide a JSON stirng which you can use on the client.
- Now put this data in someplace where it is very easy to render to the client for further use. I'll show how to put it in to a text field (the most easy one.)
Put a server text box on to your form. And do this:
ServerSideTextBox.Text= Object_JSON_Class. JSON_DataTable(ProvideRequiredDataTable);
- On the client end.. use JavaScript like this:
<script type='text/javascript'>
var oServerSideTextBox= document.getElementbyId("ServerSideTextBox");
var oServerJSON_String=eval("("+oServerSideTextBox .value+")");
alert(oServerJSON.TABLE[0].ROW[0].COL[0].DATA);
</script>
Using the CreateJsonParameters method
- Add the namespace:
using Ravs.Factory.JSON;
- Create the object:
JSON_Class Object_JSON_Class = new JSON_Class();
- Use of first case JSON:
Object_JSON_Class.CreateJsonParameters (ProvideRequiredDataTable);
Here, the above method will provide a JSON string which you can use on the client.
- Now put this data in someplace where it is very easy to render to the client for further use.. I'll show how to put it in to a text field (the most easy one):
Put a server text box on to your form. And do this.
ServerSideTextBox.Text=
Object_JSON_Class.CreateJsonParameters (ProvideRequiredDataTable);
- On the client end.. use JavaScript like this:
<script type='text/javascript'>
var oServerSideTextBox= document.getElementbyId("ServerSideTextBox");
var oServerJSON_String=eval("("+oServerSideTextBox .value+")");
alert(oServerJSON.HEAD[0].AnyColumnName);
</script>
Note: To know more, check out the source and demo projects.
Cheers :)
Solution Architect, with expertise in BFSI, Mortgage, Real Estate, Education, Fleet Domain, with more than 10 years of core knowledge of .net net technologies.