c# - ASP.NET MVC5 中的 JQuery UI 无法正常工作

Question

我有一个同时使用 bootstrap 和 jquery 和 jqueryval 的 MVC5 网络应用程序，一切正常。我从 nuget 安装了 JQuery UI 包并修改了我的 BundleConfig 和布局，如下所示，问题是当例如添加一个 slider 时，它不显示任何东西，但 jquery 类被正确地添加为一个属性。

public class BundleConfig
{
    // For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
    public static void RegisterBundles(BundleCollection bundles)
    {
        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.validate*").Include(
                    "~/Scripts/jquery.validate.unobtrusive.js"));

        // 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 ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/bootstrap.js",
                  "~/Scripts/respond.js"));

        bundles.Add(new StyleBundle("~/Content/css").Include(
                  "~/Content/bootstrap.css",
                  "~/Content/site.css",
                  "~/Content/customSite.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"));
    }
}

在我看来，我在 head-tag 中有这个

@Styles.Render("~/Content/css")
@Styles.Render("~/Content/themes/base/css")
@Scripts.Render("~/bundles/jquery")

这个在 View 中，就在标签之前

@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/modernizr")
@RenderSection("scripts", required: false)

slider 是通过以下方式实现的:

<div id="slider"></div>

和标题中的脚本:

@section scripts
{
<script>
    $(function() {
        $( "#slider" ).slider();
    });
</script>
}

此 HTML 是在我从 header 中删除 @Scripts.Render("~/bundles/jquery") 后呈现的，只有它在正文中。

<div class="panel-foodbrain border-bottom margin-top-100" style="height: 200px;">

<div id="slider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">

<span class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0" style="left: 0%;"></span></div>


</div>

Answer 1

您在两个 View 中都声明了一个 @Scripts.Render("~/bundles/jquery")，一个将导致另一个失败。只声明 script.render 一次(包括何时/是否使用布局)。