CODEWITHSUNDEEP
c#asp.net-mvc
Daniel
Daniel

Reputation: 150

JQuery UI in ASP.NET MVC5 not working

I have a MVC5 web application using both bootstrap and jquery and jqueryval, all working fine. I installed the JQuery UI package from nuget and modified my BundleConfig and layout as follow further down, problem is when for e.g adding a slider like, it does not display anything but the jquery-class is correcly added as an attribute.

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

In my view I have this in the head-tag

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

And this in the View, just before the tag 

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

The slider is implemented with:

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

and script in header:

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

This HTML is rendered after I removed the @Scripts.Render("~/bundles/jquery") from the header having it only i the body.

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

Upvotes: 3

Views: 1882

Answers (1)

C Bauer
C Bauer

Reputation: 5103

You declared a @Scripts.Render("~/bundles/jquery") in both views, one is going to cause the other to fail. Only declare the script.render once (that includes when/if you are using a layout).

Upvotes: 1

Related Questions