How to work with JSON?

JSON stands for JavaScript Object Notation which is the open standard for data interchange that is language independent. There are different parsers for different languages. We can represent JavaScript objects in JSON format and then send as part of Ajax request. Just like, if we return a C# (or VB etc.) object from action method in our controller class then MVC is capable for converting object into JSON format to return to the browser.

Using JSON is preferred over XML for data interchange between browser and server as

JSON represents most of the data structures that XML represents but we can do so with a smaller payload. The same object can be presented in XML and JSON but JSON representation is much smaller in size that's why making it a better solution to transmit objects to the browser. Also, working with JSON in our JavaScript code is easier than working with XML.

ASP.NET MVC include features that make object sending using JSON very easy. We

have been using partial views to send response back to browser. Sending HTML in response for a request can be limited as data can not be easily manipulated at the browser. This is a better approach to send data and create the HTML in the browser.

Return of JSON from Action Method

Using an action method to return the JSON is very simple implementation. We need to do the following:

• Set return type to JsonResult of the action method.

• Create object and return it using Json object to serialize the object to JSON.

The example in Figure 1 below shows an MVC action method which returns a pet object in JSON format.

Figure 1. Returning JSON from an Action Method

CAUTION: PLEASE AVOID JSON RETURN WITH HTTP GET

Returning Json from action method is by default enabled but only for HTTP post. Using HTTP GET is not recommended in the situations where sensitive data need to be sent as there is possibility that malicious user could use JSON hijacking technique get access to the information that is sent. An excellent article explaining this vulnerability which is available athttp://bit.ly/JSON-Hijacking.

If we use HTTP Get then we have to pass a second parameter to the Json serialization with value JsonRequestBehavior.AllowGet. Example given below:

 

Use of JSON in the Browser

we have a JSON object returned by the action method. Let’s display data in browser. First, let’s add a form which will request a pet information from the action method created in Figure 1 and use code given in code shown in Listing Figure 2. Note that there is a hidden field added to illustrate passing the parameter using HTTP Post.

 

Figure 2. Ajax Form that Get JSON Object from Action Method

The definition of AjaxOptions object does not include UpdateTargetId property. This is because we are getting only data, so the response is not ready to be rendered upon arrival. That’s why we have added a handler for the OnSuccess callback. If we get response successfully then it will be a JSON object containg information about the pet.

The callback function showPetDetails() is shown in Figure 3. First, the function verifies that the response is not null. A null value would mean the pet was not found. If the pet was not found then a message will be displayed. If the pet is found and get a proper JSON object then we will use it to create table with the information. The result is shown in Figure 4.

 

Figure 3. Use of JSON Object to Display Data

  Figure 4. Using JSON to display information in the browser