DataTables 警告，请求第 0 行第 0 列的未知参数“CustomerID”答案

【问题标题】：DataTables warning, Requested unknown parameter 'CustomerID' for row 0, column 0DataTables 警告，请求第 0 行第 0 列的未知参数“CustomerID”
【发布时间】：2021-06-08 15:19:54
【问题描述】：

我正在尝试使用 MySql 项目将数据表实现到我的 MVC ASP.NET Core，因此我按照分步教程进行操作，但我无法修复此错误：

“DataTables 警告：表 id=tblCustomers - 请求第 0 行第 0 列的未知参数“CustomerID”。有关此错误的详细信息，请参阅http://datatables.net/tn/4"

这是我的 HTML 视图页面：

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <style type="text/css">
        body {
            font-family: Arial;
            font-size: 10pt;
        }
    </style>
</head>
<body>
    <div style="width: 500px">
        <table id="tblCustomers" cellpadding="0" cellspacing="0" border="1" style="border-collapse:collapse">
            <thead>
                <tr>
                    <th>Customer Id</th>
                    <th>Name</th>
                    <th>City</th>
                    <th>Country</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
    <link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        $(function () {
            $.ajax({
                type: "POST",
                url: "/Home/AjaxMethod",
                data: '{}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccess,
                failure: function (response) {
                    alert(response.d);
                },
                error: function (response) {
                    alert(response.d);
                }
            });
        });
        function OnSuccess(response) {
            $("#tblCustomers").DataTable(
                {
                    bLengthChange: true,
                    lengthMenu: [[5, 10, -1], [5, 10, "All"]],
                    bFilter: true,
                    bSort: true,
                    bPaginate: true,
                    data: response,
                    columns: [{ 'data': 'CustomerID' },
                    { 'data': 'ContactName' },
                    { 'data': 'City' },
                    { 'data': 'Country' }]
                });
        };
    </script>
</body>
</html>

这是我的控制器：

public class HomeController : Controller
    {
        private DBCtx Context { get; }
        public HomeController(DBCtx _context)
        {
            this.Context = _context;
        }

        public IActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public IActionResult AjaxMethod()
        {
            var customers = Context.Customers.ToList();

            return Json(JsonConvert.SerializeObject(customers));
        }
    }

我的 AjaxMethod 正在返回：

Newtonsoft.Json.JsonConvert.SerializeObject 返回 "[{"CustomerID":1,"ContactName":"Lucas","City":"Jundiai","Country":"Brasil"},{"CustomerID": 2,"ContactName":"Vitoria","City":"Jundiai","Country":"Brasil"},{"CustomerID":3,"ContactName":"Soutto","City":"Jundiai", "国家":"巴西"}]" 字符串

【问题讨论】：

我的解决方案对您有用吗？如果可行，请随时mark有用的答案，这将有助于其他面临相同问题的人找到解决方案。
是的！非常感谢，我不知道小写字母

标签： c# asp.net-core model-view-controller datatable datatables

【解决方案1】：

首先您需要将AjaxMethod 更改为：

 [HttpPost]
    public IActionResult AjaxMethod()
    {
        var customers = Context.Customers.ToList();

        return Json(customers);
    }

然后在您的OnSuccess 函数中，将其更改为：

 function OnSuccess(response) {
        $("#tblCustomers").DataTable(
            {
                bLengthChange: true,
                lengthMenu: [[5, 10, -1], [5, 10, "All"]],
                bFilter: true,
                bSort: true,
                bPaginate: true,
                data: response,
                columns: [{ 'data': 'customerID' },
                { 'data': 'contactName' },
                { 'data': 'city' },
                { 'data': 'country' }]
            });

列的首字母必须小写。

测试结果：

【讨论】：