DataTables 警告，为第 0 行、第 0 列请求了未知参数 'CustomerID'

Question

我正在尝试将数据tables 实现到我的 MVC ASP.NET 核心与 MySql 项目所以我遵循了分步教程，但我无法修复此错误：

" DataTables 警告：table 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":"巴西"},{"CustomerID": 2,"ContactName":"Vitoria","City":"Jundiai","Country":"Brasil"},{"CustomerID":3,"ContactName":"Soutto","City":"Jundiai", "国家":"巴西"}]" 字符串

Answer 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' }]
            });

列的第一个字母需要小写。

测试结果：

DataTables 警告，为第 0 行、第 0 列请求了未知参数 'CustomerID'

DataTables warning, Requested unknown parameter 'CustomerID' for row 0, column 0

c#

model-view-controller

datatable

datatables

asp.net-core