jqGrid and ASP.NET web forms with JSON

When using jQuery and JSON to send Ajax requests to an ASP.NET web service or page method running on IIS, you have to submit the requests with a very specific format. Unfortunately a lot of jQuery plug-ins don't follow that format. That is the case with jqGrid, which is otherwise an absolutely marvelous plug-in. So I recently modifed jqGrid to work in my ASP.NET project.

Here is what you need to do:

1. In all .ajax calls made by jqGrid, make sure the following options are set:

dataType: "json"
contentType: "application/json; charset=utf-8"

2. Include this JSON parsing library in your page.

3. Modify each .ajax call so that the data is stringified. For example, if you have the following line in the jqGrid code:

data: postdata

change that to

data: JSON.stringify(postdata)

4. For security reasons, JSON responses from the ASP.NET server have to be parsed in a particular way. When you parse the server response and get your JSON object, let's say that the object is called msg. The actual object that you need will be located in msg.d. This means that you need to replace all parsed JSON objects with the .d notation. Just search through the files with .ajax calls and look for "eval". Then replace the ones that are parsing JSON responses from the server. So for example:

eval("("+JSON.responseText+")")

becomes

customParse(JSON.responseText)

where you have:

function customParse(responseText)
{
var tmp = JSON.parse(responseText);
return tmp.d;
}

This method is also more secure than eval.

5. If you want to use master-detail pages or other similar things, you need to use the custom postdata functions to send the master table id to your web method. The parameter string approach outlined in the jqGrid documentation will not work.