javascript - 带有 JQuery 数据表的 Core 2 MVC

Question

在 Using jQuery DataTables Grid With ASP.NET CORE MVC 有一个关于如何将 JQuery Datatables 与 Core MVC 结合使用的好示例。

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

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

DataTables warning: table id=example - Requested unknown parameter 'IdStudent' for row 0, column 0. For more information about this error, please see 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>

这是来自 Controller 的代码行，然后返回数据:

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

从图中可以看出， Controller 正确返回了数据，但由于某种原因 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();
    });