Невозможно связать данные JSON с сеткой KendoUI

Question

У меня возникает определенная проблема при попытке привязать сетку KendoUi с данными Json от контроллера. Вещи кажутся прекрасными и мой объект Json содержит данные, но по-прежнему сетка не отображается какой-либо вещь:

И я получаю эту ошибку в хроме 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; 
    } 
} 

Любезно помощь.

Answer 1

Вы, вероятно, нужно это в JSON вызова:

return Json(jsnRslt, JsonRequestBehavor.AllowGet); 

Похоже, что вы делаете GET вызов, и по умолчанию GET не допускается на JSON вызова.

Answer 2

Я думаю, вы также должны добавить запрос источника данных в вашем ActionMethod Парм

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

Каждый kendogrid нуждается в этом

Answer 3

Попробуйте использовать атрибут транспорта в пределах 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(); 
    } 

} 

Возврат вид HTML из индексного метода для удержания сетки &

Answer 4

Попробуйте

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

попробовать с jsonp вместо json.

Answer 5

Вы возвращаете ActionResult, вместо этого оно должно быть JsonResult.