jQuery DataTableはASP.NET MVCでは動作しませんか？

Question

私は単純なテーブルを持つindex.cshtmlファイルを持っています。私は、dataTableプラグインのCSSファイルと最小jsファイルをダウンロードしました。

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

は最後に、私のindex.cshtmlに、私は私のテーブルの上に次のコードを置く：私はこれを持って、私の_Layout.cshtmlで

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")); 
     } 

：私はBundleConfig.csに次のコードを置きます：

<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はそこにはないのがわかりますが、バンドル/テーブルに含めました。

Answer 1

前

@Scripts.Render("...") 

デフォルトでは、あなたのweb.configファイルでデバッグ= "true" を持っている場合、最小限のJavaScriptファイルがバンドルに含まれていません。 BundleConfigにこれを追加してください。CS（または非縮小さジャバスクリプトファイルを使用するか、または非デバッグモードで実行）：

#if DEBUG 
      //by default all minimized files are ignored in DEBUG mode. This will stop that. 
      bundles.IgnoreList.Clear(); 
#endif 

追加情報：あなたのページにjQueryを含まないBundler not including .min files

Answer 2

asp.net MVCプロジェクトの最新版は、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のコードの前にレンダリングされていることを確認してください。例えば

$(document).ready(function(){ .... }