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));

}