Newbie - Using asp.net core MVC - Cannot display data in Grid

[Jonah]

I think I'm close.  Its not throwing any errors but its also not displaying any data... Im just trying to get it to display a list of Company Names and Company IDs from my TblCompanyInfo table.

This is my controller:

        public async Task<IActionResult> Index()
            {
            var apptReminderContext = _context.TblCompanyInfos.Include(t => t.AcctType).Include(t => t.CompanyStatus).Include(t => t.OnHoldReason);
            return View(await apptReminderContext.ToListAsync());
            //return View();
        }

        public JsonResult Products_Read([DataSourceRequest] DataSourceRequest request)
        {
            DataSourceResult result = _context.TblCompanyInfos.ToDataSourceResult(request,
                model => new TblCompanyInfo
                {
                    CompanyId = model.CompanyId,
                    CompanyName = model.CompanyName
                });
            return Json(result);
        }

and my view...

@model IEnumerable<AppointmentRemindersNetCoreMVC.Models.TblCompanyInfo>

@{
    ViewData["Title"] = "Index";
}

<h1>Index</h1>

@using AppointmentRemindersNetCoreMVC.Data
@using Kendo.Mvc.UI
@addTagHelper *, Kendo.Mvc

@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
@Html.AntiForgeryToken()

       @(Html.Kendo().Grid<AppointmentRemindersNetCoreMVC.Models.TblCompanyInfo>()
        .Name("grid")
        .DataSource(dataSource => dataSource.Ajax()
        .Read(read => read.Action("Products_Read", "Company"))
        .PageSize(20)
        //.ServerOperation(false)
        //.Model(model => model.Id(c => c.CompanyId))
        //.Read("Products_Read", "Company")
        //.Read(read => read.Action("Products_Read", "Company"))
        .Update("UpdateCustomer", "Home")
        .Create("InsertCustomer", "Home")
        .Destroy("DeleteCustomer", "Home"))

        .Columns(columns =>
        {
            columns.Bound(product => product.CompanyName);
            columns.Bound(product => product.CompanyId);
        })
        .Pageable()
        .Sortable()
        
    )

I know that the Products_Read function is being called by the view and I also know that the "result" contains 32 rows of data.  However, nothing is displayed in the grid

See the attached screenshot.

Thank you for any help you can provide!!

 

[Jonah]

Figured it out! Turns out that json camelcases the return string so the model properties did not match what was returned by json. Thanks to Eric for helping me by viewing the json (see my screenshot DevTools.jpg. The solution was to add this line to the Startup.cs file.

 services.AddControllers()
.AddJsonOptions(options =>
options.JsonSerializerOptions.PropertyNamingPolicy = null);

[Eric]

Hello Jonah,

Perhaps this might help:

Since you are reading data through an AJAX call, on your Index() method there is no need to give the data model to the view.  Your data is going to be loaded by the Grid via AJAX when the page is "ready."  So, the index method might be simply:

public IActionResult Index()
{
    return View();
}

Here is example code with comments on how I would write the Products_Read method:

public async Task<IActionResult> Products_Read([DataSourceRequest] DataSourceRequest request)
{
      // I noticed your code builds the data model within the ToDataSourceResultAsync
      // I've always done this as part of the query, like below using the "Select" method.
      DataSourceResult result = await _context.TblCompanyInfos.Select( model => new TblCompanyInfo
          {
                CompanyId = model.CompanyId,
               CompanyName = model.CompanyName
          }).ToDataSourceResultAsync(request);
            
     // For debugging, set a break point below to see if you are actually getting data from the database
     // Also, if this break point isn't being hit, it could be the method isn't being called from the web browser,
     // or the web application is not routing the request correctly to this method
     // Third possibility is the code just above might be throwing an error.
     return Json(result);
}   

 

The last thing I would do is this: Open "Developer Tools" on your web browser. Here look for two things:  (1) Look for JavaScript errors, and (2) look at the "Network" tab to see if the server is returning JSON data, or, throwing an error.

Oh, and one more thing: Since the Index() method isn't returning a model, you likely don't need to declare a model with @model in the view. 

Hope this helps!

-Eric

 

[Jonah]

Thank you - I changed everything as you suggested. Also checked for errors. The only error I see is WebSocket connection to 'wss://localhost:54550/AppointmentRemindersNetCoreMVC/' failed:  However, this error doesn't prevent data from being shown in the Demo Telerik projects (even though they also throw the error. )

I also check the json result and results are returned.  Please see screenshot "DevTools.jpg"