ASP.NET MVC 5 not rendering jQuery UI CSS bundle

Question

I am trying to include the jQuery UI CSS theme bundle in my project. I have all the required files in my ~/Content/themes directory, and set up my BundleConfig.cs as follows:

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

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

My _Layout.cshtml has the following <head>:

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title</title>
    <link href="//fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet" type="text/css">
    @Styles.Render("~/Content/themes/base/css", "~/Content/css", "~/Content/datepicker3.css")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryui")
    @Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/Content/bootstrap-datepicker.js")
    @RenderSection("head", required: false)
    <link rel="icon" href="@Url.Content("~/Content/favicon.ico")" />
</head>

However, this is the HTML that's emitted (note the absent jQuery CSS theme):

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link href="//fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet" type="text/css">
    <link href="/PackageManager/Content/bootstrap.css" rel="stylesheet"/>
    <link href="/PackageManager/Content/site.css" rel="stylesheet"/>
    <link href="/PackageManager/Content/datepicker3.css" rel="stylesheet"/>
    <script src="/PackageManager/Scripts/jquery-1.10.2.js"></script>
    <script src="/PackageManager/Scripts/jquery-ui-1.11.3.js"></script>
    <script src="/PackageManager/Scripts/bootstrap.js"></script>
    <script src="/PackageManager/Scripts/respond.js"></script>
    <script src="/PackageManager/Scripts/modernizr-2.6.2.js"></script>
    <script src="/PackageManager/Content/bootstrap-datepicker.js"></script>    
    <link rel="icon" href="/PackageManager/Content/favicon.ico" />
</head>

Here's my solution structure:

enter image description here

What am I missing?

Sam · Accepted Answer · 2015-03-03 20:53:13Z

26

Unless I'm missing something, it looks like none of your files are prefixed with jquery.ui., but in your BundleConfig they are.

For example, you're using jquery.ui.core.css in BundleConfig, but the file in your Solution Explorer is named core.css.

answered Mar 3, 2015 at 20:53

Sam

5,0144 gold badges32 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mark Richman Over a year ago

That's what I get for using someone else's code ;) Thanks!

Jim Evans Over a year ago

EXCELLENT !! I was having the exact same problem and this fixed it - kudos @Sam bump up

Collectives™ on Stack Overflow

ASP.NET MVC 5 not rendering jQuery UI CSS bundle

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related