Many times now I have banged my head against the keyboard because I can’t get JSON to return correctly from my web service… Or is it the other way around? Is my service setup correctly but my Ajax call breaking things… Hopefully this can help people that were in my situation.
I have seen many people using a JSON serializer in their code. This is not normally necessary since WebServices should have the cabapility to serialize your object directly. Now lets get started… Your Web Service should look something like this.
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService] //Make sure this is uncommented
public class MyWebService: System.Web.Services.WebService
{
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)] //This line is optional!
public string MyJSONString()
{
return "MyJSONString!";
}
[WebMethod]
public List<KeyValuePair<int, string>> MyJSONList(string sample)
{
return new List<KeyValuePair<int,string>>(){
new KeyValuePair<int,string>(0,"MyValue1"),
new KeyValuePair<int,string>(1,"MyValue2"),
new KeyValuePair<int,string>(2,"MyValue3"),
new KeyValuePair<int,string>(3,"MyValue4"),
new KeyValuePair<int,string>(4,"MyValue5"),
};
}
}
Once you have that ready to go, and it looks like this you should be able to make an AJax call to return it as JSON. This is were a lot of people get caught up. You can’t use Jquery’s built in getJSON for reasons unknown to me webservices can only return JSON with a POST not a GET so here is a sample call that works for me. First the string, then the more advanced list.
$.ajax({
type: "POST",
url: "http://localhost/WebServices/MyWebService.asmx/MyJSONString",
data: "{}", //This is the KEY, Send in an empty object as the data
contentType: "application/json; charset=utf-8", //this must be added in order to request json
dataType: "json", //as well as this.
success: function (data) {
alert(data.d); //Should = "MyJSONString!"
}
});
Now the List, sometimes things get tricky here because as you can see the method requires a string as a parameter. This string needs to be sent in the Data… but remember we have to have a json object in the Data field. so we must send our parameters as a certain way… ‘{sample:value}’ just like that, if there are more you just add a comma ‘{sample:value, arg2:value}’.
$.ajax({
type: "POST",
url: "http://localhost/WebServices/MyWebService.asmx/MyJSONList",
data: '{sample:"' + myVar +'"}', //This is the KEY if you require arguments
contentType: "application/json; charset=utf-8", //this must be added in order to request json
dataType: "json", //as well as this.
success: function (data) {
alert(data.d); //Should = "[object],[object],etc"
}
});
using FireBug you can see the results of the query
As you can see web services adds a d to the json object… not sure why, but it does. Therefore you might not be able to implement this directly into a plugin that isn’t expecting the d you will have to modify it and then pass it back into the plugin.
But if you are having issues let me know… I’m more than happy to help.
