Dear All I would like to ask a simple question I have two variation of code and both of them are not working as expected . I have controller with index method as shown below.
public IActionResult Index() { Entities dbContext=new Entities(); var list=_IRepo.GetDetail(); return View("Index", list); }
GetDetail is here
public List<FatherData> GetDetail() { var List=_dbContext.FatherData.ToList(); return List; }
My Model FatherData is as below
public Class FatherData { public int id {get;set;} public int socialsecurityNumber {get;set;}; public string? Name { get; set; } public string? Gender { get; set; } public decimal? City { get; set; } {this is another table with cityId and name} so we are saving city id here }
My Index view is as below :
@model IEnumerable<MYPROJECT.Models.FatherData> <div class="row panel-heading bg-system"> Father Details </div> <div class="panel panel-default"> <div class="table-responsive"> <table id="tablFather"> <thead> <tr> <th width="5%" style="text-align:center">ID</th> <th width="5%" style="text-align:center">SSN</th> <th width="5%" style="text-align:center">Name</th> <th width="5%" style="text-align:center">Gender</th> <th width="5%" style="text-align:center">City</th> <th width="5%" style="text-align:center">Status</th> <th width="5%" style="text-align:center">Action</th> </tr> </thead> <tbody style="text-align:center"></tbody> </table> </div> <!-- END table-responsive--> <div class="panel-footer"> </div> </div> @*}*@ @section scripts { <script> var columns; $(document).ready(function () { columns = [ { "title": "ID", "data": "Id", "searchable": true }, { "title": "SSN NUMBER", "data": "socialsecurityNumber", "searchable": true }, { "title": "Name", "data": "name", "searchable": true }, { "title": "Gender", "data": "gender", "searchable": true }, { "title": "City", "data": "cityName", "searchable": true }, { "title": "Status", "data": "status", "searchable": true }, ]; columns.push({ "title": "Action", "searchable": true, "render": function (data, type, full, meta) { var btnDiv = '<div style="overflow: hidden;white-space: nowrap;text-align: center;">'; var buttons = ''; buttons = buttons + '<a class="btn btn-oval btn-bg-system" href="/FatherDetail/Details?tid=' + full.id + '" type="button" >Open</a>'; return btnDiv + buttons + '</div>'; } }); var table = $('#tablFather').DataTable({ "processing": true, "serverSide": true, "order": [[0, "desc"]], "rowId": 'Id', "columnDefs": [{ "targets": [5], "searchable": true, "orderable": false, "visible": true, } ], "ajax": { "url": "/Father/Index", "type": "GET", "dataType": "json", "data": function (d) { return $.extend({}, d, { }); } }, "columns": columns }); }); </script> }
IGNORE SPELLING THEY ARE FINE while view the index view I saw this error message DataTables warning: table id=tblFather- Invalid JSON response. For more information about this error, please see http://datatables.net/tn/1
Then I modifed the entire code in the index method to return the JSON my index method is now having json and updated view is as shown below but still I saw raw json rather then data table my updated index view is below
UPDATED VIEW
@model IEnumerable<MYPROJECT.Models.FatherData> <div class="row panel-heading bg-system"> <h3>Father Detail </h3> </div> <div class="panel panel-default"> <div class="table-responsive"> <table id="tablFather" class="table table-bordered table-hover"> <thead> <tr> <th width="5%" style="text-align:center">ID</th> <th width="5%" style="text-align:center">SSN</th> <th width="5%" style="text-align:center">Name</th> <th width="5%" style="text-align:center">Gender</th> <th width="5%" style="text-align:center">City</th> <th width="5%" style="text-align:center">Status</th> <th width="5%" style="text-align:center">Action</th> </tr> </thead> <tbody style="text-align:center"></tbody> </table> </div> <!-- END table-responsive --> <div class="panel-footer"> <!-- Any additional footer content can go here --> </div> </div> @section scripts { <script> $(document).ready(function () { var columns = [ { "title": "ID", "data": "Id", "searchable": true }, { "title": "SSN NUMBER", "data": "socialsecurityNumber", "searchable": true }, { "title": "Name", "data": "name", "searchable": true }, { "title": "Gender", "data": "gender", "searchable": true }, { "title": "City", "data": "cityName", "searchable": true }, { "title": "Status", "data": "status", "searchable": true }, { "title": "Action", "searchable": false, "orderable": false, "render": function (data, type, full, meta) { return '<a class="btn btn-oval btn-bg-system" href="/FatherDetail/Details?tid=' + full.Id + '" type="button">Open</a>'; } } ]; var table = $('#tablFather').DataTable({ "processing": true, "serverSide": true, "order": [[0, "desc"]], "rowId": 'Id', "ajax": { "url": "@Url.Action("Index", "FatherDetails")", // Ensure the correct controller and action method are referenced "type": "GET", "dataType": "json" }, "columns": columns }); }); </script> }@*
Updated Controller :
public IActionResult Index() { // Fetch the data var list = _repo.GetDetail(); // Convert the data to JSON format required by DataTables var jsonData = new { data = list.Select(x => new { ID= x.ID, SSN= x.socialsecuritynumber, city= x.City.cityName, Gender = x.Gender, Name= x.Name, Status = x.Status, // Include any other properties you need }), recordsTotal = list.Count(), recordsFiltered = list.Count() // Assuming no additional filtering on the server-side }; return Json(jsonData); }
I can see the raw json on index view but not datatable