Kendo UI Изменить данные при нажатии «Перейти на следующую страницу»

Question

Я очень новичок в Kendo и MVC4. Я получил часть, где я показываю данные на сетке Kendo на моей веб-странице.

На одной странице я включил только 10 элементов (строк) для отображения. Но когда я нажимаю на номер «2», страница фантастически терпит неудачу.

Я понимаю, что мне не хватает какой-то кусок кода на стороне контроллера. Но из-за моего незнания о MVC4 я не знаю, что добавить в какое место. Ниже Вид:

@model IEnumerable<MVC4Trial.Models.vwCallDetail> 
@{ 
    ViewBag.Title = "Index"; 
} 

<h2>Call Detail View</h2> 

@(Html.Kendo().Grid(Model) 
.Name("Grid") 
.Columns(columns => 
    { 
     columns.Bound(p => p.CCCID).Width(50).Title("CCCID"); 
     columns.Bound(p => p.Mp3_Url).Width(50).Title("MP3 URL"); 
     columns.Bound(p => p.Target_Number).Width(50).Title("Target Number"); 
     columns.Bound(p => p.Duration).Width(50); 
     columns.Bound(p => p.Index).Width(50); 
     columns.Bound(p => p.LocalTime).Width(50); 
     columns.Bound(p => p.Site_Name___Address).Width(50).Title("Site Address"); 
     columns.Bound(p => p.Ad_Source_Name).Width(50).Title("Ad Source Name"); 
     columns.Bound(p => p.Tracking_Number).Width(50).Title("Tracking Number"); 
     columns.Bound(p => p.Caller_Number).Width(50).Title("Caller"); 
     columns.Bound(p => p.Available_Feature).Width(50).Title("Features"); 
    }) 
    .Pageable(page => page.Enabled(true).PageSizes(new Int32[] {10, 20, 30, 40})) 
    .Sortable(sorting => sorting.SortMode(Kendo.Mvc.UI.GridSortMode.SingleColumn)) 
    .Scrollable() 
    .Filterable() 
    .DataSource(datasource => datasource 
     .Ajax() 
     .Read(read => read.Action("vwCallDetail", "Grid")) 
     ) 
    .Resizable(resize =>resize.Columns(true)) 
    .Reorderable(reordering => reordering.Columns(true)) 


    ) 

Ниже код контроллера

using System; 
using System.Collections.Generic; 
using System.Data; 
using System.Data.Entity; 
using System.Linq; 
using System.Web; 
using System.Web.Mvc; 
using MVC4Trial.Models; 
using Kendo.Mvc.UI; 
using Kendo.Mvc.Extensions; 

namespace MVC4Trial.Controllers 
{ 
    public class CallTrackController : Controller 
    { 
     private CallTrackEntities db = new CallTrackEntities(); 

     // 
     // GET: /CallTrack/ 

     public ActionResult Index() 
     { 
      return View(db.vwCallDetails.ToList()); 
     } 


     public ActionResult vwCallDetails([DataSourceRequest] DataSourceRequest request) 
     { 
      return Json(GetCallDetails().ToDataSourceResult(request)); 
     } 

     private static IEnumerable<vwCallDetail> GetCallDetails() 
     { 
      var callDetails = new CallTrackEntities(); 
      return callDetails.vwCallDetails.Select(vwCallDetail => new vwCallDetail 
      { 
       CCCID = vwCallDetail.CCCID, 
       Mp3_Url = vwCallDetail.Mp3_Url, 
       Index = vwCallDetail.Index, 
       Target_Number = vwCallDetail.Target_Number, 
       Duration = vwCallDetail.Duration, 
       LocalTime = vwCallDetail.LocalTime, 
       Site_Name___Address = vwCallDetail.Site_Name___Address, 
       Ad_Source_Name = vwCallDetail.Ad_Source_Name, 
       Tracking_Number = vwCallDetail.Tracking_Number, 
       Caller_Number = vwCallDetail.Caller_Number, 
       Available_Feature = vwCallDetail.Available_Feature 


      }); 
     } 


     public ActionResult Details(int id = 0) 
     { 
      vwCallDetail vwcalldetail = db.vwCallDetails.Find(id); 
      if (vwcalldetail == null) 
      { 
       return HttpNotFound(); 
      } 
      return View(vwcalldetail); 
     } 

     // 
     // GET: /CallTrack/Create 

     public ActionResult Create() 
     { 
      return View(); 
     } 

     // 
     // POST: /CallTrack/Create 

     [HttpPost] 
     public ActionResult Create(vwCallDetail vwcalldetail) 
     { 
      if (ModelState.IsValid) 
      { 
       db.vwCallDetails.Add(vwcalldetail); 
       db.SaveChanges(); 
       return RedirectToAction("Index"); 
      } 

      return View(vwcalldetail); 
     } 

     // 
     // GET: /CallTrack/Edit/5 

     public ActionResult Edit(int id = 0) 
     { 
      vwCallDetail vwcalldetail = db.vwCallDetails.Find(id); 
      if (vwcalldetail == null) 
      { 
       return HttpNotFound(); 
      } 
      return View(vwcalldetail); 
     } 

     // 
     // POST: /CallTrack/Edit/5 

     [HttpPost] 
     public ActionResult Edit(vwCallDetail vwcalldetail) 
     { 
      if (ModelState.IsValid) 
      { 
       db.Entry(vwcalldetail).State = EntityState.Modified; 
       db.SaveChanges(); 
       return RedirectToAction("Index"); 
      } 
      return View(vwcalldetail); 
     } 

     // 
     // GET: /CallTrack/Delete/5 

     public ActionResult Delete(int id = 0) 
     { 
      vwCallDetail vwcalldetail = db.vwCallDetails.Find(id); 
      if (vwcalldetail == null) 
      { 
       return HttpNotFound(); 
      } 
      return View(vwcalldetail); 
     } 

     // 
     // POST: /CallTrack/Delete/5 

     [HttpPost, ActionName("Delete")] 
     public ActionResult DeleteConfirmed(int id) 
     { 
      vwCallDetail vwcalldetail = db.vwCallDetails.Find(id); 
      db.vwCallDetails.Remove(vwcalldetail); 
      db.SaveChanges(); 
      return RedirectToAction("Index"); 
     } 

     protected override void Dispose(bool disposing) 
     { 
      db.Dispose(); 
      base.Dispose(disposing); 
     } 
    } 
} 

Ниже файл _Layout.cshtml

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8" /> 
     <title>@ViewBag.Title - Kendo UI Sample</title> 
     <link rel="stylesheet" href="@Url.Content("~/Content/kendo.common.min.css")"> 
     <link rel="stylesheet" href="@Url.Content("~/Content/kendo.default.min.css")"> 
     <script src="@Url.Content("~/Scripts/jquery.min.js")"></script> 
     <script src="@Url.Content("~/Scripts/kendo.web.min.js")"></script> 
     <script src="@Url.Content("~/Scripts/kendo.aspnetmvc.min.js")"></script> 
     <link href="@Url.Content("~/Content/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" /> 
     <script src="@Url.Content("~/Scripts/kendo.dataviz.min.js")"></script> 
     <script src="@Url.Content("~/Scripts/kendo.aspnetmvc.min.js")"></script> 
    </head> 
    <body> 
     <header> 
      <div class="content-wrapper"> 

       <div class="float-right"> 
       </div> 
      </div> 
     </header> 
     <div id="body"> 
      @RenderSection("featured", required: false) 
      <section class="content-wrapper main-content clear-fix"> 
       @RenderBody() 
      </section> 
     </div> 
     <footer> 

     </footer> 

     @Scripts.Render("~/bundles/jquery") 
     @RenderSection("scripts", required: false) 
    </body> 
</html> 

Теперь какие изменения мне нужно сделать к View/Model/Controller, чтобы эта работа работала? Пожалуйста, простите меня, если я опущу какие-либо подробности. Спасибо за вашу помощь.

Answer 1

Это лучше смотреть на Telerik's online demo

Вы должны написать свой контроллер:

public ActionResult vwCallDetail([DataSourceRequest] DataSourceRequest request) 
    { 
     return Json(db.TableName.ToDataSourceResult(request)); 
    } 

Я надеюсь, что вы включили эти файлы в представлении:

<link href="@Url.Content("~/Content/kendo/2012.3.1114/kendo.common.min.css")" rel="stylesheet" type="text/css" /> 
<link href="@Url.Content("~/Content/kendo/2012.3.1114/kendo.default.min.css")" rel="stylesheet" type="text/css" /> 
<script src="@Url.Content("~/Scripts/kendo/2012.3.1114/jquery.min.js")"></script> 
<script src="@Url.Content("~/Scripts/kendo/2012.3.1114/kendo.all.min.js")"></script> 
<script src="@Url.Content("~/Scripts/kendo/2012.3.1114/kendo.aspnetmvc.min.js")"></script>