6

簡単なテーブルを含む index.cshtml ファイルがあります。dataTable プラグインの css ファイルと min js ファイルをダウンロードしました。BundleConfig.cs に次のコードを追加します。

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

 bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                        "~/Content/themes/base/jquery.ui.core.css",
                        "~/Content/themes/base/jquery.ui.resizable.css",
                        "~/Content/themes/base/jquery.ui.selectable.css",
                        "~/Content/themes/base/jquery.ui.accordion.css",
                        "~/Content/themes/base/jquery.ui.autocomplete.css",
                        "~/Content/themes/base/jquery.ui.button.css",
                        "~/Content/themes/base/jquery.ui.dialog.css",
                        "~/Content/themes/base/jquery.ui.slider.css",
                        "~/Content/themes/base/jquery.ui.tabs.css",
                        "~/Content/themes/base/jquery.ui.datepicker.css",
                        "~/Content/themes/base/jquery.ui.progressbar.css",
                        "~/Content/themes/base/jquery.ui.theme.css",
                        "~/Content/themes/base/jquery.dataTables.css"));
        }

私の_Layout.cshtmlには、これがあります：

@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/table")

最後に、index.cshtml で、テーブルの上に次のコードを配置します。

<script type="text/javascript">
    $(document).ready(function () {
        $('#patients').dataTable();
    });
    </script>

テーブルを使用してページを実行し、ソースを表示すると、jquery ファイルが下部に表示され、スクリプトが上部に表示されるため、次のエラーが表示されることに気付きました。

Uncaught ReferenceError: $ is not defined

BundleConfig は、新しい js および css ファイルを追加する正しい場所ですか? そこに置きたくない場合はどうすればよいですか？ページの下部で jquery スクリプトが実行されるのはなぜですか?

_Layout.cshtml に以下を追加しました。

@Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/table")

しかし今、私はこのエラーを受け取ります:

キャッチされていない TypeError: オブジェクト [オブジェクト オブジェクト] にメソッド 'dataTable' がありません

ソースを表示すると、dataTables.min.js が存在しないことがわかりますが、bundles/table に含めています。

4

2 に答える 2

1

asp.net MVC プロジェクトですぐに使える Modernizer は、jQuery とは何の関係もありません。

バンドルを更新して、jQuery 用と jQuery プラグイン用、または両方を実行できるようにします。例えば

bundles.Add(new ScriptBundle("~/bundles/jQuery").Include(
                        "~/Scripts/jquery-{version}.min.js"));
bundles.Add(new ScriptBundle("~/bundles/jQueryPlugins").Include(
                        "~/Scripts/jquery.dataTables.min.js"));

追加の jQuery プラグインを追加する場合は、それらを jQueryPlugins バンドルに登録するだけです。

次に、_Layout で最初に jQuery バンドルをレンダリングするようにします。

@Scripts.Render("~/bundles/jQuery")
@Scripts.Render("~/bundles/jQueryPlugins")

このようにして、プラグインの前に常に jQuery が含まれていることがわかります。

ノート

また、ページにある jQuery コードの前にスクリプトがレンダリングされていることを確認してください。例えば

@Scripts.Render("...")

前

$(document).ready(function(){ .... }
于 2013-04-26T20:08:42.810 に答える