JqGrid不從asp.net加載數據mvc動作

Question

幾個小時前我遇到了這個問題，我無法繞過它。

我想實現JqGrid到我的ASP.NET MVC應用程序。我使用Phil Haack的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，

你需要添加以下到return語句（假設MVC 2）：

return Json(jsonData, JsonRequestBehavior.AllowGet); 

應該有希望解決這個問題。另外，正如舊金山評論中所述，請檢查螢火蟲是否有任何問題。

[編輯] - 也能讓你沿着這些線路籤名更緊密的耦合到返回類型：

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文件的順序。必須包含文件​​之前jquery.jqGrid.min.js。

我建議您使用jquery-1.4.3.js其工作更快與jqGrid密集使用的CSS。 jqGrid不需要包含jquery-ui-1.8.5.custom.min.js。 jqGrid只使用jQuery UI CSS文件（如jquery-ui-1.8.5.custom.css）。只有在使用jQuery UI Integrations中描述的功能時，您才需要它。

現在一些小的優化備註：

值align: 'left'是默認的，所以不需要包括它。該pager: jQuery('#pager')可以因爲jqGrid的，因爲許多過去的版本，使得在<table>和尋呼機<div>itself所需的所有變化減少到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> 

。

如果您的網格有一欄是獨特，可以是網格行的ID可以包括在相應的列定義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更多關於此閱讀。）