====== ASP.NET Example ======
In this page I wrote a step by step guide for using jqGrid and ASP.NET webservice for server side.\\ I have used Visual Studio 2010 Professional and ASP.NET project is based on 3.5 version of the framework.
The project is very simple. Just an index.html file for the frontend and a webservice called wsJqTest.asmx that provides data.
I would use JSON for comunication between client and server
The result is a simple table with three column FirstName,LastName,BirthDate.
The solution in visual studio are:
{{:wiki:user:jqgridsamplesolution.png|}}\\
In the js and css folder there are only standard file installed by JQuery and jqGrid. We don't make any modify to that file.
===== Prepare the webservice =====
From the documentation [[wiki:retrieving_data#json_data]] we need a JSON response from the webservice formatted as is:
{
"total": "xxx",
"page": "yyy",
"records": "zzz",
"rows" : [
{"id" :"1", "cell" :["cell11", "cell12", "cell13"]},
{"id" :"2", "cell":["cell21", "cell22", "cell23"]},
...
]
}
The web service have two methods who build the JSON response with different sistem:
* write directly as text string
* using builtin JSON feature of ASP.NET
{"d":
{
"total": "xxx",
"page": "yyy",
"records": "zzz",
"rows" : [
{"id" :"1", "cell" :["cell11", "cell12", "cell13"]},
{"id" :"2", "cell":["cell21", "cell22", "cell23"]},
...
]
}
}
I don't have found the method to change or delete the root element "d". The {d} prefix is part of the expected response for the ASP.NET AJAX library.
using System;
using System.Web;
using System.Web.Services;
///
For retrieve the JSON format I need specify the content type in the request header (see after).
$(document).ready(function () {
$("#tabPeopleList").jqGrid({
datatype: function (pdata) {
AjaxRequestGetPeopleList();
},
colName: ['First Name','Last Name','Birth date'],
colModel: [
{ name: 'FirstName' },
{ name: 'LastName' },
{ name: 'BirthDate' },
],
rowNum: 10,
rowList: [10, 20, 30],
pager: '#tabPagerBar',
sortname: 'FullName',
viewrecords: true,
sortorder: "desc",
caption: "Customer list"
});
$("#tabPeopleList").jqGrid('navGrid', '#tabPagerBar', { edit: false, add: false, del: false });
});
The parameter are standard and document here
The difference between standard example is the use of a **function in javascript as my "datasource"** and need to be specified in the **datatype:** paremeter.
The function who make the data request are:
function resAjaxRequestGetPeopleList() {
if (req.readyState == 4) {
var res = JSON.parse(req.responseText);
var thegrid = $("#tabPeopleList")[0];
thegrid.addJSONData(JSON.parse(res.d));
}
}
function AjaxRequestGetPeopleList() {
req.open("POST", "/jqGridSample/ws/wsJqTest.asmx/getTextPeopleList", true);
req.setRequestHeader("Content-Type", "application/json; charset=utf-8");
req.onreadystatechange = resAjaxRequestGetPeopleList;
req.send(null);
}
The AjaxRequestGetPeopleList() fucntion make a POST request to our webservice and specify who
the response will be returned as a JSON data setting the "content-type" ** req.setRequestHeader("Content-Type", "application/json; charset=utf-8"); **
The resAjaxRequestGetPeopleList() process the data using the built in JSON parser (works only in IE 8 or Firefox 3.1).
The response off the web server are the following:\\
{{:wiki:user:jqgridsamplejsonresponse.png|}}\\
we need to make two JSON parse because the data needed by the grid is inside the {d} root element.\\
==== Conclusion ====
I reported on this page some problems I encountered in my first approach to the use of jqGrid with ASP.NET.\\ The goal is that other unstinting in a while.\\
You can leave any comment below or write directly to lorenzo point soncini at gmail dot com.\\
This is the result\\
{{:wiki:user:jqgridsampleresult.png|jqgridsampleresult.png}}\\
and the source code
{{:wiki:user:jqgridsample.zip|jqGridSample Source code}}