jQuery DataTable sẽ không hoạt động trong ASP.NET MVC?

Question

Tôi có tệp index.cshtml với một bảng đơn giản. Tôi đã tải xuống tệp css và tệp min js cho plugin dataTable. Tôi đặt đoạn mã sau vào 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")); 
     } 

Trong _Layout.cshtml của tôi, tôi có điều này:

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

Cuối cùng, trong index.cshtml của tôi, tôi đặt đoạn mã sau trên bàn của tôi :

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

tôi nhận thấy khi tôi chạy trang với bảng và xem mã nguồn, tôi thấy các tập tin jquery ở phía dưới và kịch bản của tôi ở phía trên, vì vậy tôi nhận được lỗi:

Uncaught ReferenceError: $ is not defined

Là BundleConfig có đúng chỗ để thêm tệp js và css mới không? Làm thế nào để làm điều đó nếu tôi không muốn nó ở đó? Tại sao kịch bản jquery chạy ở cuối trang?

tôi đã thêm dòng sau vào _Layout.cshtml:

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

nhưng bây giờ tôi nhận được lỗi này:

lỗi chưa gặp: Object [đối tượng Object] không có phương pháp 'DataTable'

Khi Tôi xem nguồn, tôi thấy dataTables.min.js không có ở đó, nhưng tôi đã bao gồm nó trong các bó/bảng.

Answer 1

Theo mặc định nếu bạn đã Debug = "True" trong web.config của bạn, giảm thiểu các file javascript không bao gồm trong gói. Thêm cái này vào BundleConfig của bạn.cs (hoặc sử dụng một tổ chức phi minified tập tin javascript, hoặc chạy ở chế độ không debug):

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

Thông tin thêm: Bundler not including .min files

Answer 2

Trình hiện đại hóa, ngoài hộp với dự án MVC asp.net, không liên quan gì đến jQuery.

Tôi sẽ cập nhật các gói của bạn để bạn có một cho jQuery và một cho các plugin jQuery, hoặc một cho cả hai. ví dụ.

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

Nếu bạn thêm bất kỳ plugin jQuery bổ sung nào, thì chỉ cần đăng ký chúng với gói jQueryPlugins.

Sau đó, hãy đảm bảo rằng trong _Layout bạn Render gói jQuery trước tiên.

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

Bằng cách này bạn biết bạn luôn có jQuery được bao gồm trước các plugin.

Note

Ngoài ra hãy chắc chắn rằng bạn có kịch bản của bạn trả lại trước khi mã jQuery của bạn mà là trên trang của bạn. ví dụ.

@Scripts.Render("...") 

Trước

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