Wie binde ich JSON an Kendo Grid-Datenquelle in MVC

Question

Ich versuche, die JSON-Antwort dynamisch an Gitter zu binden. Ich habe autobind = false gesetzt, damit ich kontrollieren kann, wann ich ReadData() anrufen soll.

Ich habe ein vereinfachtes Beispiel unten, dass ich nicht zur Arbeit kommen kann.

In der Ansicht (cshtml)

@(Html.Kendo().Grid<MyModel>() 
    .Name("GridDetail") 
    .AutoBind(false) 
    .DataSource(ds => 
    { 
     ds.Ajax().Read(r => 
     { 
      r.Action("ReadData", "Home"); //action in Home controller 
     }); 
    }) 
    .Columns(c => 
    { 
     c.Bound(m => m.Name); 
     c.Bound(m => m.Age); 
    }) 
) 

@section Scripts{ 
    <script type="text/javascript"> 
     $(function() { 
      var grid = $("#GridDetail").data("kendoGrid"); 
      grid.dataSource.read(); 
     }); 

    </script> 
} 

In dem Regler I haben

public ActionResult ReadData() 
{ 
    var model = new[] 
    { 
     new MyModel 
     { 
      Name = "Abc", 
      Age = 10 
     }, 
     new MyModel 
     { 
      Name = "PersonName", 
      Age = 25 
     }, 
    }; 
    return Json(model, JsonRequestBehavior.AllowGet); 
} 

die Entwicklertools in Chrom verwendet, kann ich sehen, dass die Antwort für den ReadData() ist [{"Name":"Abc","Age":10},{"Name":"PersonName","Age":25}] jedoch das gerenderte grid zeigt nur die Spaltennamen, aber keine Datenspalten an.

MyModel ist eine einfache Klasse:

public class MyModel 
{ 
    public string Name { get; set; } 
    public int Age { get; set; } 
} 

Answer 1

The Kendo UI MVC Grid entwickelt, um mit ToDataSourceResult() im Aktionsmethode zu arbeiten, dass die Daten dient. Überprüfen Sie die folgenden Artikel:

http://docs.telerik.com/aspnet-mvc/helpers/grid/binding/ajax-binding

ToDataSourceResult() werden die Datenoperationen durchführen aufzupassen (Sortierung, Paging, usw.), und wird auch die Daten in dem erwarteten Format dienen, das:

{ 
    Data: [ 
     { "Name": "Abc", "Age": 10 }, 
     { "Name": "PersonName", "Age": 25 } 
    ], 
    Total: 2 
} 

(Spaces für Lesbarkeit hinzugefügt wurden, ist der wichtige Teil der Gegenwart von Data und Total.)

bearbeiten Zusatz: Um zu dieser Antwort hinzuzufügen, ist ein Beispiel dafür, wie Ihr Controller-Code aussehen könnte:

public ActionResult ReadData([DataSourceRequest] DataSourceRequest request) 
{ 
    var model = new[] 
    { 
     new MyModel 
     { 
      Name = "Abc", 
      Age = 10 
     }, 
     new MyModel 
     { 
      Name = "PersonName", 
      Age = 25 
     }, 
    }; 
    return Json(model.ToDataSourceResult(request), JsonRequestBehavior.AllowGet); 
}