MVC4 - 滑块的 JQueryUI Html Helper 正在呈现但不可见答案

【问题标题】：MVC4 - JQueryUI Html Helper for a slider is rendering but isn't visibleMVC4 - 滑块的 JQueryUI Html Helper 正在呈现但不可见
【发布时间】：2013-04-05 15:43:01
【问题描述】：

我在我的 MVC4 应用程序中使用 jQuery UI Helpers：

<div class="span6">
    @Html.JQueryUI().SliderFor(x => x.WantsStudentWeighting).Min(1).Max(10)
</div>

当我运行我的应用程序时，滑块在那里，但不是 100% 可见。我知道它在那里，因为当我在滑块所在的区域内和周围单击并沿比例移动它时，我可以看到滑块手柄 - 加权值也会发生变化。这是证据：

我所有的脚本和 css 文件都在那里。我试图编辑 jqueryui.slider.css 文件但无济于事。我还更改了包含 DIV 的背景颜色，以确保滑块没有呈现为白色。

我的想法已经用完了 - 一些帮助将不胜感激。

【问题讨论】：

你能看到哪个类隐藏了它吗？
你的意思是一种css风格会覆盖另一种吗？我可以检查 Chrome 中的元素吗？

标签： c# jquery-ui razor asp.net-mvc-4 html-helper

【解决方案1】：

在 BundleConfig 文件中为 jquery-ui.unobtrusive-x.y.z.js 创建一个新包。也可以将它添加到 jQuery UI 包中，以便在引用 jQuery UI 时始终包含它。以下示例演示了这一点。

    bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
            "~/Scripts/jquery-ui-{version}.js",
            "~/Scripts/jquery-ui.unobtrusive-{version}.js"));

在布局页面或需要它们的视图上渲染包。像这样添加 jQuery UI CSS 文件：

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

还有 JavaScript 文件：

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

捆绑包会自动处理版本号，因此您在升级包时不必担心它们。

如果您使用客户端验证，请在 jQuery UI Helpers 脚本之前添加验证脚本。 More info.

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

希望对你有帮助

【讨论】：