jQuery DataTable nie będzie działać w ASP.NET MVC?

Question

Mam plik index.cshtml z prostą tabelą. Pobrałem plik css i plik min js dla wtyczki dataTable. I umieścić następujący kod w 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")); 
     } 

W moim _Layout.cshtml, mam to:

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

Wreszcie w moim index.cshtml, umieścić następujący kod powyżej moim stole :

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

zauważyłem kiedy uruchomić stronę z tabelą i przeglądać źródła, widzę plik jquery na dole i mojego skryptu na górze, więc pojawia się błąd:

Uncaught ReferenceError: $ is not defined

Czy BundleConfig jest właściwym miejscem do dodawania nowych plików js i css? Jak mam to zrobić, jeśli nie chcę, aby tam był? Dlaczego skrypt jquery jest uruchamiany u dołu strony?

I dodaje następujące do _Layout.cshtml:

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

ale teraz mam ten błąd:

Uncaught TypeError: Object [object Object] ma metodę 'dataTable'

Kiedy Widzę źródło, widzę, że nie ma pliku dataTables.min.js, ale umieściłem go w pakietach/tabeli.

Answer 1

Domyślnie jeśli Debug = "True" w pliku web.config, zminimalizowane pliki javascript nie są wliczone w wiązkach. Dodaj to do swojego BundleConfig.cs (lub używać non-minified pliku JavaScript lub uruchomić w trybie non-debug):

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

Dodatkowe informacje: Bundler not including .min files

Answer 2

Modernizator po wyjęciu z pudełka z projektem asp.net MVC nie ma nic wspólnego z jQuery.

Chciałbym zaktualizować twoje pakunki, więc masz jedną dla jQuery i jedną dla wtyczek jQuery, lub taką, która robi obie. na przykład

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

Jeśli dodasz dodatkowe wtyczki jQuery, po prostu zarejestruj je w pakiecie jQueryPlugins.

Następnie upewnij się, że w twoim wydaniu You Renderuj pakiet jQuery jako pierwszy.

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

W ten sposób wiesz, że zawsze masz jQuery włączone przed wtyczkami.

Uwaga

Również upewnić się, że masz skrypty wydanego przed kodu jQuery, który jest na stronie. na przykład

@Scripts.Render("...") 

Przed

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