JqGrid не загружает данные из действия asp.net MVC

Question

Я столкнулся с этой проблемой несколько часов назад и не могу обойти ее.

Я пытаюсь внедрить JqGrid в мое приложение ASP.NET MVC. Я использовал примеры из поста Фила Хаака .

Я импортировал js и css:

    <link href="/Content/jquery-ui-1.8.5.custom.css" rel="stylesheet" type="text/css"  />
    <link href="/Content/ui.jgrid.css" rel="stylesheet" type="text/css"  />
    <script type="text/javascript" src="/Scripts/jquery-1.4.1.js"></script>
    <script type="text/javascript" src="/Scripts/jquery-ui-1.8.5.custom.min.js"></script>
    <script type="text/javascript" src="/Scripts/jquery.jqGrid.min.js" ></script>
    <script type="text/javascript" src="/Scripts/grid.local-en.js" ></script>

Я поставил этот код в поле зрения:

<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery("#list").jqGrid({
            url: '/Ticket/All/',
            datatype: 'json',
            mtype: 'GET',
            colNames: ['Id', 'Hardware', 'Issue', 'IssueDetails', 'RequestedBy', 'AssignedTo', 'Priority', 'State'],
            colModel: [
          { name: 'Id', index: 'Id', width: 40, align: 'left' },
          { name: 'Hardware', index: 'Hardware', width: 40, align: 'left' },
          { name: 'Issue', index: 'Issue', width: 200, align: 'left' },
          { name: 'IssueDetails', index: 'IssueDetails', width: 200, align: 'left' },
          { name: 'RequestedBy', index: 'RequestedBy', width: 40, align: 'left' },
          { name: 'AssignedTo', index: 'AssignedTo', width: 40, align: 'left' },
          { name: 'Priority', index: 'Priority', width: 40, align: 'left' },
          { name: 'State', index: 'State', width: 40, align: 'left'}],
            pager: jQuery('#pager'),
            rowNum: 10,
            rowList: [5, 10, 20, 50],
            sortname: 'Id',
            sortorder: "desc",
            viewrecords: true,
            caption: 'My first grid'
        });
    }); 
</script>

<h2>My Grid Data</h2>
<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>

А вот мое тестовое действие в контроллере билетов:

 public ActionResult All(string sidx, string sord, int page, int rows)
    {
        var jsonData = new
        {
            total = 1, // we'll implement later 
            page = page,
            records = 3, // implement later 
            rows = new[]{
                new {id = 1, cell = new[] {"1", "hard asdf", "issue adfds", "more issue", "someuser", "otheruser", "2", "Submitted"}},
                new {id = 2, cell = new[] {"2", "hard asdf", "issue adfds", "more issue", "someuser", "otheruser", "2", "Submitted"}},
                new {id = 3, cell = new[] {"3", "hard asdf", "issue adfds", "more issue", "someuser", "otheruser", "2", "Submitted"}}
            }
        };
        return Json(jsonData);
    }

В данный момент я вижу пустую сетку, но вся страница покрыта наложением, и я не могу ничего щелкнуть (это, вероятно, наложение «загрузки»).

Что здесь не так?

Answer 1

kMike,

вам нужно добавить следующее в оператор return (при условии, что mvc 2):

return Json(jsonData, JsonRequestBehavior.AllowGet);

это должно помочь решить проблему. также, как отмечено в комментарии к OT, проверьте firebug на наличие проблем с запросом.

[править] - также сделайте подпись вдоль этих строк для более тесной связи с типом возврата:

public JsonResult All(string sidx, string sord, int page, int rows)

плюс, это было в моих закладках: http://techshorts.blogspot.com/2009/04/json-for-jqgrid-from-aspnet-mvc.html

наслаждайся:)

Answer 2

Я видел еще несколько ошибок, поэтому я решил написать вам дополнительно.

Во-первых, самое важное, вы должны изменить порядок файлов JavaScript. Файл grid.local-en.js должен быть включен до jquery.jqGrid.min.js.

Я рекомендую вам использовать jquery-1.4.3.js , который работает быстрее с CSS, интенсивно используемым jqGrid. Включение jquery-ui-1.8.5.custom.min.js не требуется для jqGrid. jqGrid использует только CSS-файл jQuery UI (например, jquery-ui-1.8.5.custom.css). Только если вы используете функции, описанные в jQuery UI Integrations , тогда вам это понадобится.

Теперь несколько небольших замечаний по оптимизации:

Значение align: 'left' является значением по умолчанию, поэтому его не нужно включать. pager: jQuery('#pager') может быть уменьшено до pager: '#pager' и

<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>

до

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

потому что jqGrid, так как многие последние версии вносят все необходимые изменения в <table> и в пейджер <div> , сам .

Если ваша сетка имеет столбец, уникальный и может быть идентификатором строки сетки, вы можете включить key:true в соответствующее определение столбца, как в вашем случае:

{ name: 'Id', index: 'Id', key: true , width: 40 }

Это позволит вам немного уменьшить размер данных, отправляемых с сервера. Вы можете добавить параметр jsonReader: { cell:"" } и изменить часть вашего кода метода All, который генерирует rows на

rows = new[]{
    new[] {"1", "hard asdf", "issue adfds", "more issue", "someuser", "otheruser", "2", "Submitted"}},
    new[] {"2", "hard asdf", "issue adfds", "more issue", "someuser", "otheruser", "2", "Submitted"}},
    new[] {"3", "hard asdf", "issue adfds", "more issue", "someuser", "otheruser", "2", "Submitted"}}
}

(см. этот старый ответ или прочитайте в документации подробнее об этом.)