How to extract record from json string to display in Jquery Datatable?

tahirraza21

I'm fetching client records from the database and after concatenating the model class properties(FirstName and LastName) I converted these records in JSON string. My goal is to display these records in Jquery Datatable. I observed at debugging, all these records are in a single string causing the error "Requested unknown parameter".

At first, I tried to return a simple JSON return method return
Json(ClientList)
but it did not concatenate the model class properties.
Thus, I used
JsonConvert.SerializeObject()
to convert all the details by passing ClientList object and now scratching my head how to use this JSON String in Jquery Datatable as all the records are in the following format :
[{\"Id\":1,\"FirstName\":\"abc\",\"LastName\":\"xyz\",\"FullName\":\"abc xyz\"},{\"Id\":2,\"FirstName\":\"qwe\",\"LastName\":\"rty\",\"FullName\":\"qwe rty\"}]

** Model:**
public string FirstName { get; set; }
public string LastName { get; set; }
public string FullName
{
get
{
return FirstName + " " + LastName;
}
}

Controller:
public ActionResult GetClientList()
{
var ClientList = _context.Clients.ToList();
//return Json(ClientList);
string jsonData = JsonConvert.SerializeObject(clientList);
return Json(jsonData);
}

View:
<script> $(document).ready(function () {$("#ClientTable").DataTable({"ajax": {"url": "/Client/GetClientList","type": "GET","datatype":"json","dataSrc": ""},"columns":[{ "data": "Id" },{ "data": "FullName" }]});}); </script>