无法让 jquery.jqgrid 4.4.1 在 ASP.NET MVC 中工作答案

【问题标题】：Unable to get jquery.jqgrid 4.4.1 working in ASP.NET MVC无法让 jquery.jqgrid 4.4.1 在 ASP.NET MVC 中工作
【发布时间】：2012-12-13 10:08:37
【问题描述】：

我一直在努力让 jquery.jqgrid 4.4.1 在我的 ASP.NET MVC 4 解决方案中工作。我使用 NuGet 将 jquery.jqgrid 4.4.1 安装到我的项目中。我试图在我的页面中插入一个非常简单的网格，只是为了确保我的包含都正确设置。这是我的视图文件中的内容。

@{
ViewBag.Title = "Index";
}
<link href="~/Content/Site.css" rel="stylesheet" />
<link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" />
<link href="~/Content/themes/base/jquery.ui.all.css" rel="stylesheet" />

                <script src="~/Scripts/jquery-1.7.2.min.js"></script>
    <script src="~/Scripts/i18n/grid.locale-en.js"></script>
    <script src="~/Scripts/jquery.jqGrid.min.js"></script>


<h2>Index</h2>
<script type="text/javascript">
    $(document).ready(function() {
    $("#myGrid").jqGrid({
        url:'@Url.Action("GetJqGridData")',
        datatype:'json',
        myType:'GET',
        colNames:['Id', 'Name'],
        colModel:[
        { name: 'Id', index: 'Id'},
        { name: 'Name', index: 'Name'}
        ],
        jsonReader: {
            root: 'Data',
        id: 'id',
        repeatitems: false
        },
        pager: $('#myPager'),
        rowNum:5,
        rowList: [2, 5, 10],
        width:600,
        viewrecords:true,
        caption: 'Jqgrid MVC Tutorial'
    });
});
</script>

    <table id="myGrid"></table>
    <div id="myPager"></div>

这是我在运行解决方案时收到的 Javascript 错误。

站点/网格中第 54 行第 5 列未处理的异常

0x800a01b6 - JavaScript 运行时错误：对象不支持属性或方法“jqGrid”

视图甚至从来没有达到调用控制器获取数据的地步。

任何帮助将不胜感激。

更新这是发送到浏览器以获取更多详细信息的 HTML。索引 - 我的 ASP.NET MVC 应用程序

        <script src="/Scripts/modernizr-2.5.3.js"></script>

    </head>
    <body>
        <header>
            <div class="content-wrapper">
                <div class="float-left">
                    <p class="site-title"><a href="/">your logo here</a></p>
                </div>
                <div class="float-right">
                    <section id="login">
                            <ul>
        <li><a href="/Account/Register" id="registerLink">Register</a></li>
        <li><a href="/Account/Login" id="loginLink">Log in</a></li>
    </ul>

                    </section>
                    <nav>
                        <ul id="menu">
                            <li><a href="/">Home</a></li>
                            <li><a href="/Home/About">About</a></li>
                            <li><a href="/Grid">Grid Test</a></li>
                            <li><a href="/Home/Contact">Contact</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </header>
        <div id="body">

            <section class="content-wrapper main-content clear-fix">

<link href="/Content/Site.css" rel="stylesheet" />
<link href="/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" />
<link href="/Content/themes/base/jquery.ui.all.css" rel="stylesheet" />

<script src="/Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="/Scripts/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="/Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>


<h2>Index</h2>
<script type="text/javascript">
$(document).ready(function() {
    $("#myGrid").jqGrid({
        url:'/Grid/GetJqGridData',
        datatype:'json',
        myType:'GET',
        colNames:['Id', 'Name'],
        colModel:[
        { name: 'Id', index: 'Id'},
        { name: 'Name', index: 'Name'}
        ],
        jsonReader: {
        root: 'Data',
        id: 'id',
        repeatitems: false
        },
        pager: $('#myPager'),
        rowNum:5,
        rowList: [2, 5, 10],
        width:600,
        viewrecords:true,
        caption: 'Jqgrid MVC Tutorial'
    });
});
</script>

<table id="myGrid"></table>
<div id="myPager"></div>
            </section>
        </div>
        <footer>
            <div class="content-wrapper">
                <div class="float-left">
                    <p>&copy; 2012 - My ASP.NET MVC Application</p>
                </div>
            </div>
        </footer>

        <script src="/Scripts/jquery-1.7.2.js"></script>


    </body>
</html>

【问题讨论】：

我尝试添加 type 属性，但这并没有解决问题。我已将发送到浏览器的渲染 HTML 添加到原始帖子以添加详细信息。

标签： jqgrid asp.net-mvc-4

【解决方案1】：

我启动了一个新项目并通过 nuGet 包安装了网格，在我看来，您正在与默认情况下使用 MVC4 项目设置的默认资源捆绑器发生冲突。您需要从 Views/Shared/_Layout 文件中删除以下行：

@Scripts.Render("~/bundles/jquery")

这将删除捆绑的脚本。

或者将您的 jqGrid 脚本引用添加到 App_Start 文件夹中的捆绑配置，然后从您的视图中删除脚本标签。

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                            "~/Scripts/jquery-{version}.js",
                            "~/Scripts/i18n/grid.locale-en.js",
                            "~/Scripts/jquery.jqGrid.min.js"));

<!----Remove These From your view-------!>
<script src="~/Scripts/jquery-1.7.2.min.js"></script>
<script src="~/Scripts/i18n/grid.locale-en.js"></script>
<script src="~/Scripts/jquery.jqGrid.min.js"></script>

【讨论】：

感谢您的帮助。捆绑包是导致错误的原因。我为 jqgrid 脚本创建了一个新包。我还需要移动脚本的渲染位置。它们最初被放在布局的底部，这导致了问题。我把它们移到头上，问题就解决了。感谢您的帮助。