Scripts.Render 之后 JQuery UI 在 MVC 4 中不起作用？答案

【问题标题】：JQuery UI not working in MVC 4 after Scripts.Render?Scripts.Render 之后 JQuery UI 在 MVC 4 中不起作用？
【发布时间】：2013-03-10 05:16:32
【问题描述】：

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

我有最新的 JQuery (1.9.1)，最新的 JQuery UI (1.10.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"));

我已经设置了 _Layout.cshtml 标头：

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

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

我也试过了：

在标题中手动添加脚本引用
添加在 jquery ui 演示中提供的 jquery 脚本参考（网址）

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

【问题讨论】：

如果您发现任何错误，您可以在控制台中检查吗？
你好像没有渲染~/bundles/jqueryui，而只是~/bundles/jquery
我发现引导程序可能与 jquery 一起工作不好，对不起我的英语。这是链接blogs.msdn.com/b/webdev/archive/2013/08/01/…

标签： jquery asp.net-mvc-4

【解决方案1】：

您为 jQuery ui 制作了一个捆绑包，但尚未在页面中设置引用。在您的 jQuery 捆绑包引用之后和创建日期选择器之前添加一个引用。您是否将日期选择器设置为 id 或类？现在您将其设置为 id。如果你给你的文本框一个 datepicker 类，请使用 jQuery 的类选择器。

【讨论】：

我在头部添加了@Scripts.Render("~/bundles/jqueryui")（是的，忘记了），但仍然没有。我也将它添加到正文中，但这也不起作用。奇怪的是，没有错误或警告......
你能发布你的 html 还是只发布应该获得 datepicker 的部分？你在 jQuery 之后添加了 jQuery 吗？也可以尝试 Ctrl + F5 进行硬刷新。
请参阅我的博客对 datepicker 的本地化支持：locktar.wordpress.com/2012/09/10/localization-validation-in-mvc

【解决方案2】：

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

简而言之：

styles 应该在页面 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 工作了！

【讨论】：