pourquoi mon jqGrid est vide eventhough json data est présent

Question

Voici mon jqGrid, qui n'affiche aucune donnée.

Je reçois la réponse JSON pour la grille, mais il n'affiche pas.

Voici ce que j'ai fait jusqu'ici.

<script type="text/javascript"> 
     $.jgrid.no_legacy_api = true; 

     function getCompanyData() { 
     //debugger; 
      $.ajax({ 
       url: "jqGrid_pureJS.aspx/GetCompanyList", 
       data: "{}", // "{}" For empty input data use "{}", 
       dataType: "json", 
       type: "POST", 
       contentType: "application/json; charset=utf-8", 
       success: function (result) { 
        //debugger; 
        var grdData = $("#jqGrid")[0]; 
        grdData.addJSONData(result.d); 
       }, 
       error: function (result) { 
        //debugger; 
       } 
      }); 
     } 
     $(function() { 
      $("#jqGrid").jqGrid({ 
       datatype: getCompanyData, 
       colNames: ['Id', 'Name', 'Address', 'City', 'Phone'], 
       colModel: [ 
          { name: 'F1', index: 'invid', width: 55 }, 
          { name: 'F2', index: 'invdate', width: 90,editable:true }, 
          { name: 'F3', index: 'amount', width: 80,editable:true, align: 'right' }, 
          { name: 'F4', index: 'tax', width: 80,editable:true, align: 'right' }, 
          { name: 'F5', index: 'total', width: 80,editable:true, align: 'right' } 
       ], 
       pager: $("#pager"), 
       rowNum: 10, 
       rowList: [10, 20, 30], 
       viewrecords: true, 
       caption: 'My first grid', 
       width:800 

      }).navGrid('#pager', { edit:true,view: true, del: false }); 
     }); 

    </script> 

Et voici ma webmethod qui publie des données.

 [WebMethod] 
     [ScriptMethod(ResponseFormat=ResponseFormat.Json,UseHttpGet=false)] 
     public static string GetCompanyList() 
     { 

      var data = GetAllData(); 
      try 
      { 
       string response = JsonConvert.SerializeObject(data, Formatting.Indented); 
       return response; 
      } 
      catch (Exception ex) 
      { 
       return ex.Message; 
      } 
     } 

Et voici mon JSON responce capturé:

{"d":" 
    [\r\n 
     {\r\n  
     \"F1\": 1.0,\r\n  
     \"F2\": \"Name\",\r\n  
     \"F3\": \"Address\",\r\n  
     \"F4\": \"City\",\r\n  
     \"F5\": \"Phone\"\r\n 
     }, 
     \r\n 
     {\r\n  
     \"F1\": 10.0,\r\n  
     \"F2\": \"abc\",\r\n  
     \"F3\": \"def\",\r\n  
     \"F4\": \"asd\",\r\n  
     \"F5\": \"998907\"\r\n 
     } 
    ] 
} 

je pouvais voir la même question jqgrid not showing data, je l'ai vérifié et je ne me débarrasser de mon problème si

Pourquoi les données json ne sont pas ajoutées? Comment fait-on ça ?

Modifier

dans le cadre de la réponse, je l'ai enlevé mon javascript pour appeler le jqGrid et remplacé le code comme affiché dans la réponse par oleg.

J'ai aussi apporté quelques modifications au code côté serveur.

Voici ce que le code côté serveur est:

 [WebMethod] 
     [ScriptMethod(UseHttpGet = false)] 
     public static string GetCompanyList() 
     { 
      var data = GetAllData(); 

      //string response = JsonConvert.SerializeObject(data, Formatting.Indented); 
      return data; 

     } 

     public static string GetAllData() 
     { 
      try 
      { 
       //Grab the connection string defined in web.config 
       var connectionString = ConfigurationManager.ConnectionStrings["Test_3ConnectionString"].ConnectionString; 

       DataTable dt = null; 

       //Command Text 
       string commandText = "SELECT * FROM EmpDetails"; 

       dt = SQLHelper.ExecuteDataTable(connectionString, CommandType.Text, commandText, "EmpDetails"); 

       string result = JsonConvert.SerializeObject(dt); 

       return result; 
      } 
      catch (Exception ex) 
      { 
       throw; 
      } 

     } 

Les choses vont heure par heure bizarre. Quand je cours mon application j'ai la grille suivante.

Je ne 9 rows in my table et affiche viewing 1-10 of 552.

Quelqu'un peut-il me aider s'il vous plaît ce qui ne va pas avec la sérialisation

Answer 1

Il y a des erreurs peuvent dans votre code. On dirait que vous avez utilisé un exemple de code rétro qui a au moins 3 ans.

L'erreur principale dans le code du serveur est l'utilisation de JsonConvert.SerializeObject à l'intérieur de la méthode Web. Si vous définissez ResponseFormat=ResponseFormat.Json, la méthode doit renvoyer objet de n'importe quel type et non string. .Net convertir l'objet automatiquement en JSON. Le type de valeur de retour GetCompanyList() doit donc être le même que le type de retour GetAllData(). Une fois les modifications de la méthode Web doit renvoie les données telles que

{ 
    "d": [ 
     { 
      "F1": 1, 
      "F2": "Name", 
      "F3": "Address", 
      "F4": "City", 
      "F5": "Phone" 
     }, 
     { 
      "F1": 10, 
      "F2": "abc", 
      "F3": "def", 
      "F4": "asd", 
      "F5": "998907" 
     } 
    ] 
} 

Le deuxième problème que vous utilisez datatype défini en fonction. C'est à faible niveau que vous devriez jamais utiliser si vous pouvez obtenir les données avec respect jQuery.ajax avec quelques paramètres. jqGrid fournit beaucoup de manière différente de personnalisation pour changer les paramètres de jQuery.ajax utilisés par jqGrid en interne.En général, il suffit de spécifier les options comme

url: "jqGrid_pureJS.aspx/GetCompanyList", 
mtype: 'POST', 
datatype: 'json', 
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' }, 
serializeGridData: function (postData) { 
    return JSON.stringify(postData); 
}, 
jsonReader: { 
    repeatitems: false, 
    root: function (obj) { return obj.d; } 
}, 
gridview: true, 
height: "auto", 
loadonce: true 

Il est important en outre de supprimer toutes les propriétés de indexcolModel. L'utilisation de index autre comme name suit à des erreurs si vous utilisez l'option loadonce: true.

Si F1 colonne contient uniques valeurs alors je vous recommande d'ajouter key: true propriété à la définition de la colonne "F1".

Les résultats des changements devraient être comme sur the demo: