JSON Response of a C# WebService in jQuery dataTable
JSON Response of a C# WebService in jQuery dataTable
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 <-
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 <-
This discussion has been closed.
Replies
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 <-
Nice one - thanks very much for sharing your solution with us!
Regards,
Allan