JqGrid не загружает данные из asp.net mvc action

Question

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

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

Я импортировал 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); 
    } 

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

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

Answer 1

kMike,

вам необходимо добавить следующие строки в обратном заявлении (при условии, 2 MVC):

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. Для jqGrid не требуется включение jquery-ui-1.8.5.custom.min.js. 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>itself.

Если сетка имеет столбец, который уникальный и может быть идентификатор строки сетки вы можете включить 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"}} 
} 

(см this old answer или прочитать больше об этом documentation.)