jgGrid не заполняется вызовом службы WCF Rest

Question

Я новичок в jQuery и jqGrid. Я написал следующий код для вызова службы WCF RESTful и заполнения jqGrid. Хотя вызов службы WCF RESTful возвращает json-выход, jqGrid по какой-то причине не может интерпретировать этот вывод.

IService Интерфейс:

[ServiceContract] 
    public interface IService 
    { 
     [OperationContract] 
     [WebInvoke(UriTemplate = "/Employees", RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json, Method = "GET")] 
     List<Employee> GetCollection(); 
    } 

    [DataContract(Namespace="")] 
    public class Employee 
    { 
     [DataMember(IsRequired = true, Name = "empId", Order = 1)] 
     public string EmpId { get; set; } 
     [DataMember(IsRequired = false, Name = "empName", Order = 2)] 
     public string EmpName { get; set; } 
     [DataMember(IsRequired = false, Name = "dob", Order = 3)] 
     public DateTime DOB { get; set; } 
     [DataMember(IsRequired = false, Name = "department", Order = 4)] 
     public string Department { get; set; } 

    } 

Услуги по внедрению:

public List<Employee> GetCollection() 
    {   
     List<Employee> empList = new List<Employee>(); 
     Employee emp = new Employee(); 
     emp.EmpId = "1"; 
     emp.DOB = Convert.ToDateTime("21/03/1979"); 
     emp.EmpName = "Haris"; 
     emp.Department = "HR"; 
     empList.Add(emp); 

     return empList;    

    } 

JQuery сценария:

jQuery(document).ready(function() {   
     $("#jQGrid").html("<table id=\"list\"></table><div id=\"page\"></div>"); 
      jQuery("#list").jqGrid({ 
      url:'http://localhost:9002/SampleServices/Service/REST/Employees', 
      //datastr: mystr, 
      data: "{}", // For empty input data use "{}", 
      dataType: "json", 
      type: "GET", 
      contentType: "application/json; charset=utf-8", 
      colNames: ['Emp Id.', 'Emp Name', 'DOB', 'Department'], 
      colModel: [{ name: 'empId', index: 'empId', width: 90, sortable: true }, 
      { name: 'empName', index: 'empName', width: 130, sortable: false }, 
      { name: 'dob', index: 'dob', width: 100, sortable: false }, 
      { name: 'department', index: 'department', width: 180, sortable: false } 
      ], 
      multiselect: false, 
      paging: true, 
      rowNum: 1, 
      rowList: [1, 5, 10], 
      pager: $("#page"), 
      loadonce: true, 
      caption: "Employee Details", 
      success: successFunction 
      }).navGrid('#page', { edit: false, add: false, del: false } 
     ); 
    }); 

Призыв к «HTTP: // локальный: 9002/SampleServices/Услуги/REST/Employees " возвращает следующее: [{"empId": "1", "empName": "Haris", "dob": "/ Date (290851200000-0700) /", "department": "HR"}]

Разработчики могли бы вы пожалуйста, помогите мне с этим?

Answer 1

В вашем текущем коде имеется множество ошибок. Самая важная ошибка - использование имен воображения jqGrid. Вы должны изучить the documentation и использовать параметры и callbacks, которые действительно поддерживаются. Несколько примеров: вы используете в настоящее время data, dataType, type и contentType варианты существуют в jQuery.ajax. Соответствующие параметры jqGrid должны быть postData, datatype, mtype и ajaxGridOptions: { contentType: "application/json"}. Вы должны дополнительно использовать serializeGridData: function (postData) { return JSON.stringify(postData); }. См. the answer для более подробной информации.

Для того, чтобы читать дату в формате "/Date(290851200000-0700)/", вам необходимо использовать formatter: "date". Самое важное, что вам нужно включить в jqGrid, - это jsonReader, который соответствует используемым вами данным.

Таким образом, соответствующий код должен быть примерно следующее:

$(function() { 
    'use strict'; 
    $("#jQGrid").html("<table id=\"list\"></table><div id=\"page\"></div>"); 
    $("#list").jqGrid({ 
     url: "HarisFarooqui.json", 
     datatype: "json", 
     height: "auto", 
     jsonReader: { 
      root: function (obj) { 
       return obj; 
      }, 
      repeatitems: false 
     }, 
     serializeGridData: function (postData) { 
      return JSON.stringify(postData); 
     }, 
     colNames: ['Emp Id.', 'Emp Name', 'DOB', 'Department'], 
     colModel: [ 
      { name: 'empId', width: 90, sortable: true, sorttype: "int" }, 
      { name: 'empName', width: 130, sortable: false }, 
      { name: 'dob', width: 100, formatter: "date", sortable: false }, 
      { name: 'department', width: 180, sortable: false } 
     ], 
     rowNum: 10, 
     rowList: [10, 30, 1000], 
     loadonce: true, 
     rownumbers: true, 
     gridview: true, 
     pager: "#page", 
     caption: "Employee Details" 
    }); 
}); 

см the demo