jQuery，数据表和Ajax

Question

I'm trying to dynamically load my datatable with an ASP.NET a web-method written in C#. The method seems to work well but nothing I try gets the datatable to respond properly.

Here's my code:

var oTable = $('table.datatable').dataTable({
  "processing": true,
  "serverSide": true,
  "ajax": {
    "url": "SearchForCustomers.aspx/GetUsers",
    "type": "POST",
    "contentType": "application/json; charset=utf-8",
    "dataType": "json"
  },
  "columns": [{
    "data": "A"
  }, {
    "data": "B"
  }, {
    "data": "C"
  }, {
    "data": "D"
  }, {
    "data": "E"
  }, {
    "data": "F"
  }]
});

My ASP.NET web-method:

public class AA
{
    public string A { get; set; }
    public string B { get; set; }
    public string C { get; set; }
    public string D { get; set; }
    public string E { get; set; }
    public string F { get; set; }
}

[WebMethod]
public static string GetUsers()
{
    /*List<UserAccount> listOfUserAccounts = UserAccount.GetUserAccounts(ApplicationConfiguration.ORDER_TYPES.DESC);
    JavaScriptSerializer jSearializer = new JavaScriptSerializer();
    return jSearializer.Serialize(listOfUserAccounts);*/

    List<AA> list = new List<AA>();
    list.Add(new AA { A = "a", B = "b", C = "c", D = "d", E = "e", F = "f" });
    list.Add(new AA { A = "a", B = "b", C = "c", D = "d", E = "e", F = "f" });
    list.Add(new AA { A = "a", B = "b", C = "c", D = "d", E = "e", F = "f" });
    list.Add(new AA { A = "a", B = "b", C = "c", D = "d", E = "e", F = "f" });
    list.Add(new AA { A = "a", B = "b", C = "c", D = "d", E = "e", F = "f" });
    list.Add(new AA { A = "a", B = "b", C = "c", D = "d", E = "e", F = "f" });
    list.Add(new AA { A = "a", B = "b", C = "c", D = "d", E = "e", F = "f" });

    JavaScriptSerializer jSearializer = new JavaScriptSerializer();
    return jSearializer.Serialize(list);
}

The AA class was made up in order to test the functionally of the datatable. The datatable receives no rows at all.

Thanks in advance.

Answer 1

Why it is not working with webmethod

Because, when Jquery datable makes a post request, it does send some parameter to post method, in this case it is GetUsers. But since there is no input parameter for this function, it shows ajax error internal error 500 . Error message is - Invalid JSON primitive , if you search this, it says, if there is mismatch between jquery supplied param in post and webmethod ( in this case it is so), then this error occurs. I know, this input parameter is not required at binding time, but still datatable ajax sends that for binding time, and those parameter are helpful for sorting, paging etc. Following is the screenshot,that shows POST params.

How to solve this

Move those methods to ashx hanlder, this way parameter ( such as sorting, searching etc..) will be captured by context.Request.Form ( this might not be required at binding time - this is your case).

But still, you need to modify supplied code, you need to wrap List<AA> to data and also include totalRecord, else jquery datatable shows error. Following is the code that i have tried and it is working.

public void ProcessRequest(HttpContext context)
{
    context.Response.ContentType = "application/json";

    List<AA> list = new List<AA>();
    list.Add(new AA { A = "a", B = "b", C = "c", D = "d", E = "e", F = "f" });
    list.Add(new AA { A = "a", B = "b", C = "c", D = "d", E = "e", F = "f" });
    list.Add(new AA { A = "a", B = "b", C = "c", D = "d", E = "e", F = "f" });
    list.Add(new AA { A = "a", B = "b", C = "c", D = "d", E = "e", F = "f" });
    list.Add(new AA { A = "a", B = "b", C = "c", D = "d", E = "e", F = "f" });
    list.Add(new AA { A = "a", B = "b", C = "c", D = "d", E = "e", F = "f" });
    list.Add(new AA { A = "a", B = "b", C = "c", D = "d", E = "e", F = "f" });

    JavaScriptSerializer jSearializer = new JavaScriptSerializer();

    var result = new  { data = list, recordsTotal = 8 };

    context.Response.Write(jSearializer.Serialize(result));

}