Jquery-UI 控件未在 MVC 中显示答案

【问题标题】：Jquery-UI control not showing in MVCJquery-UI 控件未在 MVC 中显示
【发布时间】：2016-04-06 01:04:55
【问题描述】：

我是在 MVC 中使用 jquery 的新手，请多多包涵。我似乎无法在我的 mvc 页面中显示 jquery-ui 滑块控件。我已尝试实施我在网上找到的以下文章：

但是，当我运行代码时，什么都没有显示。我创建了一个小型测试项目，并尝试在 about 页面上实现滑块。这是我的代码：

在 About.cshtml 中：

@{
   ViewBag.Title = "About";
}

<h2>@ViewBag.Title.</h2>
<h3>@ViewBag.Message</h3>

<p>Use this area to provide additional information.</p>

<div   style="border: none; height: 20px;" id="slider">    
</div>

@section Scripts{
<script type="text/javascript">
    $(document).ready(function () {
        $("#slider").slider();
    });
</script>
}

在 BundleConfig.cs 文件中：

using System.Web;
using System.Web.Optimization;

namespace TestApp
{
    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-1.10.2.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
            "~/Scripts/jquery-ui-1.11.4.js"));

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

            bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/site.css"));            

            bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                        "~/Content/themes/base/jquery-ui.css",
                        "~/Content/themes/base/jquery-ui.all.css"
              //"~/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"
              ));
        }
    }
}

在 Global.asax.cs 文件中：

using System.Web.Mvc;
using System.Web.Optimization;
using System.Web.Routing;

namespace TestApp
{
    public class MvcApplication : System.Web.HttpApplication
    {
        protected void Application_Start()
        {
            AreaRegistration.RegisterAllAreas();
            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
            RouteConfig.RegisterRoutes(RouteTable.Routes);
            BundleConfig.RegisterBundles(BundleTable.Bundles);
        }
    }
}

在 _Layout.cshtml 文件中：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
   
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryui")
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>  
  
    @Styles.Render("~/Content/themes/base/css")    
    @RenderSection("scripts", required: false)
</body>
</html>

我还创建了我的解决方案资源管理器的屏幕截图以防万一：

Solution Explorer screenshot

我认为这一定是小问题，但我正在努力寻找问题所在。如果有人能指出我应该更改什么以便查看和使用 jquery-ui 滑块或我网站中的任何其他 jquery 控件，我将不胜感激。

【问题讨论】：

标签： asp.net-mvc jquery-ui

【解决方案1】：

我发现了我的错误。我没有在内容文件夹中添加/包含 Jquery-ui.css 文件。包含它后，我可以看到 Jquery 控件。

下面的链接解释并帮助我发现了我的错误： asp-net-mvc-4-jquery-datepicker

希望这篇文章也能对其他人有所帮助。

【讨论】：