How To Process JSON With C# and JQuery

JavaScript Object Notation affectionately known as JSON is a wonderful way to deliver content to the browser in a lightweight method that can both save on bandwidth and reduce page weight.

Following example contain 3 sections
1.Call a Asp.net server method using using jQuery
2.Return the Employees as a JSON data.
3.Display the Data in a standard HTML table.

Steps

1.Make a Class Employee

   1: public class ClsEmployee

   2: {    

   3:     public string PropPubStrFirstName

   4:     {    get;    set;    }

   5:  

   6:     public string PropPubStrLastName

   7:     {    get;    set;    }

   8:  

   9:     public string PropPubStrMiddleName

  10:     {    get;    set;    }

  11:  

  12:     public Employee(string StrPriFirstName, string StrPriMiddleName, string StrPriLastName)

  13:     {

  14:         PropPubStrFirstName= StrPriFirstName

  15:         PropPubStrMiddleName= StrPriMiddleName

  16:         PropPubStrLastName= StrPriLastName

  17:     }

  18: }    

2.Now create a web method in your code behind file as

   1:  

   2: [WebMethod]

   3: public static List GetEmployees()

   4: {

   5:     const string query = "SELECT [FirstName], [MiddleName], [LastName] FROM TblEmployee";

   6:     DataTable dt = BuildDataTable(query);

   7:     List empList = null;

   8:  

   9:     if (dt != null)

  10:     {

  11:         empList = new List();

  12:  

  13:         for (int i = 0; i < dt.Rows.Count; i++)

  14:         {

  15:         empList.Add(new Employee(dt.Rows[i]["FirstName"].ToString(),

  16:         dt.Rows[i]["MiddleName"].ToString(),

  17:         dt.Rows[i]["LastName"].ToString()));

  18:         }

  19:     }

  20:  

  21:     return empList;

  22: }

  23:  

  24:  

  25: public static DataTable BuildDataTable(string query)

  26: {

  27:     SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["MyConnectionstring"].ConnectionString);

  28:     SqlDataAdapter ada = new SqlDataAdapter(query, con);

  29:     DataTable dt = new DataTable();

  30:     ada.Fill(dt);

  31:     return dt;

  32: }

3.Write a jQuery Function to get and show the data in a table.

   1: <script type="text/javascript">// <![CDATA[

   2: $(document).ready

   3: (

   4:     function() 

   5:     {

   6:         $.ajax

   7:         (

   8:             {

   9:                 type: "POST",

  10:                 url: "Default.aspx/GetTopTenEmployees",

  11:                 contentType: "application/json; charset=utf-8",

  12:                 dataType: "json",

  13:                 success: function(msg) 

  14:                 {

  15:                     BuildTable(msg.d);

  16:                 }

  17:             }

  18:         );

  19:     }

  20: );

  21:  

  22: function BuildTable(msg) 

  23: {

  24:     var table = '

  25:     <table>

  26:     <thead>

  27:     <tr>

  28:     <th>First Name</th>

  29:     <th>Middle Name</th>

  30:     <th>Last Name</th>

  31:     </thead>

  32:     <tbody>';

  33:     for (var i = 0, l = msg.length; i < l; i++)

  34:     {

  35:         var person = msg[i];

  36:         var row = '

  37:         <tr>';

  38:         row += '

  39:         <td>' + person.FirstName + '</td>';

  40:         row += '

  41:         <td>' + person.MiddleName + '</td>';

  42:         row += '<td>' + person.LastName + '</td>';

  43:         row += '</tr>';

  44:         table += row;

  45:     }

  46:     table += '</tbody></table>';

  47:     $('#Container').html(table);

  48: }

  49: </script>

  50: <div id="Container">

You can use HTTP Snipper to see the contents being returned..It will be as follows

{"d":[{"__type":"Employee","FirstName":"Gustavo","LastName":"Achong","MiddleName":""},{"__type":"Employee","FirstName":"Catherine","LastName":"Abel","MiddleName":"R."},{"__type":"Employee","FirstName":"Kim","LastName":"Abercrombie","MiddleName":""},{"__type":"Employee","FirstName":"Humberto","LastName":"Acevedo","MiddleName":""},{"__type":"Employee","FirstName":"Pilar","LastName":"Ackerman","MiddleName":""},{"__type":"Employee","FirstName":"Frances","LastName":"Adams","MiddleName":"B."},{"__type":"Employee","FirstName":"Margaret","LastName":"Smith","MiddleName":"J."},{"__type":"Employee","FirstName":"Carla","LastName":"Adams","MiddleName":"J."},{"__type":"Employee","FirstName":"Jay","LastName":"Adams","MiddleName":""},{"__type":"Employee","FirstName":"Ronald","LastName":"Adina","MiddleName":"L."}]}

As you can see we have the type of the Employee object along with the properties and values