Json结果不能绑定到KendoUI网格

我无法在kendo网格中显示我从Controller作为Json结果返回的数据。Json结果不能绑定到KendoUI网格

[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()#" 
      } 
     }); 
    } 
}

，而且我上回看起来像这样的数据我给控制器打电话后

我已经看到这个作品的例子是使用数组内部的对象的键而不用引号，就像这样，但是我找不到任何可以应用的转换来将json数据传递给网格。

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

您可以在这里看到

浏览器的，我做错了什么在这里的响应？

来源

2017-05-16 Heinrich

当进入OnCompleteMethod函数时'dataq'和'status'包含什么？ – Sandman

您已经将模式定义为在名为“items”的属性中查找数据，但我没有看到它作为JSON示例中的属性，请尝试返回名为“items”的数组并且它应该绑定。 –

@StephenByrne @StephenByrne我试过你的方法，但仍然不起作用，如果我直接复制并粘贴我在响应中看到的数据作为脚本的一部分，我可以看到它上面的元素，但作为参数传递函数似乎与我更新了我的问题不同的格式，但奇怪的是，即使在脚本内粘贴带有双引号的代码似乎也能工作，对此有任何帮助？ – Heinrich

如果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()#" 
    } 
});

EDIT

更新以包括的dataq定义如每OP和添加一个pageSize属性，以防止网格分页中的空值。

This Dojo例子对我来说很好（在你的问题中指定了两种格式）？

EDIT 2 - 溶液中发现

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

来源

2017-05-17 08:30:27 Sandman

它没有工作，如果我只是把数据作为它呈现正确的脚本的一部分，但如果我将它作为参数传递，则不，控制台显示此错误“e.slice不是函数” – Heinrich

那么您的数据不会以您在问题中发布的相同格式传递给该函数。使用控制台查看执行'OnCompleteMethod'时编辑你的问题的'dataq'。 – Sandman

我刚刚更新了问题 – Heinrich

我想你应该尝试通过在剃刀代码中使用网格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可能是一个很好的参考资料，如果你还想做其他事情。

来源

2017-05-16 19:55:37 Andarta

其实我试图不使用剑道助手，你知道它是什么导致我的错误在JavaScript？ – Heinrich

看起来像你的JavaScript你需要删除“[”后“列：”，并在“dataSource”之前关闭“}”后添加逗号。如果这不适合你，那么我不确定。为什么不使用html助手？ – Andarta

我通常会发现，通过使用Javascript而不是帮助者，您可以更好地控制Kendo控件的所有方面。这只是我的看法。 – Sandman

Json结果不能绑定到KendoUI网格

回答

相关问题