使用JSON结果将Model类对象绑定到Kendo Grid

时间:2015-06-17 13:27:39

标签: javascript asp.net-mvc kendo-ui kendo-grid kendo-asp.net-mvc

我需要将Kendo网格绑定到模型类。我使用Json结果从控制器返回相同的但是网格没有得到绑定。另请参阅下面的代码片段。

型号:

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

}

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

$.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)
                 )
                )

列列表已正确填充。但我不确定将JsonResult归还给剑道网格。请帮助我们了解如何使用Json结果绑定kendo网格。

1 个答案:

答案 0 :(得分: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));

        }

    });

由于