Kendo UI Grid 不显示 JSON 数据

Question

我现在面临这个问题很长一段时间了，我无法绑定我的控制器操作传递给剑道 UI Grid 的 JSON 数据，之前几乎没有 JavaScript 问题，但现在它们已经消失了，但仍然是我的网格未显示任何结果：

在Model:

public object GetResult(string id)
    {
        var sqlCom = new SqlCommand("SELECT [No],[Desc],[Date],[Height],[Final] FROM [cr_form] WHERE [uId]=@id;", sqlConn);
        sqlCom.Parameters.AddWithValue("@id", id);

        StringBuilder sb = new StringBuilder();
        StringWriter sw = new StringWriter(sb);
        JsonWriter jsonWriter = new JsonTextWriter(sw);
        var rcrds = GETSQLRESULTS(sqlCom);

        try
        {
            int i = 0;
            if (rcrds != null || rcrds.HasRows)
            {
                //jsonWriter.WriteStartObject();
                while (rcrds.Read())
                {
                    jsonWriter.WriteStartObject(); //Changed
                    for (int j = 0; j < rcrds.FieldCount; j++)
                    {
                        jsonWriter.WritePropertyName(rcrds.GetName(j)); // column name
                        jsonWriter.WriteValue(rcrds.GetValue(j)); // value in column
                    }
                    i++;
                    jsonWriter.WriteEndObject(); //Changed
                }
                //jsonWriter.WriteEndObject();

            }

        }

        catch (Exception ex) { }
        return jsonWriter;
    }

在Controller:

    public ActionResult GetRecords()
    {
        var usrObj = new User();
        var jsnRslt = usrObj.GetResult(Session["Id"].ToString());
    //Till here jsnRslt contains this string: “{"No":null,"Desc":"asfasfasfasfasfasfasfasfasfasfasfasf","Date":"2013-03-27T00:00:00","Height":0,"Final":null,"No":null,"Desc":"etwetwetwetwet","Date":"2013-03-27T00:00:00","Height":0,"Final":0,"No":null,"Desc":"asfasfasfskfjklajsfkjasklfjklasjfklajsfkljaklsfjklasjfkljasfkljlasf","Date":"2013-03-27T00:00:00","Height":0,"Final":0,"No":null,"Desc":"askjfkajsfklaskjfkajsfklaskjfkajsfklaskjfkajsfklaskjfkajsfklaskjfkajsfklaskjfkajsfklaskjfkajsfklaskjfkajsfklaskjfkajsfklaskjfkajsfklaskjfkajsfkl","Date":"2013-03-27T00:00:00","Height":0,"Final":0,"No":null,"Desc":"safasfasfasfasfasf","Date":"2013-03-27T00:00:00","Height":0,"Final":0,"No":null,"Desc":"asfasf","Date":"2013-03-27T00:00:00","Height":0,"Final":0,"No":null,"Desc":"asfasfasf","Date":"2013-03-27T00:00:00","Height":2,"Final":0}”

    //After Changes in the Model I am getting it in the required Array format:
    //{"No":null,"Desc":"asfasfasfasfasfasfasfasfasfasfasfasf","Date":"2013-03-27T00:00:00","Height":0,"Final":null}
    //{"No":null,"Desc":"etwetwetwetwet","Date":"2013-03-27T00:00:00","Height":0,"Final":0}
    //{"No":null,"Des...

        return Json(jsnRslt, JsonRequestBehavior.AllowGet);            
    }

在View:

<div>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#grid").kendoGrid({
                dataSource: {
                    type: "json",
                    serverPaging: true,
                    pageSize: 5,
                    groupable: true,
                    selectable: "row",
                    transport: { read: { url: "Records", dataType: "json"} }
                },
                height: 400,
                scrollable: true,
                sortable: true,
                filterable: true,
                pageable: true,
                columns: [
                        { field: "No", title: " No" },
                        { field: "Desc", title: "Description" },
                        { field: "Date", title: "Date" },
                        { field: "Height", title: "Height" },
                        { field: "Final", title: "Final" }
                    ],
                dataBound: function () {
                    this.expandRow(this.tbody.find("tr.k-master-row").first());
                }
            });
        });
    </script>
</div>

但毕竟我能看到的只是一个空网格。并且 JavaScript 控制台中没有错误。

请帮忙

Answer 1

您从服务器返回的 JSON 应该是数组。您目前似乎正在返回具有多个相同字段的单个对象。

以下是 JSON 的示例：

[{"No":null,"Desc":"asfasfasfasfasfasfasfasfasfasfasfasf","Date":"2013-03-27T00:00:00","Height":0,"Final":null},
{"No":null,"Desc":"etwetwetwetwet","Date":"2013-03-27T00:00:00","Height":0,"Final":0},
{"No":null,"Desc":"asfasfasfskfjklajsfkjasklfjklasjfklajsfkljaklsfjklasjfkljasfkljlasf","Date":"2013-03-27T00:00:00","Height":0,"Final":0}]

Answer 2

我认为以下代码对您有用，如果您有任何问题，请告诉我：

    $('#gridName').kendoGrid({
        dataSource: {
            type: "odata",
            transport: {
                read: {
                    contentType: "application/json; charset=utf-8",
                    type: "POST",
                    url: 'YourURL'
                }
            },
            pageSize: 10,
            type: "json"
        },
        scrollable: true,
        sortable: true,
        resizable: true

});

Answer 3

在你里面dataSource设置数据。

 data: @Html.Raw(Json.Encode(Model.RemoteObject)),

RemoteObject 是包含所有数据的对象。

Answer 4

首先我检查您的传输读取 URL。如果它触发了GetRecords 命令，你跟踪控制器吗？

transport: 
{ 
  read: {
    //if you don't use area then remove it
    url: "@Url.Action("GetRecords", new { area = "YourAreaName", controller = "YourControllerName" })",
    dataType: "json"
  }
}

如果仍然不能解决你的问题，那么修改你的控制器，

public ActionResult GetRecords([DataSourceRequest] DataSourceRequest request)
{
    var usrObj = new User();
    var jsnRslt = usrObj.GetResult(Session["Id"].ToString());
    return Json(jsnRslt.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);            
}

here's the link to understand the Kendo's ToDataSourceResult