ASP.NET MVC 5不渲染jQuery UI CSS包 [英] ASP.NET MVC 5 not rendering jQuery UI CSS bundle
本文介绍了ASP.NET MVC 5不渲染jQuery UI CSS包的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想在我的项目中包含jQuery UI CSS主题包。我有我的〜/ Content / themes 目录中的所有必需的文件，并设置我的 BundleConfig.cs 如下：
public class BundleConfig
{
//有关绑定的详细信息，请访问http：// go.microsoft.com/fwlink/?LinkId=301862
public static void RegisterBundles（BundleCollection bundles）
{
bundles.Add（new ScriptBundle（〜/ bundles / jquery）。 （
〜/ 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 *））;
//使用Modernizr的开发版本开发和学习。然后，当你
//准备好生产时，使用http://modernizr.com上的构建工具，只挑选你需要的测试。
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 .bender / base / jquery.ui.datepicker.css，
〜/ Content / themes / base / jquery.ui.tabs.css
〜/ Content / themes / base / jquery.ui.progressbar.css，
〜/ Content / themes / base / jquery.ui.theme.css））;
}
}
我 _Layout.cshtml 具有以下< head> ：
< head>
< meta charset =utf-8/>
< meta name =viewportcontent =width = device-width，initial-scale = 1.0>
< title> @ ViewBag.Title< / title>
< link href =// fonts.googleapis.com/css?family=Open+Sans:300,400 =stylesheettype =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 =iconhref =@ Url.Content（〜/ Content / favicon.ico）/>
< / head>但是，这是发射的HTML（注意缺少jQuery CSS主题）： < head>
< meta charset =utf-8/>
< meta name =viewportcontent =width = device-width，initial-scale = 1.0>
< title>< / title>
< link href =// fonts.googleapis.com/css?family=Open+Sans:300,400 =stylesheettype =text / css>
< link href =/ PackageManager / Content / bootstrap.css =stylesheet/>
< link href =/ PackageManager / Content / site.css =stylesheet/>
< link href =/ PackageManager / Content / datepicker3.css =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 =iconhref =/ PackageManager / Content / favicon.ico/>
< / head>
这里是我的解决方案结构：
img src =https://i.stack.imgur.com/f1V5A.pngalt =enter image description here>
我缺少什么？ / p>
解决方案除非我缺少一些东西，看起来没有你的文件前缀有 jquery.ui 。，但在 BundleConfig 中。
使用 BundleConfig 中的 jquery.ui.core.css ，但是解决方案资源管理器中的文件名为 core.css 。
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?
解决方案 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.
这篇关于ASP.NET MVC 5不渲染jQuery UI CSS包的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
