Saturday, February 5, 2011

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.



10 comments:

  1. Hi Hiren, I like your blog so much ,I want to learn something about Json Webservice and ExtJS
    How I get Json From Webservice without any tag.(Iwant to get json only) and How I can access Json with ExtJs. Can u help me ???

    Thanks Hiren....

    ReplyDelete
  2. To access JSON data in ExtJs, you have to use JsonStore which is available in Ext.Data.

    ReplyDelete
  3. Hi Hiren,
    I used Ext.data.JsonStore to access Json data but i want to do this with ExtJs 4.0 ,but it is not be when i write like your code ,Your code is study with ExtJs 3 ,How can access Json data in ExtJS 4.0 ???

    ReplyDelete
  4. In addition, there are not Ext.data.JsonStore in ExtJs 4.0(?)

    ReplyDelete
  5. Hiren,, please help me I have to overcame this problem,but ı haven't:(:(:(
    http://www.codeproject.com/KB/webservices/ExtJS__WebServices.aspx
    in this link we can see there are the project that is use ExtJs 3 and that can access json data ,Also I want to write examples like this ,but ExtJs 4 is not have similar method with ExtJs 3 and I do not know the which method use :(:(

    ReplyDelete
  6. It's there in ExtJs 4. Please check the examples of ExtJs 4.

    ReplyDelete
  7. hi.where is source code ? thanks . e-mail : demirci.erhan@windowslive.com. also hi Ebru. I am Turk :)

    ReplyDelete
  8. I have already mentioned necessary code in the post that's why there is no source code.

    ReplyDelete
  9. how can i pass a parameter, if the web method takes a parameter
    like mywebmethod( string customerID) {return getData(customerID) }
    how can i do that ?

    ReplyDelete
  10. you can always assign params in store as follow.

    params: {
    param1: value1,
    param2: value2
    }

    ReplyDelete