javascript - 使用 JSON 结果将 Model 类对象绑定(bind)到 Kendo Grid

Question

我需要将 Kendo 网格绑定(bind)到模型类。我使用 Json 结果从 Controller 返回相同的内容，但 gird 没有绑定(bind)。还可以找到下面使用的代码片段。

型号:

 public DataTable ErrorData { get; set; } 
 public List<string> Groups { get; set; }        
 public Dictionary<string, System.Type> ErrorColumns { get; set; }

Controller :

public JsonResult PopulateData()
{
  ErrorPage _objError = new ErrorPage();

  //Getting the details from Database
  _objError.ErrorData = dbl.GetDataTable(DbConnectionString,Table,whereCondition, columns);

  //Poplulating the Column list as it is dynamically generated every time     as per the filter on front end(View)
  //Column description: Name and Type    
  var columnlist = new Dictionary<string, System.Type>();
  foreach (System.Data.DataColumn column in _objError.ErrorData.Columns)
  {       
     var t = System.Type.GetType( column.DataType.FullName );
     columnlist.Add(column.ColumnName, t);  
  }

  _objError.ErrorColumns = columnlist;

  return Json(_objError);

}

查看:这是按钮点击时返回的代码

$.post(path, { application: app, columns: columns, machine: machine, pages: pages,
 startDate: startDate, endDate: endDate }, function (result) {

        var grid = $("#ErrorLog").data(result);
        grid.dataSource.read();
        grid.refresh();
});

这是 Kendo 网格代码，它在页面加载时也绑定(bind)到数据:

@(Html.Kendo().Grid<dynamic>()
              .Name("ErrorLog")
              .Columns(columns =>
              {
                  //Define the columns
                  foreach (var c in Model.ErrorColumns)
                      columns.Bound(c.Value, c.Key);
              })

              .DataSource(dataSource => dataSource
               .Ajax()
               .Model(model =>
               {
                   foreach (System.Data.DataColumn column in Model.ErrorData.Columns)
                   {
                       model.Field(column.ColumnName, column.DataType);
                   }
               })

               .Read(read => read.Action("populateData", "Common"))
             )

             .Groupable()
             .Sortable(s => s.AllowUnsort(true))
             .Filterable(ftb => ftb.Mode(GridFilterMode.Menu))
             .Pageable(pageable => pageable
                 .Refresh(true)
                 .PageSizes(true)
                 //.ButtonCount(5)
                 )
                )

列列表已正确填充。但我不确定将 JsonResult 返回到剑道网格。请帮助如何使用 Json 结果绑定(bind)剑道网格。

Answer 1

解决方法如下:

这是我的 Controller ，我在其中序列化了我们要发送给 View 的对象:

public JsonResult populateData(string application, string columns, string machine, string pages, string startDate, string endDate)
    {
        ErrorPage _objError = new ErrorPage();
        var ErrorResult = _objError.GetErrorData(application, columns, machine, pages, startDate, endDate);

        //Column description: Name and Type    
        var columnlist = new Dictionary<string, System.Type>();
        foreach (System.Data.DataColumn column in _objError.ErrorData.Columns)
        {
            var t = System.Type.GetType(column.DataType.FullName);
            columnlist.Add(column.ColumnName, t);
        }

        _objError.ErrorColumns = columnlist;

        var result = JsonConvert.SerializeObject(ErrorResult.ErrorData, Formatting.Indented,
                       new JsonSerializerSettings
                       {
                           ReferenceLoopHandling = ReferenceLoopHandling.Ignore
                       });

        return Json(result, JsonRequestBehavior.AllowGet);
    }

这是我的 View ，它将 Controller 发送的数据表绑定(bind)到 Kendo 网格:

$.ajax({
        type: "POST",
        url: '@Url.Content("~/Common/PopulateData")',
        contentType: "application/json;charset=utf-8",
        dataType: 'json',
        data: JSON.stringify({ application: app, columns: columns, machine: machine, pages: pages, startDate: startDate, endDate: endDate }),
        success: function (data) {

            $('#ErrorLog').data("kendoGrid").dataSource.data(JSON.parse(data));

        }

    });

谢谢