jqGrid data not loading

Question

im working on an MVC project that also includes a WEB API project. Basically im making a call from my MVC project to the API project to query data that will appear in a jqGrid. However, I cannot get any data to load in the grid, it just says "loading" and then nothing happens. Here how I have everything setup:

My controller on the Web API side:

static readonly IWellRepository repository = new WellRepository();

    WellsMigrationEntities db = new WellsMigrationEntities();

    // GET api/values
   public dynamic Get(string sidx, string sord, int page, int rows)
    {
      var wells = repository.GetAll() as IEnumerable<vwWell>;
      var pageIndex = Convert.ToInt32(page) - 1;
      var pageSize = rows;
      var totalRecords = wells.Count();
      var totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);
      wells = wells.Skip(pageIndex * pageSize).Take(pageSize);
      return new
      {
          total = totalPages,
          page = page,
          records = totalRecords,
          rows = (
              from well in wells
              select new
              {
                  //i = well.APINumber,
                  cell = new string[] {
                     well.APINumber,
                     well.CountyName,
                     well.LeaseName,
                     well.WellNumber 
                  }
              }).ToArray()
      };
    }

My repository method that gets called within the Controller:

WellsMigrationEntities db = new WellsMigrationEntities();

    public IEnumerable<vwWell> GetAll()
    {
        return db.vwWells.Where(o => o.CountyName == "Butte").ToList();
    }

and Finally here is my JqGrid thats being loaded in my MVC project:

<script>
var API_URL = "http://localhost:41389/api/well";
jQuery("#gridMain").jqGrid({
    url: API_URL,
    datatype: 'json',
    mtype: 'GET',
    pager: '#pagernav',
    sortable: true,
    height: 200,
    viewrecords: true,
    jsonReader: {
        repeatitems: false,
        page: function () { return 1; },
        root: function (obj) { return obj; },
        records: function (obj) { return obj.length; }
    },
    colNames: ['APINumber', 'CountyName', 'LeaseName', 'WellNumber'],
    colModel: [{ name: 'APINumber', index: 'APINumber', width: 40, editable: true, edittype: 'text' },
     { name: 'CountyName', index: 'CountyName', editable: true, edittype: 'text', width: 70 },
     { name: 'LeaseName', index: 'LeaseName', editable: true, edittype: 'text', width: 70 },
     { name: 'WellNumber', index: 'WellNumber', editable: true, edittype: 'text' }
    ],
    caption: "jqGrid",
    autowidth: true

});

No matter what i try, data will not load! Heres what the output is from my Get moethod in my controller:

{{"$id":"1","total":13,"page":1,"records":260,"rows":[{"$id":"2","cell":["00700001","Butte","Parrott Inv. Co.","9A-3"]},{"$id":"3","cell":["00700002","Butte","Wild Goose Gas Unit 1","9"]},{"$id":"4","cell":["00700003","Butte","Wild Goose Gas Unit 1","10"]},{"$id":"5","cell":["00700004","Butte","Wild Goose Gas Unit 1","6"]},{"$id":"6","cell":["00700005","Butte","Capital Co.","1"]},{"$id":"7","cell":["00700006","Butte","Estes","1"]},{"$id":"8","cell":["00700007","Butte","Capital Co.","E-1"]},{"$id":"9","cell":["00700008","Butte","Donohoe Fee","1"]},{"$id":"10","cell":["00700009","Butte","Donohoe Fee","2"]},{"$id":"11","cell":["00700010","Butte","T. W. Rodgers","1"]},{"$id":"12","cell":["00700011","Butte","Wahl Community","1"]},{"$id":"13","cell":["00700012","Butte","Towne","1"]},{"$id":"14","cell":["00700013","Butte","Wild Goose Gas Unit 1","1"]},{"$id":"15","cell":["00700014","Butte","Neaves-Parrott Inv.","2"]},{"$id":"16","cell":["00700015","Butte","Neaves-Parrott Inv.","7"]},{"$id":"17","cell":["00700016","Butte","Parrott Inv. Co.","1"]},{"$id":"18","cell":["00700018","Butte","Parrott Investment Co.","1"]},{"$id":"19","cell":["00700019","Butte","Urich Oil -Parrott","2"]},{"$id":"20","cell":["00700020","Butte","Parrott Investment Co.","2"]},{"$id":"21","cell":["00700021","Butte","Parrott Investment Co.","3"]}]}}

Why is the data not loading for me?

UPDATE:

by the way, this is the url that is being sent to my controller from jqGrid

http://localhost:41389/api/well?_search=false&nd=1384556871623&rows=20&page=1&sidx=&sord=asc

Answer 1

Your problem is in the data structure that you're returning for the rows. When you're returning cell, you're not passing any "key" information that your grid can parse for the columns. Therefore, just return an array of the vwWell objects

 // GET api/values


public dynamic Get(string sidx, string sord, int page, int rows)
    {
      var wells = repository.GetAll() as IEnumerable<vwWell>;
      var pageIndex = Convert.ToInt32(page) - 1;
      var pageSize = rows;
      var totalRecords = wells.Count();
      var totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);
      wells = wells.Skip(pageIndex * pageSize).Take(pageSize);
      var jsonData = new
      {
          total = totalPages,
          page = page,
          records = totalRecords,
          rows = wells.ToArray() //We need an array of objects for the rows
      };
      return jsonData;
    }

Note You'll need to include System.Web.Mvc namespace if it's not included

Answer 2

Well, I figured it out and I feel stupid.

Apparently debugging in Chrome does not work well. Changed deployment to IE, and it works just fine now -_-