jqGrid asp.net: invio parametri a web service ajax

Uno dei problemi con i quali ci si scontra quotidianamente lavorando con jqGrid è la documentazione, la cui lacuna principale è l’assenza di esempi di codice, che facciano capire come interagire con questa fantastica libreria in modo avanzato. La problematica che affrontiamo in questo post è come inviare un parametro ad un web service Ajax, un webmethod c#, per costruire e valorizzare una colonna di tipo ‘select’.

Qui di seguito riportiamo il codice di definizione della proprietà in questione:
name: 'City',
index: 'City',
align: "center",
formoptions: { rowpos: 7 },
edittype: 'select',
editable: true,
editrules: { required: true },
editoptions: {
dataUrl: '/path/to/your/webservice/webmethod',
buildSelect: function (data) {
var response = $.parseJSON(data.d);
//costruisco le option della dropdown
var option = buildOptions(response);
var s = '<select id="City" name="City"></select>' }
}
Per poter creare una colonna che, in modalità form editing, sia considerata di tipo ‘select’, jqGrid si aspetta che il parametro edittype sia impostato al valore ‘select’. La proprietà editoptions, invece, si aspetta una serie di parametri:

• dataUrl: consente di impostare il path del web service che il sistema deve invocare per leggere i dati che costituiranno il menu a tendina;
• buildSelect: è un evento, cui agganciamo una funzione di callback, per definire come dovrà essere creato il menu a tendina;

Tutto funziona correttamente a meno che non vogliamo invocare il web service passando un parametro per filtrare i valori di ritorno. In questo caso, l’unica soluzione compatibile con jqGrid è aggiungere la seguente dichiarazione alla definizione del web service:
[WebMethod] [ScriptMethod(UseHttpGet = true)]

Infine, per poter inviare il parametro in fase di chiamata del web service, dovremo impostare la proprietà ajaxSelectOptions di jqGrid. Qui di seguito un esempio:
ajaxSelectOptions: {
contentType: "application/json; charset=utf-8",
dataType: "json",
cache: false,
data: {
rowId: function () {
//leggo il codice cliente, in base a questo caricherò i dettagli del form
return JSON.stringify(grid.jqGrid('getRowData', grid.jqGrid('getGridParam', 'selrow'))['Codice']);
}
}
},
dove 'Codice' è il nome della colonna di cui vogliamo leggere il valore dalla griglia per inviarlo al web service sotto forma di parametro.