Kendo UI MVC - 网格分页、排序、刷新不适用于 WebAPI 绑定

Question

当我将数据源设置为 WebAPI 绑定时，正在控制器上调用 HTTP GET，它 returns 是正确的数据。问题是我的 Kendo 网格没有正确绑定数据，结果我得到一个空网格。

@(Html.Kendo().Grid(Model)
        .Name("Accounts")
        .Columns(columns =>
        {
          columns.Bound(c => c.Description).Title("Account Name");
          columns.ForeignKey(c => c.Type, (System.Collections.IEnumerable)ViewData["accountTypes"], "Id", "Name").Title("Account Type");
          columns.ForeignKey(c => c.Currency, (System.Collections.IEnumerable)ViewData["currencyTypes"], "Id", "Name").Title("Account Currency");
          columns.Command(command => { command.Edit(); command.Destroy(); }).Width(210);
        })
        .Sortable(sortable =>
        {
          sortable.SortMode(GridSortMode.SingleColumn);
          sortable.AllowUnsort(false);
        })
        .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(true)
            .ButtonCount(5)
        )
        .ToolBar(toolbar => { toolbar.Create(); })
        .Editable(editable => editable.Mode(GridEditMode.InLine))
        .DataSource(dataSource => dataSource
          .WebApi()
          .Model(model =>
          {
            model.Id(p => p.Id);
            model.Field(p => p.Currency).DefaultValue(0).Editable(true);
            model.Field(p => p.Description).Editable(true);
            model.Field(p => p.Type).Editable(true);
          })
          .ServerOperation(true)
          .Read(read => read.Action("Get", "Accounts"))
          .Create(create => create.Action("Post", "Accounts"))
          .Update(update => update.Action("Put", "Accounts", new { id = "{0}" }))
          .Destroy(destroy => destroy.Action("Delete", "Accounts", new { id = "{0}" }))
        .PageSize(10)
    )
)

控制器

// GET: api/values
        [HttpGet]
        public DataSourceResult Get([DataSourceRequest]DataSourceRequest request)
        {
            return _context.Accounts.ToDataSourceResult(request);
        }

我总是收到分页或排序命令的 HTTP 200 OK，但此后网格为空。 Kendo生成的URL为：

http://localhost:58829/Accounts/Get?sort=&page=1&pageSize=10&group=&filter=

实际上 returns JSON 当我用浏览器打开它时。

Answer 1

问题似乎是您混合了两种不同的方式来加载数据。一方面，您通过参数将模型传递给网格（当 ServerOperation = false 时使用此方法），另一方面，您正在设置 ServerOperation = true 并指定读取操作。

在这种情况下网格为空的原因可能是因为模型为空。

查看此演示示例，了解如何实现远程源数据绑定：http://demos.telerik.com/aspnet-core/grid/remote-data-binding

示例视图：

示例控制器：

希望这对您有所帮助 KendoGrid 是一个很棒的库，但与许多其他库一样，它肯定可以使用更好的异常处理和更用户友好的异常 :) 在我看来，在这种情况下网格应该显示异常。

Answer 2

问题是这样的：当声明 Kendo 网格并将模型作为参数传递时，如下所示：

@(Html.Kendo().Grid(Model)

您需要删除 .Read() 操作，并确保使用 .ServerOperation(false)。这适用于 WebApi 绑定或 Ajax 绑定：

.DataSource(dataSource => dataSource
      .WebApi()    // also works with .Ajax()
        .Model(model =>
        {
          model.Id(p => p.Id);
        }
      )
      .ServerOperation(false)
      .Create(create => create.Action("Post", "Invoices"))
      .Update(update => update.Action("Put", "Invoices", new { id = "{0}" }))
      .Destroy(destroy => destroy.Action("Delete", "Invoices", new { id = "{0}" }))
      .PageSize(10)
)

此外，DataSourceResult Get() 方法可以删除。

Kendo UI MVC - 网格分页、排序、刷新不适用于 WebAPI 绑定

Kendo UI MVC - Grid Paging, Sorting, Refreshing not working with WebAPI binding

c#

asp.net-mvc

kendo-ui

asp.net-web-api

kendo-asp.net-mvc