Jquery Grid with ASP.NET

Question

I'm trying to use Jquery grid with asp.net, but its not working, it shows the grid with empty content, i'm not sure whats wrong with my code!! here is my HTML code:

<script type="text/javascript">
  $(function () {
      $("#list").jqGrid({
          url: '/WebServices/Admin/WebMethods.ashx',
          datatype: 'json',
          mtype: 'POST',
          colNames: ['ID', 'Name', 'Description'],
          colModel: [
                      { name: 'ID', index: 'ID', width: 55 },
                      { name: 'NAME', index: 'NAME', width: 90 },
                      { name: 'DESCRIPTION', index: 'DESCRIPTION', width: 80 }

                    ],
          jsonReader: {
              repeatitems:false
              },
          pager: $('#pager'),
          rowNum: 10,
          rowList: [10, 20, 30],
          sortname: 'ID',
          sortorder: 'desc',
          viewrecords: true,

          caption: 'Lockups'
      }).navGrid('#pager');
  });
</script>

Followed by:

<form runat="server">
    <div style="width:700px">
        <table id="list" width="100%">
            <tr>
                <td />
            </tr>
        </table>
        <div id="pager">
        </div>
    </div>
</form>

my C# code, im converting my list of objects to JSON :

 public void ProcessRequest(HttpContext context)
 {

      context.Response.ContentType = "application/json"; 
      context.Response.Write(GetAllLookups());
 }

public string GetAllLookups()
{
    var lst = from lockup in LOCKUP_ITEMS.GetLockups()
              select new { 
                  ID = lockup.ID, 
                  NAME = lockup.NAME, 
                  DESCRIPTION = lockup.DESCRIPTION 
              };

    return Newtonsoft.Json.JsonConvert.SerializeObject(
        lst, 
        new JavaScriptDateTimeConverter());
}

Answer 1

jqGrid expects the json data in a certain format:

{ 
  "total": "xxx", 
  "page": "yyy", 
  "records": "zzz",
  "rows" : [
    {"id" :"1", "cell" :["cell11", "cell12", "cell13"]},
    {"id" :"2", "cell":["cell21", "cell22", "cell23"]},
      ...
  ]
}

so change your GetAlLookups method to the following:

public string GetAllLookups()
{
    var list = LOCKUP_ITEMS.GetLockups();
    var numOfItems = list.Count();

    var result = new {
                    total = numOfItems ,
                    page = 1,
                    records = numOfItems ,
                    rows = (from lockup in list
                            select new {
                                ID = lockup.ID, 
                                NAME = lockup.NAME, 
                                DESCRIPTION = lockup.DESCRIPTION 
                            }).ToArray()
                };
    return Newtonsoft.Json.JsonConvert.SerializeObject(
        result, 
        new JavaScriptDateTimeConverter());
}  

Answer 2

try this mtype: 'POST', instead of this mtype: 'POSTs'

EDIT

Hi try out following link

How do I get jqGrid to work using ASP.NET + JSON on the backend?