2

ASP.NETMVC4ソリューションでjquery.jqgrid4.4.1を機能させるのに苦労しています。NuGetを使用して、jquery.jqgrid4.4.1をプロジェクトにインストールしました。インクルードがすべて正しく設定されていることを確認するために、非常に単純なグリッドをページに挿入しようとしています。これが私のViewファイルにあるものです。

@{
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.NETMVCアプリケーション 

        <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>
4

1 に答える 1

3

新しいプロジェクトを起動し、nuGetパッケージを介してグリッドをインストールしましたが、MVC4プロジェクトでデフォルトでセットアップされているデフォルトのリソースバンドラーとの競合が発生しているようです。Views / Shared/_Layoutファイルから次の行を削除する必要があります。

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

バンドルされているスクリプトが削除されます。

または、App_Startフォルダーのバンドル構成にjqGridスクリプト参照を追加してから、ビューからスクリプトタグを削除します。

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>
于 2012-12-28T19:17:14.223 に答える