Kendo UI Grid不显示JSON数据

时间:2013-03-28 05:51:52

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

我现在面临这个问题很长一段时间我遇到的问题是我无法绑定我的控制器操作传递给kendo 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控制台中没有错误。

请帮忙

4 个答案:

答案 0 :(得分:2)

从服务器返回的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}]

答案 1 :(得分:0)

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

    $('#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

});

答案 2 :(得分:0)

在您的dataSource集数据中。

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

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

答案 3 :(得分:0)

首先,我检查您的传输读取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