无法将JSON数据绑定到KendoUI Grid

时间:2013-03-25 13:56:16

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

在尝试使用来自控制器的Json数据绑定KendoUi Grid时,我遇到了一个问题。事情似乎很好,我的Json对象包含数据,但仍然没有显示网格:

我在Chrome JavaScript控制台中收到此错误:

GET http://localhost:8084/Records?take=5&skip=0&page=1&pageSize=5 500 (Internal Server Error) 

View

<div id="grid">
</div>
<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: "priority", title: "Priority" },
                        { field: "decision", title: "Decision" }
                    ],
                dataBound: function () {
                    this.expandRow(this.tbody.find("tr.k-master-row").first());
                }
            });
        });
    </script>

Controller

    public ActionResult GetRecords()
    {
       var obj = new User();
        var jsnRslt = obj.GetResult(Session["id"].ToString());
//return Json(jsnRslt);

        return Json(jsnRslt, JsonRequestBehavior.AllowGet); //Changed as suggested by Dismissile
    }

Model

public object GetResult(string usrId)
    {
…
….
…..            try
        {
            int i = 0;
            if (rcrds != null || rcrds.HasRows)
            {
                jsonWriter.WriteStartObject();
                while (rcrds.Read())
                {
                    for (int j = 0; j < rcrds.FieldCount; j++)
                    {
jsonWriter.WritePropertyName(rcrds.GetName(j));
jsonWriter.WriteValue(rcrds.GetValue(j));
                    }
                    i++;
                }
                jsonWriter.WriteEndObject();
            }

        }

        catch (Exception ex) { }
        return jsonWriter;
    }
}

请帮助。

5 个答案:

答案 0 :(得分:1)

您可能需要在JSON调用中使用此功能:

return Json(jsnRslt, JsonRequestBehavor.AllowGet);

看起来你正在进行GET调用,默认情况下,JSON调用不允许使用GET。

答案 1 :(得分:1)

尝试在dataSource中使用transport属性,如下所示:

 <script type="text/javascript">



    var dataSource = new kendo.data.DataSource({
        batch: true,
        schema: {
            model: {
                id: "EmployeeID",
                fields: {
                    EmployeeID: { editable: true, validation: { required: true } },
                    EmployeeName: { validation: { required: true } }

                }
            }
        },
        transport: {
            read: {
                url: "/Home/GetData",
                type: "GET"

            },
            update: {
                url: "/Home/Update",
                type: "POST",
                contentType: 'application/json'


            },
            destroy: {
                url: "/Home/Destroy",
                type: "POST",
                contentType: 'application/json'

            },


            create: {
                url: "/Home/Create",
                type: "POST",
                contentType: 'application/json'

            },


            pageSize: 1,





            parameterMap: function (options, operation) {
                if (operation !== "read" && options.models) {
                    return kendo.stringify(options.models) ;
                }
            }

        }




    });





    $(document).ready(function () {


        $("#grid").kendoGrid({
            dataSource: dataSource,
            navigatable: true,
            pageable: true,
            height: 430,
            sortable: true,
            toolbar: ["create", "save", "cancel"],
            columns: [

                { field: "EmployeeID", title: "Employee ID", width: 110 },
                { field: "EmployeeName", title: "Employee Name", width: 110 },

                { command: "destroy", title: "Delete", width: 90 }],
            editable: true,
            selectable: "multiple row",
            groupable: true,
            navigatable: true,
            filterable: true
        });
    });



</script>

控制器:

public class HomeController : Controller
{
    //
    // GET: /Home/

    public ActionResult Index()
    {
        var employee = new Employee().GetEmployeeList();

        return View(employee);
    }

    [AcceptVerbs(HttpVerbs.Get)]
    public JsonResult GetData()
    {
        var obj = new Employee();


        return Json(obj.GetEmployeeList(), JsonRequestBehavior.AllowGet);
    }

    [HttpPost]
    public JsonResult Update(List<Employee> model)
    {
        var obj = new Employee();

        //return View();
        return Json(obj);
    }

    [HttpPost]
    public JsonResult Create(List<Employee> model)
    {
        var obj = new Employee();

        return Json(obj);
    }

    public ActionResult Destroy(Employee model)
    {
        return View();
    }

}

从index方法返回一个html视图来保存网格&amp;

答案 2 :(得分:0)

我认为您还需要在Action Method Param中添加数据源请求

 public ActionResult GetResult([DatasourceRequest]request, string usrId)
 return Json(jsnRslt.ToDatasourceResult(request), JsonRequestBehavior.AllowGet);

每个剑道网格都需要这个

答案 3 :(得分:0)

试试这个

 transport: { read: { url: "Records", dataType: "jsonp"} }

尝试使用jsonp代替json

答案 4 :(得分:0)

您要返回ActionResult,而应该是JsonResult