javascript 在 IIS 8 (Windows 8) 上部署 ASP.Net MVC 应用程序时未呈现 CSS 和 JS 文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29848698/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS & JS files not rendered when deploy of ASP.Net MVC application on IIS 8 (Windows 8)
提问by NTinkicht
I'm having an issue when deploying my Asp.NET MVC 5 web application on a remote IIS 8 ! when i'm starting the server, the application works well, but no css or js file is working !
在远程 IIS 8 上部署我的 Asp.NET MVC 5 Web 应用程序时遇到问题！当我启动服务器时，应用程序运行良好，但没有 css 或 js 文件在运行！
my local machine :
我的本地机器：
my remote machine :
我的远程机器：
my view when I click on view page source (in the browser) :
单击查看页面源代码时的视图（在浏览器中）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Log in - My MVC Admin Template</title>
<link href="/Test/Deploy/Content/Theme?v=A1Wwh5B5yTT6Q-34hA0bU7wzaNpIMgCZT8xJ-IAWWVY1" rel="stylesheet"/>
<script src="/Test/Deploy/bundles/modernizr?v=wBEWDufH_8Md-Pbioxomt90vm6tJN2Pyy9u9zHtWsPo1"></script>
</head>
<body class="bootstrap-admin-with-small-navbar">
<div class="container">
<div class="row">
<div class="row">
<form action="/Test/Deploy/" class="bootstrap-admin-login-form" method="post"><input name="__RequestVerificationToken" type="hidden" value="C7q6oci5GoiOMjIeCGgn9-U4lMlx54WJz8117lyBbFcbDak6TzJE2z3kKeBkvyJTJxg6viMGh8dOxCUV2qUP87bZBWyXgMsx3g9Tozmxoc41" />
<h1>Login</h1>
<div class="form-group">
<input class="form-control" type="text" name="Email" placeholder="Email">
<span class="field-validation-valid text-danger" data-valmsg-for="Email" data-valmsg-replace="true"></span>
</div>
<div class="form-group">
<input class="form-control" type="password" name="Password" placeholder="Password">
<span class="field-validation-valid text-danger" data-valmsg-for="Password" data-valmsg-replace="true"></span>
</div>
<div class="form-group">
<div>
<div class="checkbox">
<input data-val="true" data-val-required="The Remember me? field is required." id="RememberMe" name="RememberMe" type="checkbox" value="true" /><input name="RememberMe" type="hidden" value="false" />
<label for="RememberMe">Remember me?</label>
</div>
</div>
</div>
<button class="btn btn-lg btn-primary" type="submit">Submit</button>
</form>
</div>
</div>
<div class="row">
<hr>
<footer role="contentinfo">
<p>© 2015 - <a href="" target="_blank">Test</a></p>
</footer>
</div>
</div>
<script src="/Test/Deploy/bundles/jquery?v="></script>
<script src="/Test/Deploy/bundles/bootstrap?v=a0JlrK3HWJYO4CANWtnjZQ6r-FHTgFewh3ItuNGmfr41"></script>
<script src="/Test/Deploy/bundles/jqueryval?v=NOVQDySGO89wzMzO5x7mWS4C_uAdynpZe_Lk2y-xEM41"></script>
<script>
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date(); a = s.createElement(o),
m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-45396411-1', 'azurewebsites.net');
ga('send', 'pageview');
</script>
my BundleConfig.cs :
我的 BundleConfig.cs ：
public class BundleConfig
{
public static void AddDefaultIgnorePatterns(IgnoreList ignoreList)
{
if (ignoreList == null)
throw new ArgumentNullException("ignoreList");
ignoreList.Ignore("*.intellisense.js");
ignoreList.Ignore("*-vsdoc.js");
ignoreList.Ignore("*.debug.js", OptimizationMode.WhenEnabled);
//ignoreList.Ignore("*.min.js", OptimizationMode.WhenDisabled);
ignoreList.Ignore("*.min.css", OptimizationMode.WhenDisabled);
}
// For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
public static void RegisterBundles(BundleCollection bundles)
{
bundles.IgnoreList.Clear();
AddDefaultIgnorePatterns(bundles.IgnoreList);
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{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 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.unobtrusive*",
"~/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/twitter-bootstrap-hover-dropdown.js"
));
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));
bundles.Add(new StyleBundle("~/Content/Theme/base/css").Include(
"~/Content/Theme/base/jquery.ui.core.css",
"~/Content/Theme/base/jquery.ui.resizable.css",
"~/Content/Theme/base/jquery.ui.selectable.css",
"~/Content/Theme/base/jquery.ui.accordion.css",
"~/Content/Theme/base/jquery.ui.autocomplete.css",
"~/Content/Theme/base/jquery.ui.button.css",
"~/Content/Theme/base/jquery.ui.dialog.css",
"~/Content/Theme/base/jquery.ui.slider.css",
"~/Content/Theme/base/jquery.ui.tabs.css",
"~/Content/Theme/base/jquery.ui.datepicker.css",
"~/Content/Theme/base/jquery.ui.progressbar.css",
"~/Content/Theme/base/jquery.ui.theme.css"));
//Calendar css file
bundles.Add(new StyleBundle("~/Content/fullcalendarcss").Include(
"~/Content/themes/jquery.ui.all.css",
"~/Content/fullcalendar.css"));
//Calendar Script file
bundles.Add(new ScriptBundle("~/bundles/fullcalendarjs").Include(
"~/Scripts/jquery-ui-1.10.4.min.js",
"~/Scripts/fullcalendar.min.js"));
bundles.Add(new ScriptBundle("~/bundles/vendors").Include(
"~/Content/Theme/vendors/uniform/jquery.uniform.js"
, "~/Content/Theme/vendors/chosen.jquery.js"
, "~/Content/Theme/vendors/bootstrap-datepicker/js/bootstrap-datepicker.js"
,
"~/Content/Theme/vendors/bootstrap-wysihtml5-rails-b3/vendor/assets/javascripts/bootstrap-wysihtml5/wysihtml5.js"
,
"~/Content/Theme/vendors/bootstrap-wysihtml5-rails-b3/vendor/assets/javascripts/bootstrap-wysihtml5/core-b3.js"
, "~/Content/Theme/vendors/twitter-bootstrap-wizard/jquery.bootstrap.wizard-for.bootstrap3.js"
, "~/Content/Theme/vendors/boostrap3-typeahead/bootstrap3-typeahead.js"
, "~/Content/Theme/vendors/easypiechart/jquery.easy-pie-chart.js"
, "~/Content/Theme/vendors/ckeditor/ckeditor.js"
, "~/Content/Theme/vendors/tinymce/js/tinymce/tinymce.js"
,
"~/Content/Theme/vendors/bootstrap-wysihtml5-rails-b3/vendor/assets/javascripts/bootstrap-wysihtml5/wysihtml5.js"
,
"~/Content/Theme/vendors/bootstrap-wysihtml5-rails-b3/vendor/assets/javascripts/bootstrap-wysihtml5/core-b3.js"
, "~/Content/Theme/vendors/jGrowl/jquery.jgrowl.js"
, "~/Content/Theme/vendors/bootstrap-datepicker/js/bootstrap-datepicker.js"
, "~/Content/Theme/vendors/sparkline/jquery.sparkline.js"
, "~/Content/Theme/vendors/tablesorter/js/jquery.tablesorter.js"
, "~/Content/Theme/vendors/flot/jquery.flot.js"
, "~/Content/Theme/vendors/flot/jquery.flot.selection.js"
, "~/Content/Theme/vendors/flot/jquery.flot.resize.js"
, "~/Content/Theme/vendors/fullcalendar/fullcalendar.js"
));
bundles.Add(new StyleBundle("~/Content/Theme").Include(
"~/Content/bootstrap.css",
"~/Content/bootstrap-theme.css",
"~/Content/Theme/css/bootstrap-admin-theme.css",
"~/Content/Theme/css/site.css"));
bundles.Add(new StyleBundle("~/Content/Vendors").Include(
"~/Content/Theme/vendors/bootstrap-datepicker/css/datepicker.css"
, "~/Content/Theme/css/datepicker.fixes.css"
, "~/Content/Theme/vendors/uniform/themes/default/css/uniform.default.min.css"
, "~/Content/Theme/css/uniform.default.fixes.css"
, "~/Content/Theme/vendors/chosen.min.css"
,
"~/Content/Theme/vendors/bootstrap-wysihtml5-rails-b3/vendor/assets/stylesheets/bootstrap-wysihtml5/core-b3.css"
, "~/Content/Theme/vendors/easypiechart/jquery.easy-pie-chart.css"
, "~/Content/Theme/vendors/easypiechart/jquery.easy-pie-chart_custom.css"
,
"~/Content/Theme/vendors/bootstrap-wysihtml5-rails-b3/vendor/assets/stylesheets/bootstrap-wysihtml5/core-b3.css"
, "~/Content/Theme/vendors/jGrowl/jquery.jgrowl.css"
, "~/Content/Theme/vendors/bootstrap-datepicker/css/datepicker.css"
, "~/Content/Theme/vendors/fullcalendar/fullcalendar.css"));
}
}
my login page :
我的登录页面：
@model LoginViewModel
@{
ViewBag.Title = "Log in";
}
<div class="row">
@using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "bootstrap-admin-login-form" }))
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)
<h1>Login</h1>
<div class="form-group">
<input class="form-control" type="text" name="Email" placeholder="Email">
@Html.ValidationMessageFor(m => m.Email, "", new { @class = "text-danger" })
</div>
<div class="form-group">
<input class="form-control" type="password" name="Password" placeholder="Password">
@Html.ValidationMessageFor(m => m.Password, "", new { @class = "text-danger" })
</div>
<div class="form-group">
<div>
<div class="checkbox">
@Html.CheckBoxFor(m => m.RememberMe)
@Html.LabelFor(m => m.RememberMe)
</div>
</div>
</div>
<button class="btn btn-lg btn-primary" type="submit">Submit</button>
}
</div>
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}
in my Web.Config file i put this:
在我的 Web.Config 文件中，我把这个：
<system.webServer>
<modules runAllManagedModulesForAllRequests="true">
<remove name="BundleModule" />
<add name="BundleModule" type="System.Web.Optimization.BundleModule" />
<remove name="FormsAuthentication" />
<remove name="ApplicationInsightsWebTracking" />
<add name="ApplicationInsightsWebTracking" type="Microsoft.ApplicationInsights.Extensibility.Web.RequestTracking.WebRequestTrackingModule, Microsoft.ApplicationInsights.Extensibility.Web" preCondition="managedHandler" />
</modules>
<validation validateIntegratedModeConfiguration="false" />
</system.webServer>
I saw a lot of solutions on the web, both on server and project side ! I enabled the static contentin windows features. I changed the BundleConfig.csfile as told here Bundler not including .min files, but nothing worked for me !
我在网上看到了很多解决方案，包括服务器端和项目端！我在 Windows 功能中启用了静态内容。我按照此处的说明更改了BundleConfig.cs文件，Bundler 不包括 .min 文件，但对我来说没有任何效果！
NB: One of my pages has some styles defined in the razor file, it's rendering well ! so I think that the problem is somewhere within the bundle file !
注意：我的一个页面在 razor 文件中定义了一些样式，它渲染得很好！所以我认为问题出在捆绑文件中的某个地方！
can anyone help me please ?
有人可以帮我吗？
<==== EDIT =====>
<==== 编辑 ======>
I just put in my Web.Config file :
我只是放入了我的 Web.Config 文件：
<compilation debug="false" targetFramework="4.5" />
and the result in my local machine is without styles (just like the remote one) if it can help someone to understand...
如果它可以帮助某人理解，那么我本地机器上的结果没有样式（就像远程机器一样）...
采纳答案by NTinkicht
I solved the problem!
我解决了问题！
Thanks to Bundling & minification not applying css & js using Asp.net 4.0 C#!
感谢Bundling & minification 没有使用 Asp.net 4.0 C# 应用 css & js！
All I had to do is to change in my bundleConfig.cs file the name from :
我所要做的就是在我的 bundleConfig.cs 文件中更改名称：
bundles.Add(new StyleBundle("~/Content/Theme").Include(
"~/Content/bootstrap.css",
"~/Content/bootstrap-theme.css",
"~/Content/Theme/css/bootstrap-admin-theme.css",
"~/Content/Theme/css/site.css"));
to
到
bundles.Add(new StyleBundle("~/Content/allcss").Include(
"~/Content/bootstrap.css",
"~/Content/bootstrap-theme.css",
"~/Content/Theme/style/bootstrap-admin-theme.css",
"~/Content/Theme/style/site.css"));
回答by Waqas ali
The answer by the author is correct but its not helpful. I had to look a little more deeper to solve this issue. I found that when you release the application to production or whatever reason and your bundle.config file is not configured properly then you will have CSS/JS not rendered problem. In order to solve this i had to make some changes in bundle.config file. All the style files in the same folder go under one Virtual path and if you have other CSS files that are located under different folder you have to create a new bundle for those. e.g. i had my custom css called "site.css" and "bootstrap.css" in same folder so i created
作者的答案是正确的，但没有帮助。为了解决这个问题，我不得不更深入地研究。我发现当您将应用程序发布到生产环境或任何原因并且您的 bundle.config 文件未正确配置时，您将遇到 CSS/JS 未呈现问题。为了解决这个问题，我必须在 bundle.config 文件中进行一些更改。同一文件夹中的所有样式文件都位于一个虚拟路径下，如果您有位于不同文件夹下的其他 CSS 文件，则必须为这些文件创建一个新包。例如，我在同一个文件夹中有名为“site.css”和“bootstrap.css”的自定义 css，所以我创建了
bundles.Add(new StyleBundle("~/Content/allcss").Include(
"~/Content/bootstrap.css",
"~/Content/site.css"
));`
Then i also had font-awsome which i wanted to include in the project. so i created another bundle
然后我还有 font-awsome 我想包含在项目中。所以我创建了另一个包
bundles.Add(new StyleBundle("~/Content/css/font-awsome").Include(
"~/Content/css/font-awesome.css"
));
And afterwards i add both paths to my Layout.cshtml file.
然后我将两个路径都添加到我的 Layout.cshtml 文件中。
@Styles.Render("~/Content/allcss")
@Styles.Render("~/Content/css/font-awsome")
Works like a charm.
奇迹般有效。
回答by TGarrett
If the website is SSL secured, make sure you have a fully qualified address for your resources. That is the first thing that comes to my mind.
如果网站受 SSL 保护，请确保您的资源具有完全限定的地址。这是我想到的第一件事。
-G
-G
