Confused with JSON string returned by webservice - ajax

Question

I just started to play around with Kendo-UI, web services and JSON. First I created and deployed my asp.net web service (I did not plan to use WCF). I checked the ASMX file which returned the following result:
[
{"Id":"4e7dc3f8-db50-4978-be10-09808a6216a7","CompanyName":"company1"},
{"Id":"d156a2cd-1768-439e-98eb-134366a6c9be","CompanyName":"company2"},
{"Id":"7acba8b5-b773-4071-bfd5-2537d7d20e1e","CompanyName":"company3"}
]
I checked the above result with a web based JSON validator (copy/paste, not via calling the web service), which resulted in a successful parsing. So far everything seemed to be OK.
The next step was to populate a kendoDropDownList with the results:
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "/scws/qpm.asmx/GetSuppliers",
dataType: "json"
}
}
});
$("#supplier").kendoDropDownList({
dataSource: dataSource,
dataValueField: "Id",
dataTextField: "CompanyName"
});
Well, it did not work. I tried several variations, until I gave up and tried to call my web service a different way, just for testing:
$.ajax({
url: "/scws/qpm.asmx/GetSuppliers",
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
cache: false,
success: function (msg) {
// data is returned
},
error: function (xhr, status, error) {
// handle error
alert(status);
alert(xhr.status);
alert(xhr.responseText);
alert(error);
}
});
Well, I got a parser error (200). The response text is different from what I got with directly testing the ASMX file. The response text seems to be longer:
[
{"Id":"4e7dc3f8-db50-4978-be10-09808a6216a7","CompanyName":"company1"},
{"Id":"d156a2cd-1768-439e-98eb-134366a6c9be","CompanyName":"company2"},
{"Id":"7acba8b5-b773-4071-bfd5-2537d7d20e1e","CompanyName":"company3"}
]
{"d":null}
I am sure I did some basic thing very badly... I would appreciate your help.

Answer 1

Not know what your asmx method looks like, it's hard to say exactly. Here is a quick sample asmx I threw together. I did go ahead and switch my method to use a GET instead of a POST.
Webservice
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
[System.Web.Script.Services.ScriptService]
public class Service : System.Web.Services.WebService
{
[WebMethod]
[ScriptMethod (UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
public List<Person> GetPeople()
{
List<Person> people = new List<Person>();
people.Add(new Person() { Age = 21, Name = "Fred" });
people.Add(new Person() { Age = 31, Name = "Ted" });
people.Add(new Person() { Age = 41, Name = "Ned" });
people.Add(new Person() { Age = 51, Name = "Red" });
return people;
}
}
public class Person
{
public string Name { get; set; }
public int Age { get; set; }
}
Which returned this json
{"d":[{"__type":"ASMXTest.Person","Name":"Fred","Age":21},{"__type":"ASMXTest.Person","Name":"Ted","Age":31},{"__type":"ASMXTest.Person","Name":"Ned","Age":41},{"__type":"ASMXTest.Person","Name":"Red","Age":51}]}
Here is my kendo dataSource to access that webmethod
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "Service.asmx/GetPeople",
dataType: "json",
contentType: "application/json; charset=utf-8"
}
},
schema: {
data: function (response) {
return response.d;
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
columns: [
{ field: 'Name' },
{ field: 'Age' }
]
});
If this doesn't get you going, please post your asmx webmethod.

Answer 2

Thank you for your help and time. I am afraid the problem was with my webservice. Now its fine.