Comment utiliser jqGrid avec C # / ASP.NET et JSON.NET (et aucun élément AJAX.NET)?

Question

Bien, cela fait quelques jours que je me penche sur la question et je ne suis pas vraiment sûr de ce que je fais mal. Si quelqu'un a des exemples concrets d'utilisation de jqGrid avec C # / ASP.NET et d'outils open source, merci de me laisser savoir où les trouver. Toute astuce pour trouver de la documentation ou des outils décents que je pourrais utiliser pour déboguer ce serait très appréciée aussi (je suis assez nouveau pour js / jQuery). En gros, je n'ai besoin que de la fonctionnalité de modification sur place. Par conséquent, si je ne tiens pas compte d'une autre solution évidente, il pourrait être utile de savoir ... J'aimerais éviter autant que possible d'utiliser AJAX.NET.

Je sens que je suis juste en train de négliger quelque chose de vraiment évident ici.

Dans l'exemple suivant, jqGrid s'affiche, mais il ne contient aucune donnée.

Voici le code JavaScript correspondant:

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 généré: je ne sais pas s'il le fait sur 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 obtenez 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)\/"}
]
}

Salut, William Riley-Land

Answer 1

Avant toute chose, 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 du code pour un jqGrid en fonctionnement et voici quelque chose de différent:

datatype: "json"

Au lieu de votre:

datatype: "jsonstring"

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

Enfin, j'ai un champ pager qui identifie un élément qui stockera les contrôles de pagination. Il s'agit d'un DIV.

Answer 2

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

• écrire un formateur personnalisé pour la grille
• changer les données que nous envoyons à la grille (en envoyant la date formatée sous forme de chaîne)

Indiquez comment vous avez implémenté l'affichage de la date avec jqGrid?

Merci.

Answer 3

Faites attention à la casse, la propriété type de données est censée être type de données avec T majuscule .

Answer 4

J'ai eu exactement le même problème! La solution que j’ai trouvée est de créer un formateur 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

Si vous ne parvenez pas à faire fonctionner jqGrid avec ASP.NET, consultez ici . Cela devrait vous faire gagner beaucoup de temps.