Introducing JSON
page 7 of 9
by Bilal Haidar
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 49411/ 103

Sample Demo

In this last section of this article, I am going to provide a sample demo. We will go through the code step-by-step and show you all the needed information to enable you to develop such AJAX/JSON enabled ASP.NET web applications.

Figure 1: JSON Demo Web Application



To start with, let me explain the main idea of the application. As you can see from the form above, it asks the users to select an employee name from the DropDownList. Once an employee is selected using AJAX/JSON, the details of the selected employee will be shown below the DropDownList.

Listing 10 show the code of the above ASP.NET web form.

Listing 10

<div id="page">
        <div id="header">
            <h1>Populating Data with JSON</h1>
        <div id="content">
            Select an employee to check his/her record:<br />
            <asp:DropDownList ID="ddlEmployees" runat="server" onchange="GetEmployeeDetails()">
                <asp:ListItem Value="-1" Text="Select Employee"></asp:ListItem>
                <asp:ListItem Value="1" Text="Bilal"></asp:ListItem>
                <asp:ListItem Value="2" Text="Wessam"></asp:ListItem>
                <asp:ListItem Value="3" Text="Sami"></asp:ListItem>
                <asp:ListItem Value="4" Text="Haissam"></asp:ListItem>
            <br /><br />
            <div id="statusDisplay">
                <div id="innerStatusDisplay"></div>
            <br /><br />
            <div id="employeeDetails" style="visibility:hidden">
                    <tr style="font-weight: bold">
                        <td>First Name</td><td>Last Name</td><td>Years of Experience</td>
                        <td class="datacell"><span id="empFname"></span></td>
                        <td class="datacell"><span id="empLname"></span></td>
                        <td class="datacell"><span id="empExperience"></span></td>

An onchange function has been added to the DropDownList so that, when the user selects an item from the DropDownList, a JavaScript function will be fired! The JavaScript method to fire named GetEmployeeDetails will start an AJAX request to the server by requesting an ASP.NET web form and supplying the employee ID to whom the details should be displayed.

Listing 11: GetEmployeeDetails function

function GetEmployeeDetails() {    
    postRequest = new HttpRequest();
    postRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    postRequest.failureCallback = requestFailed;
    // Get Employee Selected
    var n = document.forms[0].elements["ddlEmployees"].selectedIndex;
    var empID = document.forms[0].elements["ddlEmployees"].options[n].value;
    // Validate the employee ID
    if (empID == -1) {
        setStatusText("Please select a valid employee.");
    var empID = encodeURI(empID);    
    postRequest.url = "GetEmployeeDetails.aspx";
    postRequest.successCallback = responseOK;"EmpID=" + empID);

The function starts by creating a new instance of the XmlHttpRequest object using a wrapper class called HttpRequest. Then it defines the content type of the request and the failure callback method in case a problem happened while sending the request or receiving a response from the server.

The HttpRequest is a wrapper class created by Mike Hall. Mike has a very educative article on AJAX and I recommend every one of you to check it out and learn from it. It is an AJAX reference if you are planning to introduce AJAX to your web applications. The article can be found here. In last page of this article Mike presents the HttpRequest object which is nothing but a wrapper over the XMLHttpRequest object in either IE7 and FireFox or the different Microsoft ActiveX XmlHttpRequest objects.

The code then gets the employee that was selected from the DropDownList. The employee ID is then encoded and this step is done intentionally because the function is using POST to request another ASP.NET web form to process the request.

Finally, the URL to be requested is assigned to the URL property of the instance of the HttpRequest object and a success callback method is specified, which is the method to fire when the AAJX request is completed and that the response is OK. The last line of the method posts the asynchronous request to the server, requesting the GetEmployeeDetails ASP.NET web form.

Listing 12: GetEmployeeDetails Server side code

protected void Page_Load(object sender, EventArgs e)
// Validate the Form object
  if (Request.Form["EmpID"] != null)
    if (!string.IsNullOrEmpty(Request.Form["EmpID"].ToString()))
// Request is OK
      this.requestOK = true;
// Get the value of the EmployeeID
      Employee employee = null;
      int empID = Convert.ToInt32(Request.Form["EmpID"].ToString());
// Prepare object
      switch (empID)
        case 1:
// Employee Bilal was selected
          employee = new Employee("Bilal", "Haidar", 1, new string[]
        case 2:
// Employee Wessam was selected
          employee = new Employee("Wessam""Zeidan", 2, new string[]
            "2004""2005", "2006"
        case 3:
// Employee Sami was selected
          employee = new Employee("Sami""Souki", 3, new string[]
        case 4:
// Employee Haissam was selected
          employee = new Employee("Haissam""Abdul Malak", 4, new string[]
// Wrong Employee Selected
          this.requestOK = false;
      Response.ContentType = "application/json";
      if (this.requestOK)
// Prepare JSON response
        string output = Newtonsoft.Json.JavaScriptConvert.SerializeObject

The page load of GetEmployeeDetails page first retrieves the employee ID that was posted to it through the AJAX request. This is just a dummy code that will use a C# switch statement to check the employee ID and accordingly a new Employee object is constructed.

Once the employee object is created, the code clears the current response and sets the content type of the response to application/json, which is the right content type when you are sending JSON data to the client.

After that, the employee object is serialized into a JSON string object. Finally, the JSON string object is written back to the client.

Assuming the request/response is done safely (most of the times), the requestOK function will fire on the client. This is the method that was set to the success callback method of the HttpRequest instance.

Listing 13: Success callback function

function responseOK(httpRequest)
// Assume no match was found.
  var statusText = "Employee not found!"
// Fill in the FirstName, LastName, and years of experience, if available.
// Show the employee etails
    var empDetails = document.getElementById("employeeDetails");
    if (empDetails != null) = "";
    var jsonObj = postRequest.responseText.parseJSON();
// Set the FirstName
    var fname = document.getElementById("empFname");
    if (fname != null)
      fname.innerHTML = jsonObj.FName.toJSONString();
// Set the LastName
    var lname = document.getElementById("empLname");
    if (lname != null)
      lname.innerHTML = jsonObj.LName.toJSONString();
    var exp = document.getElementById("empEmployment");
    var splitExp = "";
    for (i = 0; i < jsonObj.YearsOfEmployment.length; i++)
      splitExp = splitExp + jsonObj.YearsOfEmployment[i].toJSONString();
      if (i != (jsonObj.YearsOfEmployment.length - 1))
        splitExp = splitExp + ",";
    if (exp != null)
      exp.innerHTML = splitExp;
// Update status
    statusText = "Employee Details Found";
  catch (ex){}

The above function receives the response from the server; it parses the JSON string object into a JSON object using the JSON utility file methods. On thing to mention, you should always check if the response text is null or not before doing any parsing!

Finally, the web form is populated with the details of the employee who was selected from the DropDownList.

There are still some functions left that I did not mention in this article that are part of the demo application. Go over them and if you have any question do not hesitate to contact me and ask me about them.

The following is a snapshot of the page displaying the details of an employee that was selected from the DropDownList:

Figure 2: Demo in action

View Entire Article

User Comments

Title: www   
Name: ww
Date: 2012-12-17 2:41:58 AM
Title: Argument for Gun Control   
Name: Rick
Date: 2012-12-14 10:19:16 PM
Time to take the guns away from the crazies
Title: demo   
Name: vishal
Date: 2012-11-30 7:20:06 AM
i am new user....
Title: jason verification   
Name: madhan
Date: 2012-09-13 3:14:23 AM
I need to check the jason
Title: fsgfds   
Name: sdfg
Date: 2012-08-15 3:06:30 PM
Title: dsavsd   
Name: vsdv
Date: 2012-07-10 7:14:56 AM
Title: m,.,   
Name: ,m.,m.
Date: 2012-06-13 12:30:17 AM
Title: Re: Thanks   
Name: Bilal Haidar
Date: 2012-06-12 9:03:50 AM
Most welcome Salman :)
Title: Thanks   
Name: Salman ansari
Date: 2012-06-12 8:59:06 AM
Thankyou very much......very useful to me on learning stage of JSON
Title: answer to the query from DHEERAJ   
Name: isha
Date: 2011-05-06 2:05:06 AM
cut and paste the 2 lines of code ie.
var postRequest = new HttpRequest();
postRequest.failureCallback = requestFailed; inside the function getemployeedetails on the default.js page in the beginning. Apllication runs fine then. thank you
Title: answer to the query from DHEERAJ   
Name: isha
Date: 2011-05-06 2:03:11 AM
the query that dheeraj has asked, i faced the same. it is not the issue of IE7. if u check the Default.js page, there u will find 2 lines of code ie.
var postRequest = new HttpRequest();
postRequest.failureCallback = requestFailed;
written above the function getEmployeedetails().
please cut and paste these 2 lines inside this function in the beginning. the application runs fine then. thank you for this amazing application for beginners in JSON/JQUERY
Title: Best Tutorial   
Name: Yogesh Nandre
Date: 2011-01-20 2:35:00 AM
Best due to very easy to learn for new one...
Title: Thank You   
Name: Suresh
Date: 2010-12-06 6:26:19 AM
Very nice stuff
Title: Json   
Name: Wilmer Ferreira
Date: 2010-09-06 4:16:52 PM
In Visual Studio 2010 exits the System.Runtime.Serialization.Json namespace
Title: JSON   
Name: Reshma
Date: 2010-09-06 3:52:38 AM
This article gives me very useful and functionality information about json..
Title: JSON   
Name: Vikas
Date: 2010-05-19 12:22:22 AM
This article provides me with the great help on what i needed the most
Title: JSON   
Name: Leela
Date: 2010-03-16 12:47:50 AM
This article is very useful.
I am a beginner in .NET and i find many useful things ..)
Title: QUERY   
Date: 2009-11-30 1:24:26 AM

Plz let me know on my email id:,
Waiting for ur reply on urgent basis....
Title: Re: IE7 issue   
Name: Martin
Date: 2008-04-04 2:10:49 AM
Ok, but what can I do to make it work in IE7 ? I tryed to set postRequest = null; in the GetEmployeeDetails() method but then it turns back with an error ?
Title: Re:   
Name: Bilal Haidar [MVP]
Date: 2008-04-04 2:04:17 AM
This is not a problem in the code! I once asked about that and they said it is an IE issue!! Didn't check later what they have done to solve it!

Title: IE7 issue   
Name: Martin
Date: 2008-04-04 1:42:19 AM

I just downloaded the demo app and tested it in IE7 and when i select an "employee" from the dropdown list it shows up as expected, but when I try to choose another one from the dropdown nothing happens, is there an bug in the code ?
Title: Re:   
Name: Bilal Haidar [MVP]
Date: 2007-05-19 2:41:45 AM
Yes it is :)

Title: Where is Jason?   
Name: AbsCoder
Date: 2007-05-18 6:16:26 PM
Thanks for the article; good stuff. In the article you make mention twice of "great JSON DLL that is called Jason.NET". Perhaps, I'm dense, but I can't seem to locate said DLL. Do you mean Newtonsoft's Json.NET library? Again, thanks for your contribution to the community!

Community Advice: ASP | SQL | XML | Regular Expressions | Windows

©Copyright 1998-2023  |  Page Processed at 2023-10-03 7:14:58 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search