Grid content not rendered properly with Gijgo grid and ASP.NET core 3.1

Question

I am trying to write a simple webapp to create TODOLists using ASP.NET Core 3.1 and gijgo grid. I have a TODOItems table in a database with 3 entries. When I try to display them in a grid using gijgo, the grid shows 3 empty rows at and not the actual contents from the table. Using a debugger I can see that the correct controller gets invoked and records are being fetched from the db table but not rendered properly. Can someone help me figure why the grid appears empty?

Relevant piece of code from index.cshtml

<div class="col-12">
     <table id="grid"></table>
</div>


<script type="text/javascript">
        $(document).ready(function () {
            $('#grid').grid({
                    dataSource: '/Home/Get',
                    uiLibrary: 'bootstrap4',
                    primaryKey: 'ID',
                    columns: [
                        { field: 'ID', width: 44 },
                        { field: 'Name', editor: true },
                        { field: 'IsCompleted', title: 'Done?', type: 'checkbox', editor: true, width: 90, align: 'center' }
                    ],
                    pager: { limit: 5 }
                });
            });
    </script>

Corresponding Controller method

public JsonResult Get(int? page, int? limit, string searchString = null)
        {
            List<TODOItem> records;
            var query = this._context.TODOItems.Select(t => new TODOItem 
            {
                ID = t.ID,
                Name = t.Name,
                IsCompleted = t.IsCompleted
            });

            if (!string.IsNullOrWhiteSpace(searchString))
            {
                query = query.Where(p => p.Name.Contains(searchString));
            }

            int total = query.Count();

            if (page.HasValue && limit.HasValue)
            {
                int start = (page.Value - 1) * limit.Value;
                records = query.Skip(start).Take(limit.Value).ToList();
            }
            else
            {
                records = query.ToList();
            }

            return Json(new { records, total });
        }

Answer 1

I reproduce your problem and when I check the F12 network response, I find that all fields' names of returned data become lower case which results in the empty display.

The solution is that you could change the ContractResolver, just add below code in startup ConfigurServices

services.AddControllersWithViews().AddNewtonsoftJson(options =>
{
    options.SerializerSettings.ContractResolver = new DefaultContractResolver();
});

Remember to install the package Microsoft.AspNetCore.Mvc.NewtonsoftJson for 3.1 firstly.

Refer to Why the controller response are setting model field names into lower case?