Implementing jQuery's jgGrid with ASP.Net and JSON formatting

Found your post while I was trying to do this for my project. I got it working. For anyone who needs it in the future, jqGrid won't work out of the box with JSON and ASP.NET. You need to make a couple of small modifications to grid.base.js. Around line 829, replace the json case section with the following:

case "json":    gdata = JSON.stringify(gdata); //ASP.NET expects JSON as a string    $.ajax({ url: ts.p.url,              type: ts.p.mtype,              dataType: "json",              contentType: "application/json; charset=utf-8", //required by ASP.NET             data: gdata,              complete: function(JSON, st) { if (st == "success") { addJSONData(cleanUp(JSON.responseText), ts.grid.bDiv); if (loadComplete) { loadComplete(); } } },              error: function(xhr, st, err) { if (loadError) { loadError(xhr, st, err); } endReq(); },              beforeSend: function(xhr) { if (loadBeforeSend) { loadBeforeSend(xhr); } } });    if (ts.p.loadonce || ts.p.treeGrid) { ts.p.datatype = "local"; }    break;

Then add the following function:

function cleanUp(responseText) {    var myObject = JSON.parse(responseText);  //more secure than eval    return myObject.d;  //ASP.NET special}

You will also need to include the JSON parser and stringifier. Along with working with ASP.NET, this revised code is also more secure because the eval statement is gone.

EDIT: I should have also noted that you might have to make similar edits to grid.celledit.js, grid.formedit.js, grid.inlinedit.js, and grid.subgrid.js.

I've just jTemplates for doing client-side paging with jQuery and ASP.NET. I did a blog post on it which you can find here: http://www.aaron-powell.com/blog.aspx?id=1209

It looks at how to create a templated data location, return the data from ASP.NET and then implement a paging solution.

You can use the ASP.Net MVC JsonResult to populate the grid.

Person Class

public class Person{    public int ID { get; set; }    public string Name { get; set; }    public DateTime Birthday { get; set; }    public static IEnumerable<Person> GetABunchOfPeople()    {       // Get a bunch of People.    }}

In your controller you would have:

public JsonResult GetABunchOfPeopleAsJson(){    var rows = (Person.GetABunchOfPeople()        .Select(c => new                         {                             id = c.ID,                             cell = new[]                                        {                                            c.ID.ToString(),                                            c.Name,                                            c.Birthday.ToShortDateString()                                        }                         })).ToArray();    return new JsonResult               {                   Data = new                              {                                  page = 1,                                  records = rows.Length,                                  rows,                                  total = 1                              }               };}

And the jqGrid configuration for the url would be:

url: '<%= ResolveUrl("~/Person/GetAllPeople") %>',