jQuery DataTable funktioniert nicht in ASP.NET MVC?

Question

Ich habe eine index.cshtml Datei mit einer einfachen Tabelle. Ich habe die CSS-Datei und die Min-js-Datei für das DataTable-Plugin heruntergeladen. Ich habe den folgenden Code in 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")); 
     } 

In meinem _Layout.cshtml, ich habe dies:

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

schließlich in meinem index.cshtml, habe ich den folgenden Code über meinem Tisch :

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

ich dann bemerkt, wenn ich die Seite mit der Tabelle und sehen Sie die Quelle laufen, ich die jquery-Datei am unteren Ende und mein Skript an der Spitze zu sehen, so dass ich den Fehler:

Uncaught ReferenceError: $ is not defined

Ist BundleConfig der richtige Ort, um neue js und CSS-Dateien hinzuzufügen? Wie mache ich es, wenn ich nicht will, dass es da ist? Warum wird jquery-Skript am Ende der Seite ausgeführt?

Ich habe die folgenden _Layout.cshtml:

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

aber jetzt bekomme ich diesen Fehler:

Uncaught Typeerror: Object [object Object] hat keine Methode 'Datatable'

Wenn Ich sehe die Quelle, ich sehe die dataTables.min.js ist nicht da, aber ich habe es in Bundles/Tabelle aufgenommen.

Answer 1

standardmäßig wenn Sie Debug = "True" in Ihrer web.config, minimiert Javascript-Dateien werden nicht in Bündeln enthalten. Fügen Sie dies Ihrer BundleConfig hinzu.cs (oder verwenden Sie eine nicht-minimierte JavaScript-Datei oder in einer Nicht-Debug-Modus laufen):

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

Zusätzliche Informationen: Bundler not including .min files

Answer 2

Modernisierer, aus der Box mit einem MVC-Projekt asp.net, hat nichts mit jQuery zu tun.

Ich würde Ihre Bundles aktualisieren, so dass Sie einen für jQuery und einen für jQuery-Plugins haben, oder einen, der beides tut. z.B.

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

Wenn Sie weitere jQuery Plugins hinzufügen, dann registrieren sie nur mit dem jQueryPlugins Bündel.

Dann stellen Sie sicher, dass Sie in Ihrem _Layout zuerst das jQuery-Bundle rendern.

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

Auf diese Weise wissen Sie, dass Sie immer jQuery vor den Plugins enthalten haben.

Hinweis

auch sicher, dass Sie Ihre Skripte vor Ihrem jQuery-Code gemacht haben, die auf Ihrer Seite ist. z.B.

@Scripts.Render("...") 

Vor

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