Позвоните по WebMethod из jqGrid

Question

Я изучаю jqGrid и после this link. Однако демо построено в Asp.Net MVC, и я пытаюсь использовать его, используя Asp.Net WebForms. Мой отладчик не ступая в WebMethod

Вот мой код

$("#tblDemo").jqGrid(
      { 
       url: 'Default.aspx/GetGridData', 
       datatype: "json", 
       mtype: 'GET', 
       colNames: ['Id', 'First Name', 'Last Name'], 
       colModel: [ 
       { name: 'Id', index: 'EmloyeeId', width: 20, stype: 'text' }, 
       { name: 'FirstName', index: 'FirstName', width: 150 }, 
       { name: 'LastName', index: 'LastName', width: 150 }] 
       , rowNum: 10, 
       sortname: 'Id', 
       viewrecords: true, 
       sortorder: "desc", 
       caption: "List Employee Details", 
       scrollOffset: 0 
      }); 

Проблема не кажется, с WebMethod, потому что она вызывается, если я использую $.ajax (только для проверки WebMethod). Еще посмотрите на WebMethod.

Вот файлы, на которые я ссылался.

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
    <link href="js/css/ui.jqgrid.css" rel="stylesheet" /> 
    <script src="js/js/jquery.jqGrid.min.js"></script> 
    <script src="js/js/i18n/grid.locale-en.js"></script> 
    <link href="http://code.jquery.com/ui/jquery-ui-git.css" /> 
    <script src="js/js/jquery.json.min.js"></script> 

На консоли нет ошибок. Пожалуйста, помогите мне разобраться в этом.

Update 1

Изменено мой jqGrid код, как предложено. Теперь посмотрим, как этот

$("#tblDemo").jqGrid(
      { 
       url: '/Default.aspx/GetGridData', 
       datatype: "json", 
       mtype: 'GET', 
       colNames: ['Id', 'First Name', 'Last Name'], 
       loadonce : true, 
       colModel: [ 
       { name: 'Id', width: 20, stype: 'text' }, 
       { name: 'FirstName', width: 150 }, 
       { name: 'LastName', width: 150 }] 
       , rowNum: 10, 

       sortname: 'Id', 
       viewrecords: true, 
       sortorder: "desc", 
       caption: "List Employee Details", 
       scrollOffset: 0, 
       gridview: true, 
       autoencode: true, 
       ajaxGridOptions: { contentType: "application/json" }, 
       serializeGridData: function (postData) { 
        return JSON.stringify(postData); 
       }, 
       jsonReader: { 
        root: "d.rows", 
        page: "d.page", 
        total: "d.total", 
        records: "d.records" 
       } 
      }); 

Я не включал определение GetData, потому что это не является причиной проблемы, как отладчик даже не попав первую строчку моего WebMethod. В основном это получение данных из базы данных в DataTable

[WebMethod] 
     //[ScriptMethod(ResponseFormat = ResponseFormat.Json)] 
     public static string GetGridData() 
     { 
      return JsonConvert.SerializeObject(GetData()); 
     } 

     public static DataTable GetData() 
     { 
      string conStr = System.Configuration.ConfigurationManager.ConnectionStrings["dbConString"].ToString(); 

      DataTable dt = new DataTable(); 

      using (var con = new SqlConnection(conStr)) 
      { 
       using (var cmd = new SqlCommand("Select * From MyTest",con)) 
       { 
        SqlDataAdapter da = new SqlDataAdapter(cmd); 
        da.Fill(dt); 
       } 
      } 
      return dt; 
     } 

Update 2

По предложению Олега, я изменил мой код, как показано ниже

[WebMethod] 
     //[ScriptMethod(ResponseFormat = ResponseFormat.Json)] 
     public static string GetGridData() 
     { 
      return JsonConvert.SerializeObject(GetData()); 
     } 

     public static DataTable GetData() 
     { 
      string conStr = System.Configuration.ConfigurationManager.ConnectionStrings["dbConString"].ToString(); 

      DataTable dt = new DataTable(); 

      using (var con = new SqlConnection(conStr)) 
      { 
       using (var cmd = new SqlCommand("Select * From MyTest",con)) 
       { 
        SqlDataAdapter da = new SqlDataAdapter(cmd); 
        da.Fill(dt); 
       } 
      } 
      return dt; 
     } 



$("#tblDemo").jqGrid(
      { 
       url: '/Default.aspx/GetGridData', 
       datatype: "json", 
       mtype: 'GET', 
       colNames: ['Id', 'First Name', 'Last Name'], 
       loadonce : true, 
       colModel: [ 
       { name: 'Id', key: true, width: 20, stype: 'text' }, 
       { name: 'FirstName', width: 150 }, 
       { name: 'LastName', width: 150 }] 
       , rowNum: 10, 

       sortname: 'Id', 
       viewrecords: true, 
       sortorder: "desc", 
       caption: "List Employee Details", 
       scrollOffset: 0, 
       gridview: true, 
       postData: "{}", 
       autoencode: true, 
       loadError : function(xhr,st,err) { 
        alert("Type: "+st+"; Response: "+ xhr.status + " "+xhr.statusText); 
       }, 
       ajaxGridOptions: { contentType: "application/json" }, 
       serializeGridData: function (postData) { 
        return JSON.stringify(postData); 
       }, 
       jsonReader: { 
        repeatitems: false, 
        root: function (obj) { 
         return typeof obj.d === "string" ? $.parseJSON(obj.d) : obj.d; 
        } 
       } 
      }); 

Update 3

Добавлен снимок экрана о том, как демонстрация тела ответа

Answer 1

Вы не разместили код на стороне сервера или, по крайней мере, определение GetGridData. Кроме того, вы всегда должны включать информацию о версии jqGrid, которую вы используете.

Я полагаю, что вы используете ASMX-WebMethod. В случае, если вы должны включать в себя следующие параметры

gridview: true, 
autoencode: true, 
ajaxGridOptions: { contentType: "application/json"}, 
serializeGridData: function (postData) { 
    return JSON.stringify(postData); 
}, 
jsonReader: { 
    root: "d.rows", 
    page: "d.page", 
    total: "d.total", 
    records: "d.records" 
} 

Кроме того, вы должны удалить все index свойства colModel и рассмотреть возможность использования loadonce: true вариант, если вы не планируете реализовать на стороне сервера подкачки.

Если у вас возникли проблемы с загрузкой данных в jqGrid, вы всегда должны включать обратный вызов loadError в jqGrid. См. the answer для более подробной информации.