Question

I am trying to get my data from action method and infact in Fiddler I get the json data but the grid doesn’t show anything.

This is my .cshtml:

<script type="text/javascript">
    $(document).ready(function () {

        $('#customers').jqGrid({

            url: '/Home/Customers/',
            dataType: 'json',
            mType: 'POST',
            colNames: ['CustomerID', 'ContactName', 'ContactTitle', 'Country', 'CompanyName', 'Fax', 'Phone'],
            colModel: [
                { name: 'CustomerID', index: 'CustomerID', align: 'left' },
                { name: 'ContactName', index: 'ContactName', align: 'left' },
                { name: 'ContactTitle', index: 'ContactTitle', align: 'left' },
                { name: 'Country', index: 'Country', align: 'left' },
                { name: 'CompanyName', index: 'CompanyName', align: 'left' },
                { name: 'Fax', index: 'Fax', align: 'left' },
                { name: 'Phone', index: 'Phone', align: 'left' },

            ],
            pager: jQuery('#customerPager'),
            rowNum: 10,
            rowList: [5, 10, 20, 50],
            sortname: 'CustomerID',
            sortorder: "desc",
            viewrecords: true,
            imgpath: '',
            caption: 'My first grid'
        });

    });
</script>

In _Layout.cshtml, I have reference to scripts and I they all load properly:

<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/ui.jqgrid.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/ui.multiselect.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/themes/ui-lightness/jquery-ui-1.8.16.custom.css")" rel="stylesheet" type="text/css" />

    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/grid.locale-en.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.jqGrid.min.js")" type="text/javascript"></script>

This is my Home controller’s action method:

public JsonResult Customers(string sidx, string sord, int page, int rows )
        {
            NorthwindEntities entities = new NorthwindEntities();
            int pageIndex = page - 1;
            int pageSize = rows;
            int totalRecords = entities.Customers.Count();
            int totalPages = (int)Math.Ceiling( (float)totalRecords / pageSize);
            var customers = entities.Customers.OrderBy(k => k.CustomerID).Skip(pageIndex * pageSize).Take(pageSize).ToList();

            var jsonData = new
            {
                total = totalPages,
                page,
                records = totalRecords,
                rows = (from customer in customers 
                            select new {
                                    i = customer.CustomerID,
                                    cell = new string[]{customer.CustomerID, customer.ContactName,
                                            customer.ContactTitle, customer.Country, customer.CompanyName,
                                            customer.Fax,
                                            customer.Phone
                                    }
                            }).ToArray()
            };

            return Json(jsonData,JsonRequestBehavior.AllowGet);
        }

Any idea what am I missing?

Answer 1

Your main error is that you use wrong case in the jqGrid option names (see the documentation). The dataType: 'json' must be datatype: 'json', the mType: 'POST' must be mtype: 'POST'. Moreover you use very old template for your solution which originate from the Phil Haack demo. One can see that at least from the bug in the controller action: you use i = customer.CustomerID instead of id = customer.CustomerID.

Additionally you should include jquery-ui-1.8.16.min.js instead of jquery-ui-1.8.11.min.js if you use jquery-ui-1.8.16.custom.css. I recommend you to use jQuery 1.6.2. The xxx-vsdoc.js file you can download from the Microsoft page. Be careful with jQuery 1.6.3 some small bug fixes in jqGrid can be required (see here an example).

I recomend you to download my VS2010 demo or VS2008 demo which I described in the answer. The demo is based on the Phil Haack demo, but it’s modified so that it support error reporting, searching or toolbar filtering and has some small, but very useful CSS fixes which you need to eliminate small conflicts between the standard ASP.NET MVC CSS and jqGrid CSS.