jqGrid and MVC3 url action method does not get called

Question

I can't get the jqGrid to call my action method on my controller. I'm completely new to this, so I'm probably making a lot of newbie mistakes. I've taken samplecode from jqGrids documentation and modified it a bit.

Code in the view:

    $(function () {
    $("#list").jqGrid({
        url: '@Url.Action("GetContactRows", "Contact")',
        datatype: 'json',
        mtype: 'GET',
        colNames: ['Name', 'Address', 'City'],
        colModel: [
          { name: 'Name', index: 'Name', width: 80 },
          { name: 'Address', index: 'Address', width: 80 },
          { name: 'City', index: 'City', width: 80 }
        ],
        pager: '#pager',
        rowNum: 10,
        rowList: [10, 20, 30],
        sortname: 'invid',
        sortorder: 'desc',
        viewrecords: true,
        gridview: true,
        caption: 'List of Contacts'
    });
}); 

Code in the controller:

    public JsonResult GetContactRows(string sidx, string sord, int page, int rows, bool search, string filters)
    {
        System.Diagnostics.Debug.WriteLine("asdf");

        return new JsonResult();
    }

I've set a breakpoint in my controller action method, but I just can't get it to hit.

Answer 1

The parameter must be called _search, not search. Also you don't seem to be passing any JSON data. Here's an example:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult GetContactRows(string sidx, string sord, int page, int rows, bool _search, string filters)
    {
        var data = new
        {
            page = 1,
            total = 1,
            records = 3,
            rows = new[]
            {
                new 
                {
                    id = 1,
                    cell = new[] { "Name 1", "Address 1", "City 1" },
                },
                new 
                {
                    id = 2,
                    cell = new[] { "Name 2", "Address 2", "City 2" },
                },
                new 
                {
                    id = 3,
                    cell = new[] { "Name 3", "Address 3", "City 3" },
                }
            }
        };
        return Json(data, JsonRequestBehavior.AllowGet);
    }
}

Notice the action signature using _search as parameter name and also notice that we allow GET requests by using JsonRequestBehavior.AllowGet when returning the JSON.

and the view:

<script src="@Url.Content("~/Scripts/jqgrid/js/jquery.jqGrid.min.js")" type="text/javascript"></script>

<script type="text/javascript">
    $(function () {
        $("#list").jqGrid({
            url: '@Url.Action("GetContactRows", "Home")',
            datatype: 'json',
            mtype: 'GET',
            colNames: ['Name', 'Address', 'City'],
            colModel: [
              { name: 'Name', index: 'Name', width: 80 },
              { name: 'Address', index: 'Address', width: 80 },
              { name: 'City', index: 'City', width: 80 }
            ],
            pager: '#pager',
            rowNum: 10,
            rowList: [10, 20, 30],
            sortname: 'invid',
            sortorder: 'desc',
            viewrecords: true,
            gridview: true,
            caption: 'List of Contacts'
        });
    }); 
</script>

<table id="list"></table>

---

<rant>

Also to be able to easily debug those kind of problems please use a javascript debugging tool such as FireBug. It allows you to see all AJAX requests in your browser as well as what the server sends as response. If you had done that you would have immediately seen this error.

It took me exactly 70 seconds, to go to the jqGrid web site, download it, create a new ASP.NET MVC 3 application, copy-paste your code, reference jqGrid that I have previously downloaded, hit F5 to run the application, hit F12 in FireFox to open FireBug, see that the AJAX request that jqGrid attempted to perform was shown in red (because the server returned HTTP 500 status code), click on the + sign next to this AJAX request and read the exact exception message sent by the server telling me that it cannot find a value for the search parameter which is a non nullable boolean, click on the Params tab and see the exact parameters sent by the client:

Do you see how trivially easy is to do web development when you use the right tools? 70 seconds. It's faster than asking a question on StackOverflow.

</rant>