Jquery-UI control not showing in MVC

Question

I am a newb in using jquery in MVC, please bear with me. I cannot seem to display the jquery-ui slider control in my mvc page. I have tried to implement the following articles which I have found on the web:

However, when I run the code, nothing shows. I have created a small little test project, and am trying to implement the slider on the about page. Here is my code:

In the 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>
}

In the BundleConfig.cs file:

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"
              ));
        }
    }
}

In the Global.asax.cs file:

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);
        }
    }
}

and in the _Layout.cshtml file:

<!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>

I have also created a screenshot of my Solution Explorer in case it may help:

Solution Explorer screenshot

I think it must be something small, but I am struggling to find the problem. I would appreciate it if anyone can point out what I should change in order to see and use the jquery-ui slider, or any other jquery controls in my site.

score 0 · Answer 1 · answered Jan 05 '16 at 10:14

I found my mistake. I did not add/include the Jquery-ui.css file in the content folder. Once it was included I could see the Jquery control.

The link below explained and helped a lot in finding my mistake: asp-net-mvc-4-jquery-datepicker

Hopefully this post can help someone else too.

Jquery-UI control not showing in MVC

1 Answers1