在 MVC 5 中使用捆绑和缩小的 IgniteUI 资源时找不到资源
Resource not found When using Bundled & Minified IgniteUI Resources in MVC 5
我有一个使用 Infragistics IgniteUI 的 ASP.Net MVC 5 项目。当我使用捆绑和缩小的基础设施脚本和样式表加载 igniteui 图表或网格时,出现错误。当我使用非捆绑版本时,我没有收到错误。
更新 我也试过在禁用缩小的情况下进行捆绑,但仍然会产生错误。
为什么我使用捆绑文件时它会在 /bundles/
路径中寻找图像?
我可以做些什么来防止在使用捆绑时出现这些错误?
错误
The controller for path '/bundles/images/ui-icons_888888_256x240.png' was not found or does not implement IController.
The controller for path '/bundles/images/igLoadingSmall.gif' was not found or does not implement IController.
捆绑配置
#region Scripts
...
bundles.Add(new ScriptBundle("~/bundles/igniteui_full_js").Include(
"~/Scripts/IgniteUI/js/infragistics.core.js",
"~/Scripts/IgniteUI/js/infragistics.dv.js",
"~/Scripts/IgniteUI/js/infragistics.lob.js",
"~/Scripts/IgniteUI/js/infragistics.loader.js"
));
#endregion
#region Styles
...
bundles.Add(new StyleBundle("~/bundles/igniteui_full_css").Include(
"~/Content/IgniteUI/css/themes/infragistics/infragistics.theme.css",
"~/Content/IgniteUI/css/structure/infragistics.css"
));
#endregion
Layout Head Razor 代码
<!-- Header Styles-->
@Styles.Render(
"~/bundles/css",
"~/bundles/igniteui_full_css"
)
<!-- Header Scripts-->
@Scripts.Render(
"~/bundles/jquery",
"~/bundles/ajax",
"~/bundles/modernizr",
"~/bundles/bootstrap",
"~/bundles/site",
"~/bundles/igniteui_full_js"
)
Unbundled Head - 不会产生错误
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Header Styles-->
<link href="/Content/bootstrap-multiselect.css" rel="stylesheet"/>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<link href="/Content/Dashboard.css" rel="stylesheet"/>
<link href="/Content/IgniteUI/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"/>
<link href="/Content/IgniteUI/css/structure/infragistics.css" rel="stylesheet"/>
<!-- Header Scripts-->
<script src="/Scripts/jquery-2.2.0.js"></script>
<script src="/Scripts/jquery-ui-1.11.4.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="/Scripts/validator.js"></script>
<script src="/Scripts/jquery.browser.mobile.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<script src="/Scripts/bootstrap-multiselect.js"></script>
<script src="/Scripts/site.js"></script>
<script src="/Scripts/IgniteUI/js/infragistics.core.js"></script>
<script src="/Scripts/IgniteUI/js/infragistics.dv.js"></script>
<script src="/Scripts/IgniteUI/js/infragistics.lob.js"></script>
<script src="/Scripts/IgniteUI/js/infragistics.loader.js"></script>
</head>
捆绑头 - 产生错误
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Header Styles-->
<link href="/bundles/css?v=DOErVhQffVVJij5tRivXIDYvvea9XjXYoWkD6iph4yo1" rel="stylesheet"/>
<link href="/bundles/igniteui_full_css?v=oMN-4N9H6hCThCn7D6WHIiusJgqj7Qk9KfeKje7iGdI1" rel="stylesheet"/>
<!-- Header Scripts-->
<script src="/bundles/jquery?v=3wcNYlWV3nKyr3gSm0Ry9LrwfpXaysXErYMcQN9fkcw1"></script>
<script src="/bundles/ajax?v=jmjhTWiGrUMlGQS2hayanNTeGVZ9FC7i0HnCBpQ4IZ81"></script>
<script src="/bundles/modernizr?v="></script>
<script src="/bundles/bootstrap?v=kNIhecyepPMk8f_DFvoGkBz2T4zIItHFFHq2488ZHwY1"></script>
<script src="/bundles/site?v=stk1SwAEJZvoHt7p5QZ9202zmQ1IeBvXWmqmxFpIXI01"></script>
<script src="/bundles/igniteui_full_js?v=6y5k9Wl7x2PlzNsRN0azCfVIh1oR8SLPZohqnlbLrNo1"></script>
</head>
查看
@using Infragistics.Web.Mvc
@using MyProject.Web.Website.ViewModels
@model ReportViewModel
@(Html.Infragistics()
.Grid(Model.ReportData.AsQueryable())
.ID("grid")
.AutoGenerateColumns(true)
.AutoGenerateLayouts(true)
.DataBind()
.Render()
)
我认为问题是您需要一个 CssRewriteUrlTransform
,因为捆绑更改了应该引用资源的位置。
bundles.Add(new StyleBundle("~/bundles/igniteui_full_css")
.Include("~/Content/IgniteUI/themes/infragistics/infragistics.theme.css", new CssRewriteUrlTransform())
.Include("~/Content/IgniteUI/structure/infragistics.css", new CssRewriteUrlTransform()));
附带说明一下,您可以在捆绑所有组合脚本文件时从脚本包中删除 infragistics.loader.js
,因此不需要加载程序。
我有一个使用 Infragistics IgniteUI 的 ASP.Net MVC 5 项目。当我使用捆绑和缩小的基础设施脚本和样式表加载 igniteui 图表或网格时,出现错误。当我使用非捆绑版本时,我没有收到错误。
更新 我也试过在禁用缩小的情况下进行捆绑,但仍然会产生错误。
为什么我使用捆绑文件时它会在 /bundles/
路径中寻找图像?
我可以做些什么来防止在使用捆绑时出现这些错误?
错误
The controller for path '/bundles/images/ui-icons_888888_256x240.png' was not found or does not implement IController.
The controller for path '/bundles/images/igLoadingSmall.gif' was not found or does not implement IController.
捆绑配置
#region Scripts
...
bundles.Add(new ScriptBundle("~/bundles/igniteui_full_js").Include(
"~/Scripts/IgniteUI/js/infragistics.core.js",
"~/Scripts/IgniteUI/js/infragistics.dv.js",
"~/Scripts/IgniteUI/js/infragistics.lob.js",
"~/Scripts/IgniteUI/js/infragistics.loader.js"
));
#endregion
#region Styles
...
bundles.Add(new StyleBundle("~/bundles/igniteui_full_css").Include(
"~/Content/IgniteUI/css/themes/infragistics/infragistics.theme.css",
"~/Content/IgniteUI/css/structure/infragistics.css"
));
#endregion
Layout Head Razor 代码
<!-- Header Styles-->
@Styles.Render(
"~/bundles/css",
"~/bundles/igniteui_full_css"
)
<!-- Header Scripts-->
@Scripts.Render(
"~/bundles/jquery",
"~/bundles/ajax",
"~/bundles/modernizr",
"~/bundles/bootstrap",
"~/bundles/site",
"~/bundles/igniteui_full_js"
)
Unbundled Head - 不会产生错误
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Header Styles-->
<link href="/Content/bootstrap-multiselect.css" rel="stylesheet"/>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<link href="/Content/Dashboard.css" rel="stylesheet"/>
<link href="/Content/IgniteUI/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"/>
<link href="/Content/IgniteUI/css/structure/infragistics.css" rel="stylesheet"/>
<!-- Header Scripts-->
<script src="/Scripts/jquery-2.2.0.js"></script>
<script src="/Scripts/jquery-ui-1.11.4.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="/Scripts/validator.js"></script>
<script src="/Scripts/jquery.browser.mobile.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<script src="/Scripts/bootstrap-multiselect.js"></script>
<script src="/Scripts/site.js"></script>
<script src="/Scripts/IgniteUI/js/infragistics.core.js"></script>
<script src="/Scripts/IgniteUI/js/infragistics.dv.js"></script>
<script src="/Scripts/IgniteUI/js/infragistics.lob.js"></script>
<script src="/Scripts/IgniteUI/js/infragistics.loader.js"></script>
</head>
捆绑头 - 产生错误
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Header Styles-->
<link href="/bundles/css?v=DOErVhQffVVJij5tRivXIDYvvea9XjXYoWkD6iph4yo1" rel="stylesheet"/>
<link href="/bundles/igniteui_full_css?v=oMN-4N9H6hCThCn7D6WHIiusJgqj7Qk9KfeKje7iGdI1" rel="stylesheet"/>
<!-- Header Scripts-->
<script src="/bundles/jquery?v=3wcNYlWV3nKyr3gSm0Ry9LrwfpXaysXErYMcQN9fkcw1"></script>
<script src="/bundles/ajax?v=jmjhTWiGrUMlGQS2hayanNTeGVZ9FC7i0HnCBpQ4IZ81"></script>
<script src="/bundles/modernizr?v="></script>
<script src="/bundles/bootstrap?v=kNIhecyepPMk8f_DFvoGkBz2T4zIItHFFHq2488ZHwY1"></script>
<script src="/bundles/site?v=stk1SwAEJZvoHt7p5QZ9202zmQ1IeBvXWmqmxFpIXI01"></script>
<script src="/bundles/igniteui_full_js?v=6y5k9Wl7x2PlzNsRN0azCfVIh1oR8SLPZohqnlbLrNo1"></script>
</head>
查看
@using Infragistics.Web.Mvc
@using MyProject.Web.Website.ViewModels
@model ReportViewModel
@(Html.Infragistics()
.Grid(Model.ReportData.AsQueryable())
.ID("grid")
.AutoGenerateColumns(true)
.AutoGenerateLayouts(true)
.DataBind()
.Render()
)
我认为问题是您需要一个 CssRewriteUrlTransform
,因为捆绑更改了应该引用资源的位置。
bundles.Add(new StyleBundle("~/bundles/igniteui_full_css")
.Include("~/Content/IgniteUI/themes/infragistics/infragistics.theme.css", new CssRewriteUrlTransform())
.Include("~/Content/IgniteUI/structure/infragistics.css", new CssRewriteUrlTransform()));
附带说明一下,您可以在捆绑所有组合脚本文件时从脚本包中删除 infragistics.loader.js
,因此不需要加载程序。