带有JQuery数据表的Core 2 MVC

Question

在使用带有ASP.NET CORE MVC的jQuery DataTables网格时,如何将JQuery Datatables与Core MVC一起使用是一个很好的例子

我下载了示例项目,做了一些修改,它完美地运行.

但是,当我尝试将其集成到我的项目中时,我收到了一个错误.

DataTables警告:table 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的大小写.你data在你的JavaScript中的列定义属性,要求Pascal大小写.目前,我希望您将JSON序列化为较低的驼峰案例而不是Pascal案例(例如idStudent代替IdStudent).

要将JSON序列化为Pascal大小写,请确保ConfigureServices在Startup类中的方法中包含以下内容:

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