ASP.NET Core 3.0 Razor Datatables Ajax not show JSon data

Question

I have a page with a table, with one column, using DataTables; i load data with an ajax call.

Data are returned to the page but table show no row. I don't have any error show on browser.

This is my HTML with JQuery:

<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>

This is my method:

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

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

}

and this is reurned JSON:

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

Any suggestion?

Mark Davies · Accepted Answer · 2019-12-13 10:22:14Z

1

First thing you don't need to convert your result to json - web api handles that for you in c#:

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

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

}

I think you may want to change the return type to OK:

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

}

And return a list (to fit into the table)

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

}

I believe this should return something like:

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

Which should be more compatible with tables

You may have to also change the "ajax" part of the ajax call:

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

Update: Looks like you need to return specific object looking at the example Here

So you need to make your object look like this:

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

The easiest way to do this is probably going to be to update your server-side do something like:

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

}

I believe there is a .Net nuget package for data table that will give you a more appropriate type to return

Hope this helps

edited Dec 13, 2019 at 10:22

answered Dec 13, 2019 at 8:48

Mark Davies

1,4972 gold badges15 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

MrTex Over a year ago

Hi, doesn't work. I have change my method with "return new OkObjectResult(new List<object> { wItem });" and "dataType": "application/json" but now i have the error "DataTables warning: table id=DetailsTable - Invalid JSON". This is the returned JSON:[{"detail_ID":7,"detail_GUID":"685b8741-fe22-460a-bb76-7ecd9c320172"}]

MrTex Over a year ago

Thanks Mark, you save my time. It work. I will find also that, if you have a nested object, you can retrive the column with ""dataSrc": "data.0.NeastedDetails"".

Mark Davies Over a year ago

It's what were here for :)

Collectives™ on Stack Overflow

ASP.NET Core 3.0 Razor Datatables Ajax not show JSon data

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related