Comment utiliser jqGrid avec C#/ASP.NET et JSON.NET (et pas de choses AJAX.NET)?

Question

OK, j'ai regardé cela dans quelques jours et je ne suis pas particulièrement sûr de ce que je fais mal. Si quelqu'un a des exemples d'utilisation de jqGrid avec C#/ASP.NET et des outils open source, s'il vous plaît, laissez-moi savoir où les trouver. Tous les conseils sur la recherche de documentation ou d'outils décents que je pourrais utiliser pour déboguer ce serait très apprécié aussi (je suis assez nouveau à js/jQuery). Fondamentalement, j'ai juste besoin de la fonctionnalité edit-in-place, donc si je néglige une autre solution évidente pour cela, il pourrait être utile de savoir ... Je voudrais éviter d'utiliser AJAX.NET si possible. Je sens que je suis juste en train de négliger quelque chose de vraiment évident ici.

Dans l'exemple suivant, j'obtiens l'affichage de jqGrid, mais il ne montre aucune donnée.

Voici le JavaScript pertinent:

jQuery(document).ready(function(){ 
    jQuery("#role_assignment_table").jqGrid({ 
     url:'http://localhost:4034/WebSite2/PageItemHandler.asmx/GetPageItemRolesJson?id=3', 
     mtype: 'GET', 
     contentType: "application/json; charset=utf-8", 
     datatype: "jsonstring", 
     colModel:[ 
      {name:'Id', label:'ID', jsonmap:'Id'}, 
      {name:'Title', jsonmap:'Title'}, 
      {name:'AssignedTo', label:'Assigned To', jsonmap:'AssignedTo'}, 
      {name:'Assigned', jsonmap:'Assigned'}, 
      {name:'Due', jsonmap:'Due'}, 
      {name:'Completed', jsonmap:'Completed'} 
     ], 
     jsonReader: { 
      page: "Page", 
      total: "Total", 
      records: "Records", 
      root: "Rows", 
      repeatitems: false, 
      id: "Id" 
     }, 
     rowNum:10, 
     rowList:[10,20,30], 
     imgpath: 'js/themes/basic/images', 
     viewrecords: false, 
     caption: "Role Assignments" 
    }); 
}); 

---

Le code HTML:

<table id="role_assignment_table" class="scroll" cellpadding="0" cellspacing="0" /> 

---

Le JSON produit: Je ne sais pas si elle fait au jqGrid, ou si le jqGrid n'aime pas mon JSON ou mon WebMethod, mais je peux l'appeler moi-même quand je vais à l'URL appropriée et que j'obtiens la chaîne de résultat JSON.

{"Page":"1","Total":1.0,"Records":"4", 
"Rows":[ 
{"Id":1,"Item":null,"Title":"Story Manager","AssignedTo":null,"Assigned":"\/Date(1245186733940-0500)\/","Due":"\/Date(1248383533940-0500)\/","Completed":"\/Date(1247087533940-0500)\/"}, 
{"Id":2,"Item":null,"Title":"Analysis","AssignedTo":null,"Assigned":"\/Date(1245186733940-0500)\/","Due":"\/Date(1248383533940-0500)\/","Completed":"\/Date(1247087533940-0500)\/"}, 
{"Id":3,"Item":null,"Title":"Narrative","AssignedTo":null,"Assigned":"\/Date(1245186733940-0500)\/","Due":"\/Date(1248383533940-0500)\/","Completed":"\/Date(1247087533940-0500)\/"}, 
{"Id":4,"Item":null,"Title":"Graphic","AssignedTo":null,"Assigned":"\/Date(1245186733940-0500)\/","Due":"\/Date(1248383533940-0500)\/","Completed":"\/Date(1247087533940-0500)\/"} 
] 
} 

Cheers, William Riley-Land

Answer 1

Avant de faire quoi que ce soit d'autre, téléchargez et installez ceci:

http://www.fiddler2.com/fiddler2/

Il vous permettra de voir exactement ce qui est demandé et renvoyé par les requêtes jqGrid pour obtenir les données JSON.

J'ai un code pour un travail jqGrid, et quelque chose de différent ici:

datatype: "json" 

Au lieu de votre:

datatype: "jsonstring" 

J'ai aussi un champ appelé colNames qui est un tableau de chaînes contenant noms de colonne.

Enfin, j'ai un champ pager qui identifie un élément qui va stocker les contrôles de pagination, et est un DIV.

Answer 2

Si vous rencontrez des problèmes pour faire fonctionner jqGrid avec ASP.NET, veuillez regarder here. Cela devrait vous faire gagner beaucoup de temps.

Answer 3

Dans ASP.NET, Date est sérialisé en JSON "/Date(ticks)/" qui ne peut pas être interprété par jqGrid. solutions possibles (post):

• écrivent un formatter personnalisé pour la grille
• modifier les données que nous envoyons au réseau (en envoyant date formatée sous forme de chaîne)

S'il vous plaît dire comment a fait vous implémentez l'affichage de la date avec jqGrid?

Merci.

Answer 4

J'avais exactement le même problème! La solution que je suis venu avec est de créer un formatter JavaScript personnalisé:

$(this).jqGrid({ 
    ... 
    colModel: [ 
     { 
     name: 'SomeDate', index: 'SomeDate', width: 100, formatter: ndateFormatter } 
     }], 
    ... 
}); 


// Convert C# json Date. 
function ndateFormatter(cellval, opts, rwdat, _act) { 
    var time = cellval.replace(/\/Date\(([0-9]*)\)\//, '$1'); 
    var date = new Date(); 
    date.setTime(time); 
    return date.toDateString(); 
} 

Answer 5

Soyez prudent avec le cas de la propriété sensible type de données est censé être dataType avec majuscule T.