No data is displayed

[Harald]

I based the implementation on the example video about TagHelpers. But no data is displayed. A call to the URL (https://localhost:44337/Suppliers/Read) provides data. What am I doing wrong?

SuppliersController:

001.using System;
002.using System.Collections.Generic;
003.using System.Linq;
004.using System.Threading.Tasks;
005.using Kendo.Mvc.Extensions;
006.using Kendo.Mvc.UI;
007.using Microsoft.AspNetCore.Mvc;
008.using Microsoft.AspNetCore.Mvc.Rendering;
009.using Microsoft.EntityFrameworkCore;
010.using VIMANTO.EasyOrder.Data;
011.using VIMANTO.EasyOrder.Models;
012.
013.namespace VIMANTO.EasyOrder.Controllers
014.{
015.    public class SuppliersController : Controller
016.    {
017.        private readonly ApplicationDbContext _context;
018.
019.        public SuppliersController(ApplicationDbContext context)
020.        {
021.            _context = context;
022.        }
023.
024.        [HttpGet]
025.        public ActionResult Read()
026.        {
027.            return Json(_context.Suppliers.Where(s => s.IsDeleted == false).ToList());
028.        }
029.
030.        // GET: Suppliers
031.        public async Task<IActionResult> Index()
032.        {
033.            return View(await _context.Suppliers.Where(s => s.IsDeleted == false).ToListAsync());
034.        }
035.
036.        // GET: Suppliers/Details/5
037.        public async Task<IActionResult> Details(int? id)
038.        {
039.            if (id == null)
040.            {
041.                return NotFound();
042.            }
043.
044.            var supplier = await _context.Suppliers
045.                .FirstOrDefaultAsync(m => m.Id == id);
046.            if (supplier == null)
047.            {
048.                return NotFound();
049.            }
050.
051.            return View(supplier);
052.        }
053.
054.        // GET: Suppliers/Create
055.        public IActionResult Create()
056.        {
057.            return View();
058.        }
059.
060.        // POST: Suppliers/Create
061.        // To protect from overposting attacks, enable the specific properties you want to bind to, for
062.        // more details, see http://go.microsoft.com/fwlink/?LinkId=317598.
063.        [HttpPost]
064.        [ValidateAntiForgeryToken]
065.        public async Task<IActionResult> Create([Bind("Id,InternalNumber,Name,AdditionalName,Street,Postcode,City,Phone,Fax,Mail,Web,CustomerNumber")] Supplier supplier)
066.        {
067.            if (ModelState.IsValid)
068.            {
069.                _context.Add(supplier);
070.                await _context.SaveChangesAsync();
071.                return RedirectToAction(nameof(Index));
072.            }
073.            return View(supplier);
074.        }
075.
076.        // GET: Suppliers/Edit/5
077.        public async Task<IActionResult> Edit(int? id)
078.        {
079.            if (id == null)
080.            {
081.                return NotFound();
082.            }
083.
084.            var supplier = await _context.Suppliers.FindAsync(id);
085.            if (supplier == null)
086.            {
087.                return NotFound();
088.            }
089.            return View(supplier);
090.        }
091.
092.        // POST: Suppliers/Edit/5
093.        // To protect from overposting attacks, enable the specific properties you want to bind to, for
094.        // more details, see http://go.microsoft.com/fwlink/?LinkId=317598.
095.        [HttpPost]
096.        [ValidateAntiForgeryToken]
097.        public async Task<IActionResult> Edit(int id, [Bind("Id,InternalNumber,Name,AdditionalName,Street,Postcode,City,Phone,Fax,Mail,Web,CustomerNumber")] Supplier supplier)
098.        {
099.            if (id != supplier.Id)
100.            {
101.                return NotFound();
102.            }
103.
104.            if (ModelState.IsValid)
105.            {
106.                try
107.                {
108.                    _context.Update(supplier);
109.                    await _context.SaveChangesAsync();
110.                }
111.                catch (DbUpdateConcurrencyException)
112.                {
113.                    if (!SupplierExists(supplier.Id))
114.                    {
115.                        return NotFound();
116.                    }
117.                    else
118.                    {
119.                        throw;
120.                    }
121.                }
122.                return RedirectToAction(nameof(Index));
123.            }
124.            return View(supplier);
125.        }
126.
127.        // GET: Suppliers/Delete/5
128.        public async Task<IActionResult> Delete(int? id)
129.        {
130.            if (id == null)
131.            {
132.                return NotFound();
133.            }
134.
135.            var supplier = await _context.Suppliers
136.                .FirstOrDefaultAsync(m => m.Id == id);
137.            if (supplier == null)
138.            {
139.                return NotFound();
140.            }
141.
142.            return View(supplier);
143.        }
144.
145.        // POST: Suppliers/Delete/5
146.        [HttpPost, ActionName("Delete")]
147.        [ValidateAntiForgeryToken]
148.        public async Task<IActionResult> DeleteConfirmed(int id)
149.        {
150.            var supplier = await _context.Suppliers.FindAsync(id);
151.            supplier.IsDeleted = true;
152.            await _context.SaveChangesAsync();
153.            return RedirectToAction(nameof(Index));
154.        }
155.
156.        private bool SupplierExists(int id)
157.        {
158.            return _context.Suppliers.Any(e => e.Id == id);
159.        }
160.    }
161.}

 

Index.chtml:

01.@{
02.    ViewData["Title"] = "Lieferanten";
03.    Layout = "~/Views/Shared/_Layout.cshtml";
04.}
05.
06.<div class="row">
07.    <div class="col-xs-12">
08.        <h3 class="k-text-info">Lieferanten verwalten</h3>
09.        <partial name="_SuppliersGrid" />
10.    </div>
11.</div>

 

_SuppliersGrid:

01.<kendo-grid name="SuppliersGrid" height="550" auto-bind="false">
02.    <columns>
03.        <column field="Name" title="Lieferant" />
04.        <column field="AdditionalName" title="Zusatz" min-screen-width="768" />
05.            <column field="Street" title="Strasse" />
06.            <column field="Postcode" min-screen-width="768">
07.                <filterable multi="true"></filterable>
08.            </column>
09.            <column field="City" title="Ort" />
10.    </columns>
11.
12.    <datasource type="DataSourceTagHelperType.Ajax" page-size="20">
13.        <schema>
14.                <model>
15.                    <fields>
16.                        <field name="Id" type="number"></field>
17.                    </fields>
18.                </model>
19.            </schema>
20.        <transport>
21.            <read url="@Url.Action("Read", "Suppliers")" />
22.        </transport>
23.        <sorts>
24.                <sort field="Name" direction="asc" />
25.            </sorts>
26.    </datasource>
27.    <groupable enabled="true" />
28.        <sortable enabled="true" />
29.    <pageable button-count="5" refresh="true" />
30.    <filterable enabled="true" />
31.</kendo-grid>

[Tsvetomir]

Hi Harald,

I have investigated the provided code snippets and I have noticed that a plain collection of data is returned to the client-side. Whenever the Kendo UI Grid is configured to use an AJAX data source, it is needed to return a DataSourceResult object that contains the data and the total count of items. 

The following example demonstrates what collection has to be returned:

https://docs.telerik.com/aspnet-core/html-helpers/data-management/grid/binding/ajax-binding

In case the issue persists, let me know.

 

Kind regards,
Tsvetomir
Progress Telerik

[Harald]

I changed the controller.

01.public ActionResult ReadActiveSuppliers([DataSourceRequest] DataSourceRequest request)
02.        {
03.            using (_context)
04.            {
05.                IEnumerable<Supplier> suppliers = _context.Suppliers.Where(s => s.IsDeleted == false);
06.                DataSourceResult result = suppliers.ToDataSourceResult(request);
07.                return Json(result);
08.            }
09.        }

 

Unfortunately there are still no data displayed. If I call the URL with Postman, I get the data. See screenshot.

 

[Tsvetomir]

Hi Harald,

Thank you for sharing the response from the server performed with Postman. Indeed, I have noticed that the properties are spelled with Camel-case whereas the grid expects them to be spelled with Pascal-case.

In order to configure the serialization options of the application, follow the instructions from the article below:

https://docs.telerik.com/aspnet-core/compatibility/json-serialization

Regards,
Tsvetomir
Progress Telerik

[Harald]

Great. Now the data is displayed. Thank you very much.