0

我正在尝试在我的 asp.net mvc4 应用程序中实现 jquerygrid 插件。但我卡住了。需要你的帮助。编写了所有代码，我只得到了带有 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);
    }

我得到的异常如下所示：

在此处输入图像描述

4

1 回答 1

1

您的Index操作没有返回 a View，因此您创建的 View 永远不会被使用。该操作仅返回 JSON 数据：

return Json(jsonData, JsonRequestBehavior.AllowGet);

这就是您在请求Index操作时在浏览器中看到 JSON 数据的原因。

相反，您需要返回一个视图（带有 的实例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 代码接收数据并填充网格。
于 2013-07-27T18:47:15.220 回答