How to link jqGrid with asmx webservice c #
First of all, you must define WebMethod
which will provide the data for the jqGrid. If you plan on doing server side sorting and paging, the web method must have at least the following parameters
public JqGridData TestMethod (int page, int rows, string sidx, string sord)
where the JqGridData
class will be defined like like
public class TableRow {
public int id { get; set; }
public List<string> cell { get; set; }
}
public class JqGridData {
public int total { get; set; }
public int page { get; set; }
public int records { get; set; }
public List<TableRow> rows { get; set; }
}
There are other options for how you can fill the grid, but it's important to understand at least one way first.
It is important that you do not need to manually convert the returned data to JSON to return JSON data from a web method . You just need to return an object with data, and the ASMX web service will serialize the XML or JSON object itself based on the HTTP request headers.
In the request to the server there will be application/json; charset=utf-8
or application/json
in part of the Content-Type
HTTP header, the data returned will be JSON and will be
{
"d": {
"page": 1,
"total": 4,
"records": 4,
"rows": [
...
]
}
}
On the client side, you should use
$("#list").jqGrid({
url: 'MyTestWS.asmx/TestMethod',
datatype: 'json',
mtype: 'POST',
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
serializeGridData: function (postData) {
return JSON.stringify(postData);
},
jsonReader: {
root: "d.rows",
page: "d.page",
total: "d.total",
records: "d.records"
}
gridview: true,
...
}
See example here for example code.
UPDATED : You can download Visual Studio demo projects here and here . See the answer for more links to other demo projects.
source to share