Question

我无法在kendo网格中显示我作为Json Result从Controller返回的数据。

    [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

我认为您应该尝试使用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也可能是一个很好的参考，如果还有其他你想做的事情。

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包含来自控制器功能的整个响应。因此，您需要从responseText访问dataq，因为它是JSON字符串，您需要执行JSON.parse(dataq.responseText)才能将其提取到适合的对象列表中对于网格的数据源。

Json结果无法绑定到KendoUI网格

2 个答案: