具有DataTable.net數據表的ASP.Net Core 2.1不顯示任何數據

Question

我有一個ASP.Net Core 2.1 MVC網站，我正在嘗試在索引頁面中實現Datatables.net以顯示用戶列表。 我也在此c-sharpcorner帖子中關注該過程。

數據表顯示在我的頁面上，但行中不包含任何數據。 它正在獲取totalRecords計數，但是從ajax調用返回到我的控制器的數據有問題。

我可以在控制器中看到它正在返回json數據有效載荷，其中填充了來自數據庫的數據。 因此，這似乎與該頁面的javascript中定義的數據有關。

頁面加載后，我會看到這個彈出窗口。

但是，當我檢查控制器操作響應中的數據有效載荷時，可以看到有效數據，包括每個記錄的CompanyId值。 我查看了彈出對話框中提供的鏈接中的疑難解答，但從該資源看來，我可以正確執行所有操作。

這是我的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是基於ApplicationUser的ASP.Net Core 2.1 Identity生成的表，該表又基於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;
                    }
                });
}

上面的代碼將使點網核心不會與您類的命名約定混淆。

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