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

[Taher_3]

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

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>

[Dani]

So, just to make sure we're on the same page, you're using the https://datatables.net/ jQuery plug-in?

Because that table takes an existing HTML-based <table> and adds some UI widgets to format it all nicely. I see that there's an option to retrieve the data via AJAX, and it seems that's what you're doing, but is there a reason that you're doing that? Why are you unable to print out the tabular data via the initial HTML page?

I'm actually confused by what it is that isn't working. I have ZERO experience with .NET but I'm pretty solid when it comes to jQuery, so if you're telling me that your controller is spitting out the JSON perfectly when you go to /Client/GetClientList then I can help you debug your Javascript. When using Chrome/Firefox, does developer tools give you any console error messages?

[Taher_3]

First of all, really appreciate your response. This is the first time that I'm working with Jquery Data-tables. JS along with JSON works perfectly in Test Environment. Can u plz explain data-table and its usage bcz I dont have much idea how to manipulate Jquery code.

[Dani]

OK, so firstly, are you able to confirm that /Client/GetClientList returns something like:

[{"Id":1,"FirstName":"abc","LastName":"xyz","FullName":"abc xyz"},{"Id":2,"FirstName":"qwe","LastName":"rty","FullName":"qwe rty"}]

If that's true, then we can say the C# part (which I can't help you with) is correct, and we just need to look at the Javascript part.