jQuery DataTable이 ASP.NET MVC에서 작동하지 않습니까?

Question

나는 간단한 테이블을 가진 index.cshtml 파일을 가지고있다. dataTable 플러그인에 대한 css 파일과 min js 파일을 다운로드했습니다. 내가 BundleConfig.cs에 다음 코드를 넣어 :

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

을, 나는 이것이이 :

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

나는 테이블과 페이지를 실행하고 소스를 볼 때, 나는 하단과 상단에 내 스크립트에서 JQuery와 파일을 참조하십시오, 그래서 나는이 오류가 발견

:

,691

Uncaught ReferenceError: $ is not defined

은 BundleConfig 새로운 JS 및 CSS 파일을 추가 할 수있는 올바른 장소인가? 내가 그곳에 있기를 원하지 않으면 어떻게해야합니까? jquery 스크립트가 페이지 맨 아래에서 실행되는 이유는 무엇입니까?

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

을하지만 지금은이 오류를 얻을 :

catch되지 않은 형식 오류 : 개체 [개체 개체]있는 방법이 없습니다 '데이터 테이블'

가 나는 _Layout.cshtml에 다음과 같은 추가 나는 소스를보고, dataTables.min.js가 거기 있지 않다는 것을 알았지 만, 그것을 묶음/테이블에 포함시켰다.

Answer 1

하기 전에이 디버그 당신의 Web.config에서 = "true"로 최소화 자바 스크립트 파일은 번들에 포함되지 않습니다 당신이 한 경우. BundleConfig에 추가하십시오.CS (또는 비 축소 된 자바 스크립트 파일을 사용하여, 또는 비 디버그 모드에서 실행) :

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

추가 정보 : Bundler not including .min files

Answer 2

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(){ .... }