2016-12-21 10 views
1

グリッドにJSONレスポンスを動的にバインドしようとしています。私はReadData()にいつ呼び出すかを制御できるように、autobind = falseを設定しました。JSONをMVCの剣道グリッドデータソースにバインドする方法

私は以下のような簡単な例があり、私は仕事に就くことができません。私はクロムで開発ツールを使用し

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

を有するコントローラで

ビュー(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> 
} 

IはReadData()に対する応答が[{"Name":"Abc","Age":10},{"Name":"PersonName","Age":25}]がレンダリンググリッドであることがわかります列名のみが表示されますが、データ列は表示されません。

mymodelという簡単なクラスである:

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

答えて

1

剣道UI MVCグリッドがデータを提供していアクションメソッドにToDataSourceResult()で動作するように設計されています。次の資料を確認してください:

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

ToDataSourceResult()は、データの操作を行うのケア(ソート、ページングなど)を取る、とも予想される形式でデータを提供します:

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

(スペースは読みやすくするために追加された、重要な部分はDataTotalの存在である。)

編集追加:この回答を追加するには、コントローラコードの例を次のように入力します。

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); 
}