C# Kendo issues - How can ı show my grid?

Question

I am using KendoUI but didnt show my grid. I'm getting the data, ı want to take my books on the server side and show them on my page. I wrote the following codes for this. But my books are not listed in Grid on my page but I can't show it in grid form on my page. Why? Here is my code:

Controller Page:

using Kendo.Mvc.Extensions;
using Kendo.Mvc.UI;
using Microsoft.AspNetCore.Mvc;
using TelerikBookProject.Data;
using TelerikBookProject.Models;

namespace myBookProject.Controllers
{
public class BookController : Controller
{
    private readonly AppDbContext _db;

    public BookController(AppDbContext db)
    {
        _db = db;
    }

    public IActionResult Index([DataSourceRequest] DataSourceRequest request)
    {
        IEnumerable<BookModel> result = new List<BookModel>();
        result = _db.BookModels;
        return View(result);
    }
    //public IActionResult IndexView()
    //{
    //    IEnumerable<BookModel> obj = _db.BookModels;
    //    return View(obj);
    //}
    public IActionResult IndexView()
    {
        return View();
    }

  

    //GET
    public IActionResult Create()
    {

        return View();

    }
    //POST
    [HttpPost]
    [ValidateAntiForgeryToken]
    public IActionResult Create(BookModel obj)
    {
        if (ModelState.IsValid)
        {
            _db.BookModels.Add(obj);
            _db.SaveChanges();
            TempData["success"] = "Kitap eklendi.";
            return RedirectToAction("Index");
        }
        return View(obj);
    }
    //GET
    public IActionResult Update()
    {

        return View();

    }
    //POST
    [HttpPost]
    [ValidateAntiForgeryToken]
    public IActionResult Update(BookModel obj)
    {
        if (ModelState.IsValid)
        {
            _db.BookModels.Update(obj);
            _db.SaveChanges();
            TempData["success"] = "Kitap güncellendi.";
            return RedirectToAction("Index");
        }
        return View(obj);
    }

    //GET
    public IActionResult Delete(int? id)
    {
        if (id == null || id == 0)
        {
            return NotFound();
        }
        var categoryFromDb = _db.BookModels.Find(id);

        if (categoryFromDb == null)
        {
            return NotFound();
        }

        return View(categoryFromDb);
    }
    //POST
    [HttpPost, ActionName("Delete")]
    [ValidateAntiForgeryToken]
    public IActionResult DeletePOST(int? id)
    {
        var obj = _db.BookModels.Find(id);
        if (obj == null)
        {
            return NotFound();
        }

        _db.BookModels.Remove(obj);
        _db.SaveChanges();
        TempData["success"] = "Kitap silindi.";
        return RedirectToAction("Index");
    }
}
}

Index.cshtml:

@{
ViewData["Title"] = "Kitaplarım";

}
@addTagHelper *, Kendo.Mvc
@using Kendo.Mvc.UI

<div class="row">
    <div class="col-12">

        <ol class="breadcrumb">
            <li class="breadcrumb-item">
            TelerikBookProject
            </li>
            <li class="breadcrumb-item active"><strong> Kitaplarım</strong></li>
        </ol>

    </div>
</div>



<div class="row">
    <div class="col-12">
        <div class="w-100">
            @(
                Html.Kendo().Grid<TelerikBookProject.Models.BookModel>
                        ().Name("Grid").Columns(columns =>
                        {
                        columns.Bound(c => c.BookTitle).Title("Kitap Adı").Width(450);
                        columns.Bound(c => c.BookDescription).Title("Kitap 
Açıklaması").Width(450);
                        columns.Bound(c => c.bookPage).Title("Sayfa Sayısı").Width(450);
                    }).DataSource(datasource => datasource.Ajax().Read(read => 
read.Action("Index", "Book"))))
    </div>
    </div>
</div>

Model.cs:

using System.ComponentModel.DataAnnotations;

namespace TelerikBookProject.Models
{
    public class BookModel
    {
        [Key]
        public int bookId  { get; set; }
        [Required]
        public string BookTitle { get; set; }
        public string BookDescription { get; set; }
        public int bookPage { get; set; }
        public DateTime CreatedTime { get; set; } = DateTime.Now;
    }

}

and AppDbContext.cs:

using Microsoft.EntityFrameworkCore;
using TelerikBookProject.Models;

namespace TelerikBookProject.Data
{
    public class AppDbContext : DbContext
    {
        public AppDbContext(DbContextOptions<AppDbContext> options) : base(options)
        {
        }

        public DbSet<BookModel> BookModels { get; set; }
        public object BooksModels { get; internal set; }
    }
}

Answer 1

You need to return a DataSourceResult as JSON for the grid read action.

using Kendo.Mvc.Extensions;

public IActionResult Index([DataSourceRequest] DataSourceRequest request)
{
    IEnumerable<BookModel> result = new List<BookModel>();
    result = _db.BookModels;
    return Json(result.ToDataSourceResult(request));
}