Menu
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:
What am I missing?
599
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.
85
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
