如何将模型用作 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);
        })
    )
)