ASP.NET Core 3.0 Razor Datatables Ajax 不显示 JSon 数据

Question

我有一个带有表格的页面，有一列，使用 DataTables；我使用 ajax 调用加载数据。

数据返回到页面但表格没有显示行。我在浏览器上没有任何错误显示。

这是我的带有 JQuery 的 HTML：

<div>
    <table class="table table-bordered" id="DetailsTable" width="100%" cellspacing="0"</table>
</div>
<script>
jQuery(function () {

   $('#DetailsTable').DataTable({               
       "responsive": true,
       "processing": true,
       "serverSide": true,               
       "ajax": {
           "url": "/Index?handler=Table",
           "type": "GET",
           "dataSrc": "",
           "dataType": "json"
       },
       "columnDefs": [
           { "targets": "detail_ID", visible: true }
       ],
       "columns": [
           { "data": "detail_ID" }]
   });
});
</script>

这是我的方法：

public async Task<IActionResult> OnGetTableAsync()
{
   wItem = await _detailRepo.Finddetail(CancellationToken.None);

   string NewtonJSON = JsonConvert.SerializeObject(wItem);
   return Content(NewtonJSON);

}

这是重生的 JSON：

{
   "detail_ID": 7,
   "detail_GUID": "685b8741-fe22-460a-bb76-7ecd9c320172"
}

有什么建议吗？

Answer 1

首先您不需要将结果转换为 json - web api 会在 c# 中为您处理：

public async Task<IActionResult> OnGetTableAsync()
{
   var wItem = await _detailRepo.Finddetail(CancellationToken.None);

   //string NewtonJSON = JsonConvert.SerializeObject(wItem);
   return Content(wItem );

}

我认为您可能希望将返回类型更改为 OK：

public async Task<IActionResult> OnGetTableAsync()
{
   var wItem = await _detailRepo.Finddetail(CancellationToken.None);
   return Ok(wItem );

}

并返回一个列表（以适合表格）

public async Task<IActionResult> OnGetTableAsync()
{
   var wItem = await _detailRepo.Finddetail(CancellationToken.None);
   return Ok(new List<object> {wItem} );

}

我相信这应该返回类似：

[{
   "detail_ID": 7,
   "detail_GUID": "685b8741-fe22-460a-bb76-7ecd9c320172"
}]

应该和表格更兼容

您可能还必须更改 ajax 调用的“ajax”部分：

"ajax": {
    "url": "/Index?handler=Table",
    "type": "GET",
    "dataType": "application/json"
}

更新：看起来您需要返回查看示例 Here 的特定对象

所以你需要让你的对象看起来像这样：

{
    "data": [{
        "detail_ID": 7,
        "detail_GUID": "685b8741-fe22-460a-bb76-7ecd9c320172"
    }]
}

执行此操作的最简单方法可能是更新您的服务器端执行以下操作：

public async Task<IActionResult> OnGetTableAsync()
{
   var wItem = await _detailRepo.Finddetail(CancellationToken.None);
   return Ok(new { data = new List<object> {wItem} });

}

我相信有一个用于数据表的 .Net nuget 包，可以为您提供更合适的返回类型

希望对你有帮助