JQueryGrid not calling the URL in ASP.Net MVC

asp.net-mvcjquery

I've been trying to implement jQuery's grid function in my Asp.Net MVC app. I'm testing everything out on XP right now, so I've enabled the mvc extension (since I'm using IIS 5)

I've run into 2 problems.

  1. My jquery grid doesn't seem to be getting called.
    I referenced all the jquery & grid files using the URL.Content() method
    Here's my headcontent:
    
      jQuery(document).ready(function() {
      alert('loaded');
      alert('starting jquery');
          jQuery("#list").jqGrid
          ({
              url: '/Bar.mvc/GridData/',
              datatype: 'json',
              mtype: 'GET',
              colNames: ['Id', 'Votes', 'Title'],
              colModel: [
                { name: 'Id', index: 'Id', width: 40, align: 'left' },
                { name: 'Votes', index: 'Votes', width: 40, align: 'left' },
                { name: 'Title', index: 'Title', width: 400, align: 'left'}],
              pager: jQuery('#pager'),
              rowNum: 10,
              rowList: [5, 10, 20, 50],
              sortname: 'Id',
              sortorder: "desc",
              viewrecords: true,
              imgpath: '/scripts/themes/coffee/images',
              caption: 'My first grid'
          });
          alert('jQuery done');
      }); 
    

My first two alerts fire. But once it goes into the jGrid function, the 3rd alert doesn't fire. I'm thinking it might be related to the URL, because I've put a breakpoint on the function in the controller and it never gets hit.

My second issue is when I've put /Bar.mvc/GridData in the address bar, to even see if it could find the function, it prompts me to download a json type file with Firefox's "Save File…" dialog.

Here's my function in the controller:

     public ActionResult GridData(string sidx, string sord, int? page, int? rows)
    {
        int totalPages = 1; // we'll implement later
        int? pageSize = rows;
        int totalRecords = 3; // implement later

        var jsonData = new
        {
            total = totalPages,
            page = page,
            records = totalRecords,
            rows = new[]{
                new {id = 1, cell = new[] {"1", "-7", "Is this a good question?"}},
                new {id = 2, cell = new[] {"2", "15", "Is this a blatant ripoff?"}},
                new {id = 3, cell = new[] {"3", "23", "Why is the sky blue?"}}
            }
        };
        return Json(jsonData);
    }

Best Answer

If the third alert doesn't fire, then the call to jqGrid is dying. Use Firebug or the IE 8 script debugger to see the error. The "second issue" is correct behavior. Don't worry about it. When the grid calls your action it will be right.