Search code examples
c#jqueryasp.netdatatableswebmethod

Json Output of a C# WebMethod Does Not Affect a JQuery's DataTable

I've been stuck with this issue for a while now, each time getting a different error or some sort of a problem which does not help me achieve my goal.

I am using the table plug-in for jQuery and I can't seem to get a proper Json response from me ASP.NET WebMethod which would fit as the table's data. The state of my table is stuck on "Loading.." and nothing seems to happen, even though I do receive a proper Json response from my WebMethod. It just doesn't seem to affect my dataTable, or just freezes it up during the initialization due to some issue.

My code:

Client-Side:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" href="DataTables-1.10.4/media/css/jquery.dataTables.css" />
    <link rel="stylesheet" href="DataTables-1.10.4/extensions/Scroller/css/dataTables.scroller.css" />
</head>
<body>
    <table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>first name</th>
                <th>last name</th>
                <th>position</th>
                <th>office</th>
                <th>start_date</th>
                <th>salary</th>
            </tr>
        </thead>

        <tfoot>
            <tr>
                <th>first name</th>
                <th>last name</th>
                <th>position</th>
                <th>office</th>
                <th>start_date</th>
                <th>salary</th>
            </tr>
        </tfoot>
    </table>
    <script src="jquery-1.11.1.min.js"></script>
    <script src="DataTables-1.10.4/media/js/jquery.dataTables.min.js"></script>
    <script src="DataTables-1.10.4\extensions\Scroller\js\dataTables.scroller.js"></script>
    <script>
        $('#example').dataTable({
            //"ajax": "ajaxtest.txt",
            "ajax": {
                "url": "WebService.asmx/GetTable",
                "type": "POST"
            },
            "deferRender": true
        });
    </script>
</body>
</html>

My WebService.asmx:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Script.Serialization;
using System.Web.Script.Services;

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

public class WebService : System.Web.Services.WebService {

    public WebService () {
    }

    [WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public void GetTable() {
        JavaScriptSerializer js = new JavaScriptSerializer();
        string response = js.Serialize(Person.GetPersons());

        Context.Response.Clear();
        Context.Response.ContentType = "application/json";
        Context.Response.AddHeader("content-length", response.Length.ToString());
        Context.Response.Flush();

        Context.Response.Write(response);
    }
}

My Json response (valid):

[{"first_name":"Thomas","last_name":"Vincunas","position":"Manager","office":"066843-4120","start_date":"12/12/1995","salary":"$124,081"},{"first_name":"David","last_name":"Naidich","position":"Worker","office":"052-343-4120","start_date":"12/11/1990","salary":"$124,081"},{"first_name":"Barak","last_name":"Obama","position":"Co-Manager","office":"1505465460","start_date":"13/04/1985","salary":"$124,081"},{"first_name":"Vincent","last_name":"Gambino","position":"Unemployed","office":"5313","start_date":"12/01/1980","salary":"$124,081"}]

As stated above, nothing happens once the page has successfully loaded. The table just shows the headers and a "Loading..." text, and that's about it. I'm a bit lost now, tried pretty much anything by now.

Any ideas?

Solution

  • Your JSON doesn't match the format that the documentation specifies it needs.

    {
  "data": [
    [
      "Tiger Nixon",
      "System Architect",
      "Edinburgh",
      "5421",
      "2011/04/25",
      "$320,800"
    ],
    [
      "Garrett Winters",
      "Accountant",
      "Tokyo",
      "8422",
      "2011/07/25",
      "$170,750"
    ],
    [
      "Ashton Cox",
      "Junior Technical Author",
      "San Francisco",
      "1562",
      "2009/01/12",
      "$86,000"
    ]
]
}

    The example shows JSON with a root object of data, with each row being its own array. Or there is an alternate format with objects, but it still requires a root object. Modify the JSON you're returning to match one of the expected formats.

    By the way, you're using WebMethod which is no longer supported. You should switch to ASP.NET Web API.