Core 2 MVC with JQuery Datatables

Question

There is a good example on how to use JQuery Datatables with Core MVC at Using jQuery DataTables Grid With ASP.NET CORE MVC

I download the sample project, made some modifications and it works perfectly.

However, I'm getting an error when I try to integrate this into my project.

DataTables warning: table id=example - Requested unknown parameter 'IdStudent' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4

After I click ok on the error, the table generates with the correct number of rows, but with no data:

This is my class:

public class GridStudent
{
    [Key]
    public int IdStudent { get; set; }
    public string Name { get; set; }
    public string LastName { get; set; }
}

The HTML and JavaScript:

    <div class="container">
    <br />
    <div style="width:90%; margin:0 auto;">
        <table id="example" class="table table-striped table-bordered dt-responsive nowrap" width="100%" cellspacing="0">
            <thead>
                <tr>
                    <th>IdStudent</th>
                    <th>Name</th>
                    <th>LastName</th>
                    <th>Edit</th>
                    <th>Delete</th>
                </tr>
            </thead>
        </table>
    </div>
</div>


<script>

    $(document).ready(function ()
    {
        $("#example").DataTable({
            "processing": true, // for show progress bar
            "serverSide": true, // for process server side
            "filter": true, // this is for disable filter (search box)
            "orderMulti": false, // for disable multiple column at once
            "ajax": {
                "url": "/StudentGrid/LoadData",
                "type": "POST",
                "datatype": "json"
            },
            "columnDefs":
            [
                {
                    "targets": [0],
                    "visible": false,
                    "searchable": false,
                }
            ],
            "columns": [
                { "data": "IdStudent", "name": "IdStudent", "autoWidth": true },
                { "data": "Name", "name": "Name", "autoWidth": true },
                { "data": "LastName", "name": "LastName", "autoWidth": true },
                {
                    "render": function (data, type, full, meta)
                    { return '<a class="btn btn-info" href="/StudentGrid/Edit/' + full.IdStudent + '">Edit</a>'; }
                }
                ,
                {
                    data: null, render: function (data, type, row)
                    {
                        return "<a href='#' class='btn btn-danger' onclick=DeleteData('" + row.IdStudent + "'); >Delete</a>";
                    }
                },
            ]
        });
    });

    function DeleteData(CustomerID)
    {
        if (confirm("Are you sure you want to delete ...?"))
        {
            Delete(CustomerID);
        }
        else
        {
            return false;
        }
    }

   function Delete(CustomerID)
   {
        var url = '@Url.Content("~/")' + "StudentGrid/Delete";

        $.post(url, { ID: CustomerID }, function (data)
            {
                if (data)
                {
                    oTable = $('#example').DataTable();
                    oTable.draw();
                }
                else
                {
                    alert("Something Went Wrong!");
                }
            });
   }
</script>

This is the line of code, from the controller, than returns the data:

return await Task.Run(() => Json(new { draw = draw, recordsFiltered = recordsTotal, recordsTotal = recordsTotal, data = data }));

As you can see from the image, the controller is returning the data correctly, but for some reason DataTables can't read it.

I cross check with the sample a thousand times and I can't see a difference on the format of the data being return.

Any suggestions?

SpruceMoose · Accepted Answer · 2017-12-07 15:18:47Z

10

This is most likely due to the casing of the serialized JSON. Your data properties in the column definitions within your JavaScript expect Pascal casing. At present, I expect your are serializing JSON as lower camel case rather than Pascal case (e.g. idStudent instead of IdStudent).

To serialize JSON as Pascal case, make sure you have the following in the ConfigureServices method in your Startup class:

services
    .AddMvc()
    .AddJsonOptions(options =>
    {
        options.SerializerSettings.ContractResolver
            = new Newtonsoft.Json.Serialization.DefaultContractResolver();
    });

edited Dec 7, 2017 at 15:18

answered Dec 7, 2017 at 15:12

SpruceMoose

10.4k4 gold badges43 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jackal Over a year ago

nice! It worked right after i added this. Everything was showing correctly on debug though

PatsonLeaner Over a year ago

@CalC Thanks a lot, This help me too. With my Asp.net core2.2 web app, I was able to display the list of Data with a Pagination and sorting!!! Brilliant

Abhilash Thomas Over a year ago

I loose one full day due to this issue

Collectives™ on Stack Overflow

Core 2 MVC with JQuery Datatables

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related