Get JSON data from Asp.Net web service into ExtJs JSON store

In one of my previous project which was based on SOA, we have used Asp.Net web service to get data from Sql Server. The front end was built using ExtJs. As every one no that Asp.Net web service uses soap protocol which is XML based protocol.

For ExtJs front end we have to use JSON store for data as we were getting data from some other source in JSON format. So we need a response from Asp.Net web service in JSON format. Following the code example of how to get JSON data from Asp.Net web service.

First of all you need to enter Script Service Attribute to the web service.

[System.Web.Script.Services.ScriptService]

public class Service : System.Web.Services.WebService

{

//code of service.

}

A web service with ScriptService attribute by default returns data in JSON format. However it might be the case that in web service some methods return data in XML format so for that you need to add ScriptMethod attribute to specific method which should return data in JSON format.Following is an example of it.

[WebMethod]

[ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = true, XmlSerializeString = false)]

public List GetCustomers()

{

dbDataContext obj= new dbDataContext();

return dc.getCustomers().ToList();

}

So above method when called form ExtJs front end will return data in JSON format. Following is the ExtJs code to call the service.

var storeCustomer = new Ext.data.JsonStore({

proxy: new Ext.data.HttpProxy({

url: 'Service.asmx/GetCustomers',

headers: {

'content-type': 'application/json'

}

}),

root: 'd',

autoLoad : true,

id: 'Customer_Id',

scope : this,

fields: ['Customer_Id', 'CurrentSeller_Id', 'Name']

});

That's it and you have JSON data from Asp.Net web service to your ExtJs front end.