时间戳

首页 > 解决方案 > ASP.NET Core 3.0 Razor Datatables Ajax 不显示 JSon 数据

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

问题描述

我有一个带有表格的页面，有一列，使用 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"
}

有什么建议吗？

标签： c#ajaxasp.net-corerazordatatables

解决方案

首先，您不需要将结果转换为 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 包，可以为您提供更合适的返回类型

希望这可以帮助

推荐阅读