C# WebMethod 的 Json 输出不影响 JQuery 的 DataTable答案

【问题标题】：Json Output of a C# WebMethod Does Not Affect a JQuery's DataTableC# WebMethod 的 Json 输出不影响 JQuery 的 DataTable
【发布时间】：2015-01-27 17:16:10
【问题描述】：

我已经被这个问题困扰了一段时间，每次都会遇到不同的错误或某种无法帮助我实现目标的问题。

我正在使用 jQuery 的表格插件，但我似乎无法从我的 ASP.NET WebMethod 那里获得适合表格数据的正确 Json 响应。我的桌子的状态卡在“正在加载..”并且似乎没有发生任何事情，即使我确实从我的 WebMethod 收到了正确的 Json 响应。它似乎并没有影响我的数据表，或者只是在初始化期间由于某些问题将其冻结。

我的代码：

客户端：

<%@ 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>

我的 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);
    }
}

我的 Json 响应（有效）：

[{"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"}]

如上所述，一旦页面成功加载，什么都不会发生。该表仅显示标题和“正在加载...”文本，仅此而已。我现在有点迷茫，现在几乎什么都试过了。

有什么想法吗？

【问题讨论】：

检查浏览器的 JavaScript 控制台。您是否看到错误消息？
@mason 没有错误也没有警告。

标签： c# jquery asp.net datatables webmethod

【解决方案1】：

您的 JSON 与 the documentation 指定的格式不匹配。

{
  "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"
    ]
]
}

该示例显示了带有 data 根对象的 JSON，每一行都是它自己的数组。或者有一个带有对象的alternate format，但它仍然需要一个root 对象。修改您返回的 JSON 以匹配其中一种预期格式。

顺便说一句，您使用的是WebMethod，即no longer supported。你应该切换到ASP.NET Web API。

【讨论】：