带有 DataTable.net 数据表的 ASP.Net Core 2.1 不显示任何数据

Question

我有一个 ASP.Net Core 2.1 MVC 网站，我正在尝试在索引页面中实现 Datatables.net 以显示用户列表。我也在关注c-sharpcorner post中的流程。

数据表显示在我的页面上，但行中不包含任何数据。它正在获取 totalRecords 计数，但是从 ajax 调用返回到我的控制器的数据存在问题。

我可以在我的控制器中看到它正在返回填充了我数据库中的数据的 json 数据负载。因此，页面的 javascript 中定义的数据似乎存在问题。

当页面加载时，我得到这个弹出窗口。

但是，当我检查控制器操作响应中的数据负载时，我可以看到有效数据，包括每条记录的 CompanyId 值。我在弹出对话框中提供的link 中查看了故障排除，但从该资源看来，我所做的一切都是正确的。

这是我的 index.cshtml

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}


<div class="bg-color-off-white">

    <div class="container pb-5">
        <div class="row">
            <div class="col-2 mt4">
                <h2>@ViewData["Title"]</h2>
            </div>
            <div class="col-10 mt4">
                <a class="fr" asp-area="" asp-page="/Users/CreateUser">Create New User</a>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <section class="border border-dark rounded">

                    <table id="userlist" class="table table-sm table-striped table-bordered dt-responsive nowrap" witth="100%">
                        <thead>
                            <tr class="table-secondary">
                                <th class="pl-2">CompanyId</th>
                                <th>FirstName</th>
                                <th>LastName</th>
                                <th>UserName</th>
                                <th>Email</th>
                                <th class="text-center">EmailConfirmed</th>
                                <th>PhoneNumber</th>
                                <th>IsEnabled</th>
                                <th>Edit</th>
                            </tr>
                        </thead>

                    </table>

                </section>

            </div>
        </div>
    </div>
</div>



@section Scripts{

    <partial name="_DataTableScriptsPartial" />

    <script>

        $(document).ready(function () {
            $("#userlist").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": "/Accounts/LoadData",
                    "type": "POST",
                    "datatype": "json"
                },
                "columns": [
                    { "data": "CompanyId", "name": "CompanyId", "autoWidth": true },
                    { "data": "FirstName", "name": "FirstName", "autoWidth": true },
                    { "data": "LastName", "name": "LastName", "autoWidth": true },
                    { "data": "UserName", "name": "UserName", "autoWidth": true },
                    { "data": "Email", "name": "Email", "autoWidth": true },
                    { "data": "EmailConfirmed", "name": "EmailConfirmed", "autoWidth": true },
                    { "data": "PhoneNumber", "name": "PhoneNumber", "autoWidth": true },
                    { "data": "IsEnabled", "name": "IsEnabled", "autoWidth": true },
                    {
                        "render": function (data, type, full, meta) { return `<a class="btn btn-info" href="/DemoGrid/Edit/${full.UserName}">Edit</a>`; }
                    }
                ]

            });
        });
    </script>
}

这是我的控制器方法

    public IActionResult LoadData()
    {
        try
        {
            var draw = HttpContext.Request.Form["draw"].FirstOrDefault();
            var start = Request.Form["start"].FirstOrDefault();
            var length = Request.Form["length"].FirstOrDefault();
            var sortColumn = Request.Form["columns[" + Request.Form["order[0][column]"].FirstOrDefault() + "][name]"].FirstOrDefault();
            var sortColumnDirection = Request.Form["order[0][dir]"].FirstOrDefault();
            var searchValue = Request.Form["search[value]"].FirstOrDefault();
            var pageSize = length != null ? Convert.ToInt32(length) : 0;
            var skip = start != null ? Convert.ToInt32(start) : 0;
            var recordsTotal = 0;
            var userData = (from tempUser in _context.Users select tempUser);

            //var userData = _context.Users.ToList();

            //if (!(string.IsNullOrEmpty(sortColumn) && string.IsNullOrEmpty(sortColumnDirection)))
            //{
            //    userData = userData.OrderBy(sortColumn + " " + sortColumnDirection);
            //}

            if (!string.IsNullOrEmpty(searchValue))
            {
                userData = userData.Where(m => m.LastName == searchValue);
            }

            recordsTotal = userData.Count();
            var data = userData.Skip(skip).Take(pageSize).ToList();
            return Json(new
            {
                draw = draw,
                recordsFiltered = recordsTotal,
                recordsTotal = recordsTotal,
                data = data
            });

        }
        catch (Exception ex)
        {
            Console.WriteLine(ex);
            throw;
        }
    }

如果我在该行之后设置断点... var data = userData.Skip(skip).Take(pageSize).ToList(); 在我的控制器操作方法中，我可以看到 JSON 有效负载中的 data 属性已正确填充了我的数据库中的数据。

_context.Users 是 ASP.Net Core 2.1 Identity 基于 ApplicationUser 生成的表，而 ApplicationUser 又是基于 IdentityUser 的。它的属性比我在 DataTable 的 javascript 中引用的要多，但我在 Datatable.net 站点上看不到，在该站点上，数据源中的列不能多于 Datatable 的 Columns 数组中定义的列，因此我必须假设不是问题。

我相信 Datatable javascript 中的 ajax 调用正在读取响应，因为我可以看到记录的总数和页码已设置，以及列表中显示的行数。它只是缺少实际的行数据。

因此，我如何检索 javascript 中的响应的实际数据属性很可能是一些问题。但到目前为止，我无法弄清楚为什么。

这可能是一些小问题，但我对 javascript 还很陌生，所以对我来说还不是很明显。

有什么想法吗？

Answer 1

您很可能会从服务器返回驼峰式 json。这通常设置为默认值。使用您的 DevTools 检查您从服务器返回的响应是什么，并验证您的数据属性是否符合预期的大小写。很可能您的 CompanyId 属性在 json 中被重新定义为 companyId。

如果您正在处理这种情况，并且不想从序列化的服务器端类中调整客户端属性名称，则可以在启动时添加一些配置，如下所示...

public void ConfigureServices(IServiceCollection services)
{
     services.AddJsonOptions(options => {
                    var resolver = options.SerializerSettings.ContractResolver;
                    if (resolver != null)
                    {
                        var res = (DefaultContractResolver)resolver;
                        res.NamingStrategy = null;
                    }
                });
}

上面的代码将导致 dot net core 不会与你的类的命名约定混淆。

您可以在https://dotnetcoretutorials.com/2018/05/05/setting-json-serialization-configuration-at-runtime-on-a-net-core-api/阅读更多关于解析器的信息