JSON Response of a C# WebService in jQuery dataTable

roger

Hi,

I try to set the JSON response of a C# WebService in a jQuery dataTable. But the table says: "No data available in table". I think there must be some parsing between the JSON response and the jQuery dataTable.
Here is my code:

C#: This class is using JSON from http://jsontoolkit.codeplex.com/
[code]
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public string getCustomer() {
JsonObject jsObj = createJsonObject();
String bla = new JavaScriptSerializer().Serialize(jsObj);
return bla;
}

private JsonObject createJsonObject() {
Customer c1 = new Customer();
c1 = new Customer();
c1.Number = "1234567";
c1.Name1 = "Hans";
c1.Name2 = "Muster";

Customer c2 = new Customer();
c2 = new Customer();
c2.Number = "7654321";
c2.Name1 = "Peter";
c2.Name2 = "Mustermann";

JsonObject h1 = new JsonObject();
h1.Add("sTitle", "KD Number");
JsonObject h2 = new JsonObject();
h2.Add("sTitle", "Name");
JsonObject h3 = new JsonObject();
h3.Add("sTitle", "Nachname");
JsonObject h4 = new JsonObject();
h4.Add("sTitle", "Name");
JsonObject h5 = new JsonObject();
h5.Add("sTitle", "Nachname");

JsonArray headerArr = new JsonArray();
headerArr.Add(h1);
headerArr.Add(h2);
headerArr.Add(h3);
headerArr.Add(h4);
headerArr.Add(h5);

JsonArray posArr1 = new JsonArray();
posArr1.Add("\"" + c1.Number + "\"");
posArr1.Add("\"" + c1.Name1 + "\"");
posArr1.Add("\"" + c1.Name2 + "\"");
posArr1.Add("\"" + c1.Street + "\"");
posArr1.Add("\"" + c1.City + "\"");

JsonArray posArr2 = new JsonArray();
posArr2.Add("\"" + c2.Number + "\"");
posArr2.Add("\"" + c2.Name1 + "\"");
posArr2.Add("\"" + c2.Name2 + "\"");
posArr2.Add("\"" + c2.Street + "\"");
posArr2.Add("\"" + c2.City + "\"");

JsonArray dataArr = new JsonArray();
dataArr.Add(posArr1);
dataArr.Add(posArr2);

JsonObject jsObj = new JsonObject();
jsObj.Add("aoColumns", headerArr);
jsObj.Add("aaData", dataArr);

return jsObj;
}
[/code]

Java Script:
[code]
$.ajax({
type: "POST",
url: "/WebService/JSONService.asmx/getCustomer",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (json) {
console.log(json);
console.log(json.d);
$('#example').dataTable(json);
}
});
[/code]

I get some output in the FireFox cosole:
Object { d="[{"Key":"aoColumns","Va...nn\"","\"\"","\"\""]]}]"} script.js (Zeile 44)
[{"Key":"aoColumns","Value":[[{"Key":"sTitle","Value":"KD Number"}],[{"Key":"sTitle","Value":"Name"}],[{"Key":"sTitle","Value":"Nachname"}],[{"Key":"sTitle","Value":"Name"}],[{"Key":"sTitle","Value":"Nachname"}]]},{"Key":"aaData","Value":[["\"1234567\"","\"Hans\"","\"Muster\"","\"\"","\"\""],["\"7654321\"","\"Peter\"","\"Mustermann\"","\"\"","\"\""]]}] script.js (Zeile 45)

Can anyone help?

Thanks a lot!!!
-> Roger <-

roger

Hello guys,

I solved the problem using this class:

[code]
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Collections;

namespace de.mop.salescontrolling {
public class JsonDataTable {

public List aaData;
public List aoColumns;

public JsonDataTable() {

aaData = new List();
aoColumns = new List();

public void add_Row(List cells) {
this.aaData.Add(cells);
}

public class JsDataColumn {
public string sTitle { get; set; }
public string sClass { get; set; }
}

public void add_Column(JsDataColumn col) {
this.aoColumns.Add(col);
}
}
}
[/code]

I call the webservice and create an Object JsonDataTable. After that I return the object without parsing or seralizing:

[code]
public class JSONService : System.Web.Services.WebService {

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public JsonDataTable createJsDataTable() {

JsonDataTable jsDT = new JsonDataTable();

List vl = new List();
vl.Add("value 1");
vl.Add("value 2");
vl.Add("value 3");
jsDT.add_Row(vl);

return jsDT;
[/code]

In java script you have to set the aaData:
[code]
$.ajax({
type: "POST",
url: "/WebService/JsonService.asmx/createJsDataTable",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (json) {
console.log(json);
console.log(json.d.aaData);
$('#example').dataTable({
"aaData": json.d.aaData,
});
}
});
[/code]

It works pretty fine in IE and FF.

Greetz

-> Roger <-

allan

Hi Roger,

Nice one - thanks very much for sharing your solution with us!

Regards,
Allan