Автозагрузка данных при прокрутке с помощью jqGrid в MVC

Question

Моя проблема в том, что, пытаясь реализовать использование функции автозагрузки, я не могу заставить ее делать запросы GET к моему действию вообще, чтобы попытаться загрузить следующий набор данных. Первая начальная загрузка работает нормально

Я попытался следовать примеру здесь http://trirand.com/blog/jqgrid/jqgrid.html

Эта функция указана в левой части под заголовком Новое в версии 3.4 - Автозагрузка при прокрутке

В чем здесь ошибка?

Вот мой код сетки js

<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',
   jsonReader:
   {
      repeatitems : true,
   },
   caption: ''
});
});
</script>

Html

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

Контроллер

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

Мой объект-обертка json

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

Answer 1

Проблема была внутри моего вспомогательного объекта json.Я виню в этом плохие соглашения об именах, но похоже, что я смешал записи и итоговые параметры.

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

Переключение этих двух решило проблему.

Вот отличная ссылка, которая приводитя к открытию.Этот парень - гуру jqGrid.

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

Answer 2

Вот полный рабочий пример, который я написал для вас, в котором я жестко закодировал значения, но вы можете легко адаптировать его под свои нужды.

Контроллер:

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

Вид:

@{
    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>

Answer 3

Вам не хватает имени контроллера в вызове ajax (url: '/ controllername / actionname') Я надеюсь, что это решит вашу проблему.