带有 JQuery 数据表的 Core 2 MVC

Question

Using jQuery DataTables Grid With ASP.NET CORE MVC 有一个很好的例子来说明如何将 JQuery Datatables 与 Core MVC 一起使用

我下载了示例项目，做了一些修改，它运行良好。

但是，当我尝试将其集成到我的项目中时出现错误。

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

点击确定后，表格会生成正确的行数，但没有数据：

这是我的课：

public class GridStudent
{
    [Key]
    public int IdStudent { get; set; }
    public string Name { get; set; }
    public string LastName { get; set; }
}

HTML 和 JavaScript：

    <div class="container">
    <br />
    <div style="width:90%; margin:0 auto;">
        <table id="example" class="table table-striped table-bordered dt-responsive nowrap" width="100%" cellspacing="0">
            <thead>
                <tr>
                    <th>IdStudent</th>
                    <th>Name</th>
                    <th>LastName</th>
                    <th>Edit</th>
                    <th>Delete</th>
                </tr>
            </thead>
        </table>
    </div>
</div>


<script>

    $(document).ready(function ()
    {
        $("#example").DataTable({
            "processing": true, // for show progress bar
            "serverSide": true, // for process server side
            "filter": true, // this is for disable filter (search box)
            "orderMulti": false, // for disable multiple column at once
            "ajax": {
                "url": "/StudentGrid/LoadData",
                "type": "POST",
                "datatype": "json"
            },
            "columnDefs":
            [
                {
                    "targets": [0],
                    "visible": false,
                    "searchable": false,
                }
            ],
            "columns": [
                { "data": "IdStudent", "name": "IdStudent", "autoWidth": true },
                { "data": "Name", "name": "Name", "autoWidth": true },
                { "data": "LastName", "name": "LastName", "autoWidth": true },
                {
                    "render": function (data, type, full, meta)
                    { return '<a class="btn btn-info" href="/StudentGrid/Edit/' + full.IdStudent + '">Edit</a>'; }
                }
                ,
                {
                    data: null, render: function (data, type, row)
                    {
                        return "<a href='#' class='btn btn-danger' onclick=DeleteData('" + row.IdStudent + "'); >Delete</a>";
                    }
                },
            ]
        });
    });

    function DeleteData(CustomerID)
    {
        if (confirm("Are you sure you want to delete ...?"))
        {
            Delete(CustomerID);
        }
        else
        {
            return false;
        }
    }

   function Delete(CustomerID)
   {
        var url = '@Url.Content("~/")' + "StudentGrid/Delete";

        $.post(url, { ID: CustomerID }, function (data)
            {
                if (data)
                {
                    oTable = $('#example').DataTable();
                    oTable.draw();
                }
                else
                {
                    alert("Something Went Wrong!");
                }
            });
   }
</script>

这是从控制器返回数据的代码行：

return await Task.Run(() => Json(new { draw = draw, recordsFiltered = recordsTotal, recordsTotal = recordsTotal, data = data }));

从图中可以看出，控制器正在正确返回数据，但由于某种原因 DataTables 无法读取。

我对样本进行了一千次交叉检查，但我看不出返回数据的格式有什么不同。

有什么建议吗？

Answer 1

这很可能是由于序列化 JSON 的大小写所致。 JavaScript 中列定义中的 data 属性需要 Pascal 大小写。目前，我希望您将 JSON 序列化为小驼峰大小写而不是 Pascal 大小写（例如 idStudent 而不是 IdStudent）。

要将 JSON 序列化为 Pascal 大小写，请确保在 Startup 类的 ConfigureServices 方法中具有以下内容：

services
    .AddMvc()
    .AddJsonOptions(options =>
    {
        options.SerializerSettings.ContractResolver
            = new Newtonsoft.Json.Serialization.DefaultContractResolver();
    });