Json 结果无法绑定到 KendoUI 网格

Question

我无法在剑道网格中显示从控制器返回的数据作为 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

如果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) 以便将其提取到适合网格数据源的对象列表中。

Answer 2

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

您可以参考Ajax binding in the Telerik documentation here。

基本上，如果网格的填充是您在该视图上唯一需要 Ajax 的东西，那么您甚至不需要那个“使用”规范。相反，它会在网格配置中指定。同样，您也不需要 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()
   )

如果未显示任何结果，则在寻呼机中显示“没有要显示的记录”消息（这是设计使然）。

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