jQueryGrid not calling the URL in ASP.Net MVC

Question

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);
    }

Answer 1

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.

Answer 2

Not sure if this is the actual answer or not. But I took some steps backwards and tried something really simple with jQuery.

I did a simple .post. But for the URL, I used a

<%Html.Action("myControllerFunction")%>

That was all it took to make it work. So when I get a chance again, I'll test it out on the grid, but I would guess it's at least related.

But I did use firebug to help me get to that point.