Blog Archives

Json data – Thinner and familiar data format

I have written a little about json in bits and pieces in my erlier posts but moving further i felt a strong urge to put it altogether about Json. Mainly from development perspective which should cover from basic syntax to serialization and desrialization of json data. It also consists of links to good articels wherever needed.

Json (Javascript object notation) is a data format which is a thinner and cleaner than xml/soap formats. I am putting main points here that can get you started right away. Please refer to W3Schools on Json for the detailed syntax.

  • Data is in name/value pairs
  • Data is separated by comma
  • Json values can be integer,floating point,string(in double quotes),boolean (true/false),Array (square brackets), object(curly brackets) or NULL

Mostly we deal with object oriented way of representation so let me take an example.

Employee.cs it is a c# class.


public class Employee{

public string Name {get;set;}

public int      Age    {get;set;}

public bool   IsPermanent {get; set;}

Json representation of an Employee object:


// single object of an employee

{"Name" : "praveen" , "Age" : 30, "IsPermanent" : true }

// list or array of employees. please note the square brackets.

var employeesArray = [

{ "Name" : "praveen"   , "Age" : 30 ,"IsPermanent" : true} ,

{ "Name" : "amit"      , "Age" : 27 ,"IsPermanent" : false} ,

{ "Name" : "sudhakar"  , "Age" : 27 ,"IsPermanent" : true}

]

Now that you must be comfortable with the syntax of Json data. next step is to understand how to handle Json data effectively.In this post i will discuss how to consume a webapi http service which returns an object in Json data format.

Note: To create WebApi service please refer to My Post on How to create a WebApi

Let us see few jquery methods we can use to fetch Json data.

Using $.ajax(type,uri,onSuccessMethod,onErrorMethod): .ajax() is much familiar method as it is more generic in nature and can call “Get”, “Post” etc. type of requests. you can also specify content type (default is xml).


function find() {
var id = $('#empId').val();
var httpApiUri = "api/employees/" + id;
$.ajax (
type   :  "GET",
url     :   httpApiUri ,
contentType : "json",

success  : function(data){
              $.each(data, function (index,item){
               $("#employeestable").append("<tr><td>" + item.FirstName + "</td>" + "<td>" + item.LastName + "</td>");
              });
           },
error   :  function (jqXHR, textStatus, err) {
             alert('Error: ' + err);
           });
);
}

Using $.getJSON(uri,successmethod): Unlike $.ajax() method this one is specific to “Get” type of requests and fetch the data in Json format by default which is great if you are sure of your data format beforehand.

function find() {
var id = $('#empId').val();
var httpApiUri = "api/employees/" + id;
$.getJSON ( httpApiUri , function(data){
                         $.each(data, function (index,item){
                               $("#employeestable").append("<tr><td>" + item.FirstName + "</td>" + "<td>" + item.LastName + "</td>");
                               });
                         }
          )
          .fail( function (jqXHR, textStatus, err) {
              alert('Error: ' + err);
           });
}

How to send the json data as a parameter?
Now that you know how to represent Json data using javascript notation and jquery syntax.Next step is to serialize your normal data say a javascript variable and send it as a parameter to a webapi service for instance. I am considering Jquery as an example here as it is the most widely acceptable cross browser javascript library. There are various jquery apis available to achieve this.

Using JSON.stringify( jsonData ):  Let’s say i want to make a “post” request to add an employee using an http service. you can use JSON.stringify() method which is available on Json2.js on GitHub.You need to include this js file in your code. This method will serialize your javascript variable into json format and send it over the wire.

Note: One important thing about $.ajax() method is that the parameters contentType  is a format which is returned on success of the call. data  is the parameter which defines datatype of the parameter you are sending to the service. both in this example are json.


<script type="text/javascript">

$("#btnInsert").click( function() {

var empObj ='{ "FirstName" : "Praveen"   , "LastName" : "Saxena"}' ;

$.ajax({

type: 'POST',
url: 'http://serverName:portNo/Employees/PostEmployee',
data: <strong>JSON.stringify(empObj </strong><strong>)</strong>,
contentType: 'application/json',
processData: true,
success: function (result) {
$('#results').html('Result: ' + JSON.stringify(result));
},
error: function (xhr, status, error) {
$('#results').html('Error: ' + xhr.responseText);
}
});

}
</script>


Using jQuery.ParseJSON(jsonData):
This method is added in jquery version -1.4.1 onwards so you dont need to include any other js file. It performs the similar operation.


<script type="text/javascript">

$("#btnInsert").click( function() {

var empObj ='{ "FirstName" : "Praveen"   , "LastName" : "Saxena"}' ;

$.ajax({

type: 'POST',
url: 'http://serverName:portNo/Employees/PostEmployee',
data: <strong>jQuery.parseJSON(empObj </strong><strong>)</strong>,
contentType: 'application/json',
processData: true,
success: function (result) {
$('#results').html('Result: ' + JSON.stringify(result));
},
error: function (xhr, status, error) {
$('#results').html('Error: ' + xhr.responseText);
}
});

}
</script>

Deserializing JSON data: Now that you know 1) Json syntax 2) jquery apis to send json data as parameter, we need to know how to deserialize the json data at code side. We have several ways to do it.
I found Json.net library very easy to use and i have a detailed post dedicated to JSON.Net. Please refer to  My Post on Json.Net to serialize an deserialize Json data

Now if you are given your next task on jquery with services dealing with json data, i guess you are good to go 🙂 (or at least googled code will start making sense if you are not fully prepared)

Hope it helps!

Praveen

 

Advertisements

WebApi – Asp.Net “ROUTE” to “REST”

WHAT: Webapi is a framework to build Http services that uses standard https verbs like GET, POST, PUT and DELETE to achieve data operations. WCF already had a way (i didn’t like it though 🙂 ) to achieve this but there were things that developers may find cumbersome. Few of them are as mentioned below

  1. Web browsers need to do a lot of XML parsing and DOM manipulation for SOAP based services.
  2. Only WebHttpBinding supports http services and those configuration settings were really painful (at least for me).

“WebApi framework pretty much utilizes existing Asp.Net routing framework which comes with framework 4.0”

WHY: Suddenly there is a huge demand of making our web applications available on different platforms/devices like mobiles,smart phones,tablets etc. Http services help us to provide seemless integration to our data access methodologies across all the platforms. One service for all devices and platform.

WHERE: It comes in-built with Asp.Net MVC 4.0 framwork. you can download it from http://www.asp.net/mvc/mvc4 . Though WebApi implementation (which I am using) is not limited to MVC. Webforms can also enjoy the “Route to REST” :).

You should have Fiddler tool to see how it works. Download it from http://www.fiddler2.com/fiddler2/ it is a web debugger proxy tool. You can simulate http calls using this tool. It won’t be necessary in my example though.

HOW:  Once you install MVC 4.0, you will notice a new project template called WebApi. It will give you basic methods and a working sample created for you. Though i would prefer to use “Empty” project type because as a beginner i wanted to see how it works.

  • Install MVC4.0
  • Open new project in VS 2010.
  • select Asp.Net MVC 4 web application.
  • Choose “Empty” project.
  • goto project properties -> Web -> StartAction -> Specific Page -> give “employees/”
  • assign a port like 9090
  • Global.asax.cs : Add the new namespaces mentioned in code. Now we need to define a route format which we would use to access the endpoints which in our case is an action method.
using System.Web.Http;
using System.Web.Routing;
protected void Application_Start(object sender, EventArgs e)
{
RouteTable.Routes.MapHttpRoute(
"EmployeeRoute",
"{controller}/{id}",
new {id = RouteParameter.Optional  });
}
  • this route defines that you can access this service by browing either http://localhost:9090/employees or http://localhost:9090/employees/1 . what it means is that for Get requests Id is optional. When we don’t pass id we will get all employees and if Id is specified you get only Employee with the same ID.
  • If you want to allow method names in url just need to modify your Route in Global.asax with “{controller}/{action}/id”. it will allow your web methods to be accessed as resources.
  • Add “Employee” class with public ID and Name properties.

Add a controller name it “EmployeesController”. and paste the below code.

</li>
</ul>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Http;
using System.Net.Http.Headers;
namespace WebApiDemo.Controllers
{
public class EmployeesController : ApiController
{
static List<Employee> _employees = InitEmployeeCollection();
private static List<Employee> InitEmployeeCollection()
{
var empList = new List<Employee>();
empList.Add(new Employee { ID = 0, Name = "Praveen" });
empList.Add(new Employee { ID = 1, Name = "Narsi" });
empList.Add(new Employee { ID = 2, Name = "Ganesh" });
empList.Add(new Employee { ID = 3, Name = "Venu" });
return empList;

}

public IEnumerable<Employee> Get()
{
return _employees;
}

public Employee Get(int id)
{
var emp = (from e in _employees where e.ID == id
select e).FirstOrDefault();

if (emp == null)
{
//HttpResponseMessage is part .net 4.5
//return type should be HttpResponseMessage<Employee>
//var foundEmp = new HttpResponseMessage<Employee>(HttpStatusCode.NotFound );
// return httpstatuscode.notfound =  404
}
return emp;
}

// insert
public  Employee Post(Employee newEmployee)
{
newEmployee.ID  = _employees.Count() + 1;
_employees.Add(newEmployee );
//if success
//var foundEmp = new HttpResponseMessage<Employee>(HttpStatusCode.Created );
//return httpstatuscode.created i.e.  201
return newEmployee;
}

//edit
public Employee Put(Employee emp)
{
var changedEmp = (from e in _employees
where e.ID == emp.ID
select e).FirstOrDefault();
changedEmp.Name = emp.Name;
return changedEmp;
}

//delete
public void Delete(Employee empToDelete)
{
_employees.Remove(empToDelete);

}
}
}

Please notice that name of controller methods are named as Get(),Post(),Put() and Delete(). These are pretty much like http verbs and your framwork is able to understand the kind of http action user is trying for just by these names itself . You can also name it like GetEmployee() etc. You can also keep other names but then we have to map it with URI (not covered in this post).Code is nothing new, plain CRUD operations.

  • Build the application and try to run. you would see it hits http://localhost:9090/employees/  as you have mentioned this starting point in project properties. It will not render anything but it will try to open a file (use notepad) which willl contain Json format output.
  • There is no Id specified in the url so it takes you to Get() method.
  • which returns the employee list but in Json format. to read about Json in this context refer to my post on Json .
  • if you type http://localhost:9090/employees/1  it will return employee id and  name with id equal to 1. It will hit overloaded Get method with Id as parameter which will return Employee object in json format.

Now , your service is in place and you have tested using urls of course only Get verbs. To test Post and other requests you can use fiddler or developer tools (press F12).

Step by step instructions to use developer tools and basic tutorial is also available on MVC official website .

Now to consume this webservice as it is. you can read my post on consuming REST services you just need to change URI where your service is hosted.

Otherwise you can use this class to consume the service.

<pre>using System.Web.Services;
using System.IO;
using System.Xml;
using System.Xml.Serialization;
using System.Net;
using System.Runtime.Serialization.Json;
public class ConsumerClient
{
public static List<Employee> Get()
{
WebClient proxy = new WebClient();
//DownloadData sends data to server using the specific URI defined for your webmethod.
byte[] data = proxy.DownloadData("http://localhost:9090/Employees/");
Stream stream = new MemoryStream(data);
// serializing the returned type which is Employee[]
DataContractJsonSerializer obj = new DataContractJsonSerializer(typeof(List<Employee>));
var lstEmp = obj.ReadObject(stream) as List<Employee>;

return lstEmp;

}

public static Employee Post(Employee emp)
{
Employee newItem = new Employee() { ID = 0, Name = emp.Name };
WebClient proxy = new WebClient();
proxy.Headers["Content-type"] = "application/json";
MemoryStream ms = new MemoryStream();

//serialize the input parameter
DataContractJsonSerializer serializerToUpload = new DataContractJsonSerializer(typeof(Employee));
serializerToUpload.WriteObject(ms, newItem);

// upload the data to call AddEmployee web method which returns Employee object.
byte[] data = proxy.UploadData("http://localhost:9090/Employees", "POST", ms.ToArray());
Stream stream = new MemoryStream(data);
// serialize the returned type
DataContractJsonSerializer obj = new DataContractJsonSerializer(typeof(Employee));
// read the returned type as Employee
var newEmployee = obj.ReadObject(stream) as Employee;
return newEmployee;
}
}</pre>

Above deserialization method is inbuilt with Dot net framework 4.0 though there are few other libraries which helps you deserialize the
json objects in an easier way. one of the best one i found is JSON.Net which is really easy to understand.
To read more on this please refer to My post on Json.Net .

I hope it helps you to start.
All the best!!