jqgrid不显示，mvc 3答案

【问题标题】：jqgrid not displaying, mvc 3jqgrid不显示，mvc 3
【发布时间】：2015-08-17 14:22:18
【问题描述】：

我正在使用 asp.net MVC 3，但我的表格没有显示。然后我建立了另一个项目，但在 MVC 4 中。一切正常。

我的控制器代码：

public JsonResult GetTodoLists(string sidx, string sord, int page, int rows, Billboard billboard)  //Gets the todo Lists.
    {
        int pageIndex = Convert.ToInt32(page) - 1;
        int pageSize = rows;
        var todoListsResults = db.billboard.Select(
                a => new
                {
                    a.BillboardID,
                    a.Event_date,
                    a.Event_name,

                });
        int totalRecords = todoListsResults.Count();
        var totalPages = (int)Math.Ceiling((float)totalRecords / (float)rows);
        if (sord.ToUpper() == "DESC")
        {
            todoListsResults = todoListsResults.OrderByDescending(s => s.Event_name);
            todoListsResults = todoListsResults.Skip(pageIndex * pageSize).Take(pageSize);
        }
        else
        {
            todoListsResults = todoListsResults.OrderBy(s => s.Event_name);
            todoListsResults = todoListsResults.Skip(pageIndex * pageSize).Take(pageSize);
        }
        var jsonData = new
        {
            total = totalPages,
            page,
            records = totalRecords,
            rows = todoListsResults
        };

        return Json(jsonData, JsonRequestBehavior.AllowGet);
    }

我的查看代码：

<h2>Todo List</h2>
<div>
<table id="grid"></table>
<div id="pager"></div>
</div>
<head>

<title>jqGrid</title>

<link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" />
<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="~/Scripts/jquery-ui-1.10.4.min.js"></script>  
<script src="~/Scripts/i18n/grid.locale-ru.js"></script>
<script src="~/Scripts/jquery.jqGrid.min.js"></script>
<script src="~/Scripts/Billboard.js"></script>


</head>

还有我的js代码：

jQuery(document).ready(function () {

$("#grid").jqGrid({
    url: "/Home/GetTodoLists",
    datatype: 'json',
    mtype: 'Get',
    colNames: ['BillboardID', 'Event_date', 'Event_name', ],
    colModel: [
        { key: true, hidden: true, name: 'BillboardID', index: 'BillboardID', editable: true },
        { key: false, name: 'Event_date', index: 'Event_date', width: 80, editable: true, },
        { key: false, name: 'Event_name', index: 'Event_name', editable: true, editrules: true },
        ],

    pager: jQuery('#pager'),
    rowNum: 5, 
    rowList: [5, 10, 15],
    height: '20%',

    viewrecords: true,
    caption: 'Афиша',
    emptyrecords: 'No records to display',
    jsonReader: {
        root: "rows",
        page: "page",
        total: "total",
        records: "records",
        repeatitems: false,
        Id: "0"
    },
    autowidth: true,
    multiselect: false,
}).navGrid('#pager', { edit: false, add: true, del: true, search: true, refresh: true },
    {
        // edit options
        zIndex: 100,
        url: '/Home/Edit',
        closeOnEscape: true,
        closeAfterEdit: true,
        recreateForm: true,
        afterComplete: function (response) {
            if (response.responseText) {
                alert(response.responseText);
            }
        }
    },
    {
        // add options
        zIndex: 100,
        url: "/Home/Create",
        closeOnEscape: true,
        closeAfterAdd: true,
        afterComplete: function (response) {
            if (response.responseText) {
                alert(response.responseText);
            }
        }
    },
    {
        // delete options
        zIndex: 100,
        url: "/Home/Delete",
        closeOnEscape: true,
        closeAfterDelete: true,
        recreateForm: true,
        msg: "Are you sure you want to delete this task?",
        afterComplete: function (response) {
            if (response.responseText) {
                alert(response.responseText);
            }
        }
    });
    });

有什么问题？我哪里错了？

【问题讨论】：

首先，您应该将<h2>Todo List</h2><div><table id="grid">/table><div id="pager"></div></div> 移出 <head> 并将其放在<body> 中。最好打开生成的 HTML 页面的源代码并发布页面的完整代码。请始终写下您使用的 jqGrid 的哪个分支（free jqGrid、Guriddo jqGrid JS 或版本
@Oleg ，谢谢提供信息。我使用 JQuery.jqGrid 版本 4.4.4
真是复古版的 jqGrid。我建议您升级到free jqGrid 4.9.2（参见the wiki 的许多文章）。不过 4.4.4 版本的代码也应该可以工作。您应该发布更多您使用的完整代码（完整的 HTML 页面）或发布到使用非最小化 jqGrid 版本的演示的链接（jquery.jqgrid.src.js 而不是jquery.jqgrid.min.js）。有demo可以重现问题，查看完整代码，调试，找出问题原因。
@Oleg ，问题已解决。我刚刚更改了所有连接字符串，如下所示：感谢帮助！ :)

标签： asp.net asp.net-mvc-3 asp.net-mvc-4 jqgrid

【解决方案1】：

问题已解决。改变这个：

<link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" />
<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="~/Scripts/jquery-ui-1.10.4.min.js"></script>  
<script src="~/Scripts/i18n/grid.locale-ru.js"></script>
<script src="~/Scripts/jquery.jqGrid.min.js"></script>
<script src="~/Scripts/Billboard.js"></script>

开：

<link href="@Url.Content("~/Content/jquery.jqGrid/ui.jqgrid.css")" rel="stylesheet" />
<link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" />
<script src="@Url.Content("~/Scripts/jquery-1.9.1.min.js")"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.10.4.min.js")"></script> 
<script src="@Url.Content("~/Scripts/i18n/grid.locale-en.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.jqGrid.min.js")"></script>
<script src="@Url.Content("~/Scripts/Billboard.js")"></script>

【讨论】：