使用 JSON 结果将模型 class 对象绑定到 Kendo 网格

Question

我需要将 Kendo 网格绑定到模型 class。我正在 return 使用 Json 结果从控制器获取相同的结果，但 gird 没有绑定。还可以找到下面使用的代码片段。

型号：

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

控制器：

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);

}

查看：这是单击按钮时的代码 return

$.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 网格代码，它也会在页面加载时绑定到数据：

@(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)
                 )
                )

列列表已正确填充。但我不确定 return 将 Json 结果转换为 kendo 网格。请帮助如何使用 Json 结果绑定 kendo 网格。

Answer 1

下面是解决方案：

这是我的控制器，我在其中序列化了我们要发送给 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);
    }

这是我的视图，它将控制器发送的数据表绑定到 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));

        }

    });

谢谢

使用 JSON 结果将模型 class 对象绑定到 Kendo 网格

Binding a Model class object to Kendo Grid using JSON result

javascript

asp.net-mvc

kendo-ui

kendo-grid

kendo-asp.net-mvc