No data is displayed

5 posts, 1 answers
  1. Harald
    Harald avatar
    79 posts
    Member since:
    Oct 2013

    Posted 01 Jul 2020 Link to this post

    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>
  2. Tsvetomir
    Admin
    Tsvetomir avatar
    790 posts

    Posted 06 Jul 2020 Link to this post

    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

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  3. Harald
    Harald avatar
    79 posts
    Member since:
    Oct 2013

    Posted 12 Jul 2020 in reply to Tsvetomir Link to this post

    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.

     

  4. Answer
    Tsvetomir
    Admin
    Tsvetomir avatar
    790 posts

    Posted 14 Jul 2020 Link to this post

    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

  5. Harald
    Harald avatar
    79 posts
    Member since:
    Oct 2013

    Posted 27 Jul 2020 in reply to Tsvetomir Link to this post

    Great. Now the data is displayed. Thank you very much.
Back to Top