CODEWITHSUNDEEP
c#ajaxasp.net-corerazordatatables
MrTex
MrTex

Reputation: 249

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

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?

Upvotes: 0

Views: 1734

Answers (1)

Mark Davies
Mark Davies

Reputation: 1497

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

Upvotes: 1

Related Questions