Asp.net mvc4 jqueryGrid не отображается

Question

Я пытаюсь реализовать jquerygrid плагин в моем приложении asp.net mvc4. Но им застрял. Нужна ваша помощь. Написал весь код, и я получил только белую страницу с данными json. Я не знаю, почему.

Мой взгляд показано ниже:

@model Fancy.Management.Model.User.IndexModel 
@{ 
ViewBag.Title = "Index"; 
} 
<script type="text/javascript"> 
jQuery(document).ready(function(){ 
    jQuery("#list").jqGrid({ 
     url:'@Html.Action("Index","User")', 
     datatype: 'json', 
     mtype: 'GET', 
     colNames:['Id','Votes','Title'], 
     colModel :[ 
      {name:'Id', index:'Id', width:40, align:'left' }, 
      {name:'Votes', index:'Votes', width:40, align:'left' }, 
      {name:'Title', index:'Title', width:200, align:'left'}], 
     pager: jQuery('#pager'), 
     rowNum:10, 
     rowList:[5,10,20,50], 
     sortname: 'Id', 
     sortorder: "desc", 
     viewrecords: true, 
     imgpath: '/scripts/themes/coffee/images', 
     caption: 'My first grid' 
    }); 
}); 
</script> 

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

И мой метод действия показан ниже:

public ActionResult Index(string sidx, string sord, int? page, int? rows) 
    { 
     var jsonData = new 
     { 
      total = 1, 
      page = 1, 
      records = 3, 
      rows = new[]{ 
    new{Id=1,cell=new[] {"1","-7","Is this good question?"}}, 
    new{Id=2,cell=new[] {"2","15","Is this really?"}}, 
    new{Id=3,cell=new[] {"3","23","Why is the sky blue?"}} 
    } 
     }; 
     return Json(jsonData, JsonRequestBehavior.AllowGet); 
    } 

Exception, что я получил показано ниже:

Answer 1

Ваш Index Действие не возвращается View, поэтому созданный вами вид никогда не используется. Действие возвращает только данные в формате JSON:

return Json(jsonData, JsonRequestBehavior.AllowGet); 

Вот почему вы видите JSON данные в браузере при запросе Index действия.

Вместо этого, вы должны возвратить представление (с экземпляром IndexModel, что вы, кажется, не имеют в коде):

return View(someInstanceOfIndexModel); 

jqGrid затем будет необходимо использовать другое действие, чтобы получить его данные JSON, поскольку запрос AJAX отличается от запроса, который первоначально загружает страницу. Что-то вроде этого:

url:'@Html.Action("IndexData","User")', 

Метод действия в настоящее время есть для Index затем будет переименован в нечто вроде IndexData (используя образец выше), чтобы обработать запрос AJAX.

В конечном счете, порядок операций здесь будет:

1. Браузер запрашивает Index.
2. Index возвращает View (заполненный любой необходимой моделью просмотра).
3. Поскольку рассматриваемый вопрос содержит код JavaScript, этот код будет выполняться браузером.
4. Код JavaScript делает второй запрос другому действию (я назвал его IndexData, но вы можете назвать его, как хотите).
5. Это другое действие возвращает Json с данными, необходимыми для сетки.
6. Клиентский код JavaScript получает данные и заполняет сетку.