Kendo UI Grid 不显示 JSON 数据 [英] Kendo UI Grid not showing JSON data

问题描述

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

在模型中:

公共对象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);尝试{int i = 0;if (rcrds != null || rcrds.HasRows){//jsonWriter.WriteStartObject();而 (rcrds.Read()){jsonWriter.WriteStartObject();//改变了for (int j = 0; j 

在Controller中:

 public ActionResult GetRecords(){var usrObj = 新用户()；var jsnRslt = usrObj.GetResult(Session["Id"].ToString());//直到这里jsnRslt包含这​​个字符串:{"No":null,"Desc":"asfasfasfasfasfasfasfasfasfasfasf","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说明": asfasfasfskfjklajsfkjasklfjklasjfklajsfkljaklsfjklasjfkljasfkljlasf"， 日期": 2013-03-27T00:00:00"， 身高":0， 最终":0， 否":空， 说明": 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,"决赛":0}"//在模型更改后，我以所需的数组格式获取它://{"No":null,"Desc":"asfasfasfasfasfasfasfasfasfasfasf","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...返回 Json(jsnRslt, JsonRequestBehavior.AllowGet);}

在View中:

<script type="text/javascript">$(document).ready(function () {$("#grid").kendoGrid({数据源: {类型:json"，服务器分页:真，页面大小:5，可分组:真实，可选:行"，传输:{读取:{网址:记录"，数据类型:json"}}},高度:400，可滚动:真实，可排序:真实，可过滤:真实，可分页:真实，列: [{字段:否"，标题:否"}，{字段:描述"，标题:描述"}，{字段:日期"，标题:日期"}，{字段:高度"，标题:高度"}，{ 字段:最终"，标题:最终"}],数据绑定:函数(){this.expandRow(this.tbody.find("tr.k-master-row").first());}});});

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

请帮忙

解决方案

你从服务器返回的 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"

I am facing this problem for quite a while now with the problem that I am unable to bind JSON data that my controller action is passing to the kendo UI Grid, there were few JavaScript issues before but now they are gone but still my grid is not showing any results:

In 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;
    }

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

In 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>

But after all this all I can see is an empty grid. And no errors in JavaScript console.

Please help

解决方案

The JSON that you return from the server should be array. You currently it seems that you are returning single objects with multiple fields that are the same.

Here is an example how the JSON should look like:

[{"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}]

这篇关于Kendo UI Grid 不显示 JSON 数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！