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更多关于此阅读。）