Autoloading data when scrolling with jqGrid in MVC

My problem is that while trying to implement usage of the Autoload feature, I cannot get it to make GET requests to my Action at all to attempt to load the next set of data. The first initial load works fine

I tried following the example here http://trirand.com/blog/jqgrid/jqgrid.html

The feature is listed under the item on the left hand side titled New in Version 3.4 - Autoloading when scrolling

What is the mistake here?

Here is my js grid code

<script type='text/javascript'>
$(document).ready(function()
{
   $('#gvEmps').jqGrid(
   {
      url:'RecordEmpGrid',
      datatype: 'json',
      colNames:['Select Training(s)'],
      colModel :
      [
         {name: 'Select Training(s)', index: 'TrainingName', width: '300', align: 'Left'}
      ],
   rowNum: 15,
   scroll: true,
   rowList:[10,20,30],
   pager: '#gvEmpsPager',
   sortname: 'TrainingName',
   viewrecords: true,
   sortorder: 'desc',
  开发者_StackOverflow社区 jsonReader:
   {
      repeatitems : true,
   },
   caption: ''
});
});
</script>

Html

<table id="gvEmps" class="SGrid scroll"></table>
<div id="gvEmpsPager" class="scroll"></div>

Controller

    //will never hit this action when scrolling, only first time on page load
    [HttpGet]
    public ActionResult RecordEmpGrid(string sidx, string sord, int page, int rows)
    {
        var gr = new GridResult(sidx, sord, page, rows);
        var skip = rows * page - rows;
        DataTable dt = null;
        using (var mr = new MultipleRecords(Product.Utility, "evaluateSql"))
        {
            mr["sql"] = "SELECT * FROM TT.Training WHERE CompanyId = 190 ORDER BY TrainingName ASC";
            dt = mr.GetDataTable();
        }
        gr.Total = dt.Rows.Count;
        var records = new MultipleRecords(dt);
        foreach (var row in records.Skip(skip).Take(rows))
        {
            gr.AddDataRow(new []{row["TrainingTypeID"].String, row["TrainingName"].String });
        }
        return Json(gr.Data, JsonRequestBehavior.AllowGet);
    }

My json wrapper object

public class GridResult
{
    private List<object> m_rowData = new List<object>();

    private string m_order;
    private string m_idx;
    private int m_rows;
    private int m_page;

    public int Total { get; set; }

    public GridResult()
    {

    }

    public GridResult(string sidx, string sord, int page, int rows)
    {
        m_idx = sidx;
        m_order = sord;
        m_page = page;
        m_rows = rows;
    }

    public void AddDataRow(object[] columnData)
    {
        m_rowData.Add(columnData);
    }

    private object m_data;
    public object Data
    {
        get
        {
            return m_data ?? (m_data = BuildData());
        }
    }

    protected object BuildData()
    {
        var id = 1;
        return new
        {
            total = Total,
            page = m_page++,
            records = m_rows,
            rows = (from row in m_rowData
                    select new
                    {
                        id = id++,
                        cell = row
                    }
                    ).ToArray()
        };
    }
}

The issue was inside my json helper object. I blame poor naming conventions for this but it appears that I was mixing the records & total parameters up.

total = //Number of records of the page
records = //Total number of records that can be loaded


protected object BuildData()
{
    var id = 1;
    return new
    {
        total = _rows, // <-- Number of rows total for a page limit (15 in my case)
        page = m_page++,
        records = Total, //<-- Total number of records possible to load (121 in my case)
        rows = (from row in m_rowData
                select new
                {
                    id = id++,
                    cell = row
                }
                ).ToArray()
    };
}

switching those two solved the problem.

Here is a great link that lead me to the discovery. This guy is a jqGrid guru.

http://blogs.teamb.com/craigstuntz/2009/04/15/38212/

Here's a full working example I wrote for you in which I have hardcoded the values but you could adapt it easily to fit your needs.

Controller:

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

    public ActionResult RecordEmpGrid(string sidx, string sord, int page, int rows)
    {
        var gr = new GridResult(sidx, sord, page, rows);
        var skip = rows * page - rows;
        gr.Total = 75;
        foreach (var item in Enumerable.Range(1, gr.Total).Skip((page - 1) * rows).Take(rows))
        {
            gr.AddDataRow(new[] { string.Format("TrainingName: {0}", item) });
        }
        return Json(gr.Data, JsonRequestBehavior.AllowGet);
    }
}

View:

@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        table {
            border: solid 1px #e8eef4;
        }
    </style>
    <link href="@Url.Content("~/scripts/jqgrid/css/ui.jqgrid.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/jqgrid/js/i18n/grid.locale-en.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/scripts/jqgrid/js/jquery.jqGrid.min.js")" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#gvEmps').jqGrid({
                url: '@Url.Action("RecordEmpGrid")',
                datatype: 'json',
                colNames: ['Select Training(s)'],
                colModel: [
                    { name: 'Select Training(s)', index: 'TrainingName', width: '300', align: 'Left' }
                ],
                rowNum: 10,
                scroll: true,
                rowList: [10, 20, 30],
                pager: '#gvEmpsPager',
                sortname: 'TrainingName',
                viewrecords: true,
                sortorder: 'desc',
                jsonReader: {
                    repeatitems: true
                },
                caption: '',
                height: 100
            });
        });
    </script>
</head>
<body>
    <table id="gvEmps"></table>
    <div id="gvEmpsPager"></div>
</body>
</html>

You are missing the controller name in the ajax call (url:'/controllername/actionname') I hope that will solve your problem.