show data in a data table .net core mvc

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