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

    Father Details


    
        
            
                
                    
                    
                    
                    
                    
                    
                    
                
            
            
        ID SSN Name Gender City Status Action

    
    
    
    

@*}*@
@section scripts
{
    
}

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

    Father Detail 


    
        
            
                
                    
                    
                    
                    
                    
                    
                    
                
            
            
        ID SSN Name Gender City Status Action

    
    
    
        
    


@section scripts {
    
}@*

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

In your updated controller method, you're returning a JSON object with properties data, recordsTotal, and recordsFiltered. the data property should contain the actual data, not an anonymous object with properties that don't match your columns. In your DataTable initialization, you're setting "serverSide": true, which means DataTables expects the server to handle pagination, filtering, and sorting. but your controller method doesn't handle these operations.

 
 public IActionResult Index()
{
    var list = _repo.GetDetail();

    var jsonData = new
    {
        draw = Request.Form["draw"],
        recordsTotal = list.Count(),
        recordsFiltered = list.Count(),
        data = list.Select(x => new
        {
            ID = x.ID,
            SSN = x.socialsecurityNumber,
            cityName = x.City.Name,  // Assuming City has a 'Name' property
            Gender = x.Gender,
            Name = x.Name,
            Status = x.Status
        })
    };

    return Json(jsonData);
}