9

本当に単純なモーダル ダイアログを実行したいと考えています。したがって、チュートリアルに従って、次のコードになります。

バンドル構成:

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-1.8.2.min.js"));

bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                    "~/Scripts/jquery-ui-1.8.24.js"));

_レイアウト：

<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title - My ASP.NET MVC Application</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryui")

</head>
<body>
   <div id="body">
        @RenderSection("featured", required: false)
        <section class="content-wrapper main-content clear-fix">
            @RenderBody()
        </section>
    </div>
    <footer>
        <div class="content-wrapper">
            <div class="float-left">
                <p>&copy; @DateTime.Now.Year - My ASP.NET MVC Application</p>
            </div>
        </div>
    </footer>


    @RenderSection("scripts", required: false)
</body>

とインデックス:

@section featured {
<section class="featured">
    <div class="content-wrapper">
        <hgroup class="title">
            <h1>@ViewBag.Title.</h1>
            <h2>@ViewBag.Message</h2>
        </hgroup>
        <script type="text/javascript">
            $( "#dialog-form" ).dialog({
                autoOpen: false,
                height: 300,
                width: 350,
                modal: true,
                buttons: {

                    Cancel: function() {
                        $( this ).dialog( "close" );
                    }
                },
                close: function() {
                    allFields.val( "" ).removeClass( "ui-state-error" );
                }
            });

            $( "#create-user" )
              .button()
              .click(function() {
                  $( "#dialog-form" ).dialog( "open" );
              });

        </script>

        <div style="float: left; width: 250px;">
            <button id="create-user">Create new user</button>
        </div>

    </div>
</section>
}

ただし、実行すると 0x800a1391 - JavaScript ランタイム エラー: 'jQuery' が未定義で、jquery-ui ライブラリ内にあります。コードを html ページに配置するだけで、期待どおりに動作します。したがって、問題は MVC プロジェクトに由来します。Windows 8 で Visual Studio 2012 を使用しています。

4

5 に答える 5

10

デフォルトでは、MVC バンドラーはファイル名に が含まれるファイルを無視し.minます。

縮小されていないバージョンの jQuery を使用して問題を修正します (または、ファイルの名前を変更するだけです)。デプロイすると、バンドラーはとにかく jQuery ファイルを縮小します。

アップデート

IgnoreListメソッド内のをクリアすることで、この動作を変更できますRegisterBundles(ただし、デフォルトのままにして、ファイルの名前を変更することをお勧めします)。

// Clear all items from the ignore list to allow minified CSS and JavaScript 
// files in debug mode
bundles.IgnoreList.Clear();    

// Add back the default ignore list rules sans the ones which affect minified 
// files and debug mode
bundles.IgnoreList.Ignore("*.intellisense.js");
bundles.IgnoreList.Ignore("*-vsdoc.js");
bundles.IgnoreList.Ignore("*.debug.js", OptimizationMode.WhenEnabled);

詳細については、Telerik のドキュメントを参照してください。

于 2013-07-16T09:26:57.667 に答える
10

このエラーが発生したときに遭遇した問題は、次のステートメントがドキュメントの中になく、ドキュメントの最後のタグの<head>直前にあるという事実によるものでした。</body>

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

それらを<head>.cshtml ファイルに移動すると、すべて正常に機能しました。

于 2013-11-18T21:35:08.723 に答える
5

そのようにスクリプトの周りに @section スクリプトを使用するだけです

@section scripts
  {
   <script>
    $(function () {



        });

    });

  </script>
}
于 2014-05-19T20:47:35.573 に答える
2

私はこれに約1時間苦労しました.ほとんどすべての解決策は、スクリプトを呼び出す順序と方法に帰着します. バンドラーが問題を引き起こしていることがわかりました(私にとっては ui バンドラーでした)

これが私のために働いた順序です。

    <script src="/Scripts/modernizr-2.5.3.js"></script>
    <script src="/Scripts/jquery-1.7.1.js"></script>
    <script src="/bundles/jquery-ui"></script>
    <script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
    <script src="/Scripts/jquery.validate.js"></script>
    <script src="/Scripts/jquery.validate.unobtrusive.js"></script>
于 2014-03-19T23:17:22.200 に答える