JQuery UI 在 Scripts.Render 之后无法在 MVC 4 中工作？

Question

不确定这里出了什么问题。我已经阅读了一些其他解决方案并尝试使用它们，但似乎没有任何效果。我想做的就是渲染一个日期选择器。我以前已经做过很多次了，只是不确定我是否有大脑故障，因为过去几周我一直处于“关键”时间，或者什么。

1. 我有最新的 JQuery (1.9.1)、最新的 JQuery UI (1.10.2)。

2. 我检查了 BundleConfig，一切似乎都很好:

           bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                   "~/Scripts/jquery-{version}.js"));
   
       bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                   "~/Scripts/jquery-ui-{version}.js"));
   
       bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                   "~/Scripts/jquery.unobtrusive*",
                   "~/Scripts/jquery.validate*"));
   
       // Use the development version of Modernizr to develop with and learn from. Then, when you're
       // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
       bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                   "~/Scripts/modernizr-*"));
   
       bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));
   
       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"));
   

3. 我已经设置了 _Layout.cshtml header :

       @Styles.Render("~/Content/css")
       @Scripts.Render("~/bundles/modernizr")
       @Scripts.Render("~/bundles/jquery")
       <script>
           $(function () {
               $("#datepicker").datepicker();
           });
       </script>
   

然后在正文中添加另一个 Scripts.Render("~/bundles/jquery") 。然而，当我添加日期选择器时，什么也没有发生......我只是得到一个文本框。

我也尝试过:

• 在 header 中手动添加脚本引用
• 添加 jquery ui 演示中提供的 jquery 脚本引用(网址)

什么都没有...我的意思是什么都不起作用。我已经仔细检查了我的文件路径，它们是正确的......我错过了什么？!

Answer 1

我遇到了完全相同的问题，一直摇头直到找到解决方案:http://forums.asp.net/t/1879457.aspx

简而言之:

• 样式应在页面head中使用@Styles.Render进行渲染。
• 至少在我的代码中，只有 jquery 包包含在页面头中(使用 @Scripts.Render)。
• 所有其他脚本(又是jquery，jquery UI等)应该使用@Scripts.Render在页面正文中结束正文标记之前进行渲染...<

页面以这样的代码结束:

     @Scripts.Render("~/bundles/jquery")
     @Scripts.Render("~/bundles/jqueryui")

     @Scripts.Render("~/bundles/jqueryval")
     @Scripts.Render("~/bundles/modernizr")
     @RenderSection("scripts", required: false)
 </body>

这样我就可以让 jquery IU 工作了!