我如何将模型用作Kendo UI网格的数据源？

Question

我只得到一个内部没有数据的网格。我是MVC的新手，无法仅使用传递到视图页面的模型来找到如何将数据添加到网格中。下面是我使用的代码

控制器代码：

  public ActionResult List()
    {
        List<CustomerModel> list = new List<CustomerModel>();
        for (int i = 0; i < 7; i++)
        {
            CustomerModel model = new CustomerModel();
            model.Id = 1;
            model.Name = "Alice";
            model.Address = "Blk "+i;
            model.PostalCode = ""+i+i+i;
            model.Email = i+"@yahoo.com";
            model.TelephoneNumber = i + i + i + i + i + i+"";
            list.Add(model);
        }


        return View(list);
    }
    public ActionResult Read()
    {
        List<CustomerModel> list = new List<CustomerModel>();
        for (int i = 0; i < 7; i++)
        {
            CustomerModel model = new CustomerModel();
            model.Id = 1;
            model.Name = "Alice";
            model.Address = "Blk " + i;
            model.PostalCode = "" + i + i + i;
            model.Email = i + "@yahoo.com";
            model.TelephoneNumber = i + i + i + i + i + i + "";
            list.Add(model);
        }


        return View(list);
    }

查看代码：

@using TKMVC.Models
@model IEnumerable<CustomerModel>


@(Html.Kendo().Grid<CustomerModel>()
    .Name("grid")
    .DataSource(dataSource => dataSource
        .Ajax()
        .ServerOperation(true)
        .Model(model =>
        {
            model.Id(p => p.Id);
            model.Field(p => p.Id).Editable(false);
        })
        .Read(read => read.Action("Read", "Home"))
    )
)
<div class="clearfix"></div>

Answer 1

您正在混合本地和Ajax数据绑定，并且尚未在网格中定义任何列。

[尝试将模型传递到网格中，定义网格列并从数据源中删除读取请求。根据您的情况，很可能您需要关闭服务器操作。

您的网格语句应如下所示：

@(Html.Kendo().Grid<CustomerModel>(Model)
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(m => m.Id);
        columns.Bound(m => m.Name);
    })
    .DataSource(dataSource => dataSource
        .Ajax()
        .ServerOperation(false)
        .Model(model =>
        {
            model.Id(p => p.Id);
            model.Field(p => p.Id).Editable(false);
        })
    )
)