У меня есть веб-сайт 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 (пропуск) .Снять (PAGESIZE) .ToList ();в методе действия моего контроллера я вижу, что свойство данных в полезной нагрузке JSON правильно заполнено данными из моей базы данных.
_context.Usersявляется таблицей ASP.Net Core 2.1 Identity, созданной на основе ApplicationUser, которая, в свою очередь, основана на IdentityUser.Он имеет больше свойств, чем я ссылаюсь в javascript для DataTable, но я не вижу на сайте Datatable.net, где вы не можете иметь больше столбцов в источнике данных, чем определено в массиве Columns для Datatable, поэтому я должен предположить, чтоэто не проблема.
Я полагаю, что ответ читается с помощью вызова ajax в JavaScript-коде Datatable, потому что я вижу, что установлено общее количество записей и номер страницы, а также количество строк, отображаемых в списке,Просто отсутствуют фактические данные строки.
Так что, скорее всего, возникает некоторая проблема с тем, как я получаю фактическое свойство данных или ответ вJavaScriptНо до сих пор я не могу понять, почему.
Возможно, это что-то незначительное, но я довольно новичок в javascript, поэтому для меня это пока не очевидно.
Есть идеи?