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

【问题标题】：Kendo UI MVC - Grid Paging, Sorting, Refreshing not working with WebAPI bindingKendo UI MVC - 网格分页、排序、刷新不适用于 WebAPI 绑定
【发布时间】：2017-06-21 15:43:01
【问题描述】：

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

@(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，但之后网格为空。剑道生成的网址是：

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

当我用浏览器打开它时，它实际上会返回 JSON。

【问题讨论】：

您是否尝试过转换使用Json() 返回的数据？即return Json(_context.Accounts.ToDataSourceResult(request)); 并将您的控制器功能更改为public ActionResult Get([DataSourceRequest]DataSourceRequest request)..
@Sandman，结果相同
如果在对控制器进行上述更改的同时，将网格DataSource 修改如下。将WebApi() 替换为Ajax() 并设置.ServerOperation(false)。如果这仍然不能解决问题，请考虑使用从控制器方法返回的数据结构更新您的问题。

标签： c# asp.net-mvc asp.net-web-api kendo-ui kendo-asp.net-mvc

【解决方案1】：

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

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

查看这个演示示例以获取有关如何实现远程源数据绑定的参考：http://demos.telerik.com/aspnet-core/grid/remote-data-binding

示例视图：

示例控制器：

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

【讨论】：

本文档不完整...同样适用于 ASP.NET Core：demos.telerik.com/aspnet-core/grid/remote-data-binding
什么意思？您希望实现哪些不存在的内容？
您的回答是连贯的，我正在混合用于 Post、Put、Delete 操作的 WebAPI 绑定和用于不混合的 Get 操作的 Ajax 绑定
如果要覆盖网格的排序、过滤和分组功能，通常只需要在 kendo 中自定义 ajax 绑定。那是你想要做的吗？我从您的问题中收集到，您希望为这些功能使用内置网格功能，但数据未显示我误解了您的问题吗？
因为您使用两个数据数据源，您应该传递将通过参数填充网格的模型，在这种情况下，服务器操作应设置为 false，并且您不应该有读取操作，或者您将读取操作设置为您的数据源

【解决方案2】：

问题是这样的：当声明剑道网格并将模型作为参数传递时：

@(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() 方法也可以去掉。

【讨论】：