asp.net-mvc-4 - MVC4 と KendoUI グリッド。データソースへの接続の問題 (KendoUI OpenSource)

Question

MVC4 プロジェクトと Entity Framework で OpenSource バージョンの Kendo-UI を使用しています。kendo-ui グリッドを .cshtml ファイルのデータソースに接続する方法を誰か説明してください。私は単純にビューを作成し、@model を使用してコントローラーから情報を取得することに慣れています。Kendo-UI 用の ASP.NET サーバー タグがないため。javascript でグリッドを宣言するとき、datasource: 部分の後に何を置きますか?

Answer 1

以下のコード スニペットを試してみてください。気になることがあれば教えてください。

見る

<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<div id="Grid">
</div>
<script>
$(document).ready(function () {

    var dataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: "Home/GetDummydata",
                dataType: "json"
            }
        }
        ,
        schema: {
            data: function (data) {
                return data;
            }
        }
    });


    $("#Grid").kendoGrid({
        dataSource: dataSource,
        columns: [
           {
               field: "ID",
               title: "ID"
           },
           {
               field: "Name",
               title: "Name"
           }
       ]
    });
});


</script>

コントローラ

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }


    [AllowAnonymous]
    [HttpGet]
    public JsonResult GetDummydata()
    {
        List<TestModels> models = new List<TestModels>();

        for (int i = 1; i < 6; i++)
        {
            TestModels t1 = new TestModels();
            t1.ID = i;
            t1.Name = "Name" + i;

            models.Add(t1);
        }

        return Json(models, JsonRequestBehavior.AllowGet);
    }

}

モデル

public class TestModels
{
    public int ID { get; set; }
    public string Name { get; set; }

}