Geek Answers Handbook

ASP.NET MVC 5 does not pass jQuery UI CSS bundle

I am trying to include a jQuery UI CSS project in a project. I have all the necessary files in my ~/Content/themes directory and configure 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 emitted HTML (note the missing 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 is my solution structure:

enter image description here

What am I missing?

+7
jquery css jquery-ui asp.net-mvc
source share
1 answer

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

For example, you use jquery.ui.core.css in BundleConfig , but the file in Solution Explorer is called core.css .

+24
source share

More articles:


All Articles