Json 结果无法绑定到 KendoUI 网格

Question

我无法在 kendo 网格中显示我从控制器返回的数据作为 Json 结果。

    [HttpPost]
    public ActionResult PermitSearch(BptSearchViewModel viewModel)
    {
        var data = appService.SearchPermitInspection(viewModel);

        return Json(data);
    }

现在从我的角度来看，我正在使用 ajax

提交信息

  @using (Ajax.BeginForm("PermitSearch", "Home", null, new AjaxOptions
  {
        HttpMethod = "post",
        InsertionMode = InsertionMode.InsertAfter,
        UpdateTargetId = "search-results-grid",
        OnComplete = "OnCompleteMethod"
  }))
  {
           ....
  }

<div id="search-results-grid"></div>

下面是带有 OnCompleteMethod 的脚本

function OnCompleteMethod(dataq, status) {
    if (status === "success") {
        $("#search-results-grid").kendoGrid({
            columns: [
                {
                    field: "jobname",
                    title: "Job Type"
                },
            dataSource: {
                data: {
                    "items" : dataq
                },
                schema: {
                    data: "items"
                }
            },
            groupable: true,
            sortable: true,
            pageable: {
                refresh: true,
                pageSizes: true,
                buttonCount: 5
            },
            noRecords: {
                template: "No data available on current page. Current page is: #=this.dataSource.page()#"
            }
        });
    }
}

调用控制器后返回的数据如下所示

[
  {
    "jobname": "job1"
  },
  {
    "jobname": "job2"
  }
]

我看到的有效示例是在不带引号的情况下使用数组内对象的键，就像这样，但我找不到任何可以应用以传递 json 的转换以这种方式将数据添加到网格中。

 [
      {
        jobname: "job1"
      },
      {
        jobname: "job2"
      }
 ]

这里可以看到浏览器的响应

我在这里做错了什么？

Answer 1

我认为您应该尝试在剃刀代码中使用网格 htmlhelper 而不是 javascript 函数来构建网格。

可以参考Ajax binding in the Telerik documentation here.

基本上，如果网格的人口是您在该视图上唯一需要 Ajax 的东西，那么您甚至不需要 "using" 规范。相反，它会在网格配置中指定。同样，您也不需要 javascript 代码……视图剃刀中的网格可能如下所示：

@(Html.Kendo().Grid<BptSearch>()
     .Name("search-results-grid")
     .DataSource(dataSource => dataSource
          .Ajax()
          .Read(read => read.Action("PermitSearch", "[controller]"))
      )
      .Columns(columns =>
          {
              columns.Bound(job => job.jobID).Title("Job ID");
              columns.Bound(job => job.jobName).Title("Job Type");
          })
      .Pageable()
      .Sortable()
   )

如果没有显示任何结果，"No records to display" 消息会显示在寻呼机中（这是设计使然）。

如果您想用它做其他事情，这个 Grid FAQ 对您来说可能也是一个很好的参考。

Answer 2

如果 dataq 是 local data，它包含一个对象数组，其中包含网格中所需的所有项目，请尝试使用网格定义：

$("#search-results-grid").kendoGrid({
    columns: [{
        field: "jobname",
        title: "Job Type"
    }],
    dataSource: {
        data: JSON.parse(dataq),
        pageSize: 10               
    },
    groupable: true,
    sortable: true,
    pageable: {
        refresh: true,
        pageSizes: true,
        buttonCount: 5
    },
    noRecords: {
        template: "No data available on current page. Current page is: #=this.dataSource.page()#"
    }
});

编辑

根据 OP 进行了更新以包含 dataq 的定义，并添加了 pageSize 属性以防止网格分页中出现空值。

这个 Dojo 示例对我来说效果很好（您的问题中指定了两种格式）？

编辑 2 - 找到解决方案

继续我们的进一步讨论后，发现 dataq 包含来自控制器函数的全部响应。因此，您需要从 dataq 访问 responseText 并且因为它是 JSON 字符串，您需要执行 JSON.parse(dataq.responseText) 以便将其提取到合适的对象列表中对于网格的数据源。

Json 结果无法绑定到 KendoUI 网格

Json Result can't be binded to KendoUI grid

kendo-ui

kendo-grid

kendo-asp.net-mvc