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

例外，我得到了如下圖所示：

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會則（使用上面的示例）來處理Ajax請求被重命名爲類似IndexData。

最終，這裏的操作順序是：

1. 瀏覽器請求Index。
2. Index返回一個View（由任何必要的視圖模型填充）。
3. 由於有問題的視圖包含JavaScript代碼，因此該代碼將由瀏覽器執行。
4. JavaScript代碼向另一個操作發出第二個請求（我稱之爲IndexData，但您可以隨意調用它）。
5. 該其他操作返回Json與網格所需的數據。
6. 客戶端JavaScript代碼接收數據並填充網格。