无法将 JSON 数据绑定到 KendoUI Grid

Posted 2023-05-07

【中文标题】无法将 JSON 数据绑定到 KendoUI Grid

【英文标题】：Unable to bind JSON data to KendoUI Grid

【发布时间】：2013-03-15 01:11:09

【问题描述】：

我在尝试将 KendoUi Grid 与来自控制器的 Json 数据绑定时遇到了某个问题。事情似乎很好，我的 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;
    

请帮忙。

【问题讨论】：

Internal Server Error 表示在服务器上执行期间出现问题。您是否使用断点调试过您的应用程序？

也许我错了，但您正在发布到您的服务器，但是您的操作在哪里可以接受您的参数？

是的，直到Controller return Json(jsnRslt); 中的这一行一切都很好.. JSON 对象具有所需的数据和所有内容。

我需要指定参数吗？ .. 目前 JSON 正在调用该操作，并且在无效参数等上没有引发此类异常。

您的控制器返回的结果是什么？也许是内部服务器错误？为什么你要捕获异常而不做任何事情？

【参考方案1】：

您可能在 JSON 调用中需要这个：

return Json(jsnRslt, JsonRequestBehavor.AllowGet);

看起来您正在执行 GET 调用，默认情况下，JSON 调用中不允许使用 GET。

【讨论】：

完成，但仍然没有改进。

【参考方案2】：

尝试使用 dataSource 中的传输属性，如下所示：

 <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 视图来保存网格 &

【参考方案3】：

我认为您还需要在 ActionMethod Parm 中添加数据源请求

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

每个 kendogrid 都需要这个

【参考方案4】：

试试这个

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

尝试使用jsonp 而不是json。

【参考方案5】：

您返回的是ActionResult，它应该是JsonResult。