CSS and JS files not showing when deploying ASP.Net MVC application on IIS 8 (Windows 8)
I am having a problem while deploying my Asp.NET MVC 5 web application on remote IIS 8! when i start the server the app works fine but css or js file doesn't work!
my local machine:
my remote machine:
my view when I click on the source of the view page (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:
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 will put this:
<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 have seen many solutions on the internet, both on the server and project side! I have enabled static content in windows functions. I modified the BundleConfig.cs file as the Bundler said here , not including the .min files , but nothing worked for me!
NB: One of my pages has some styles defined in the razor file and it works well! so I think the problem is in the package file somewhere!
can anyone help me?
<==== EDIT ===== →
I just put in my Web.Config file:
<compilation debug="false" targetFramework="4.5" />
and the result on my local machine has no styles (like the remote one), if that might help someone understand ...
+3
source to share
3 answers
I solved the problem!
Thanks to Linking and Minifying without applying css and js using Asp.net 4.0 C # !
All I had to do was change the name in my bundleConfig.cs file from:
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"));
+2
source to share
The author's answer is correct, but it doesn't help. I had to look a little deeper to solve this problem. I found that when releasing the application to production or for whatever reason, and your bundle.config file is not configured properly, you will have a CSS / JS issue. To fix this problem, I had to make some changes to the bundle.config file. All style files in one folder fall under the same virtual path, and if you have other CSS files that are in another folder, you need to create a new package for them. for example I had my own CSS called "site.css" and "bootstrap.css" in the same folder, so I created
bundles.Add(new StyleBundle("~/Content/allcss").Include(
"~/Content/bootstrap.css",
"~/Content/site.css"
));`
Then I also had a font-awsome that I wanted to include in the project. so i created another package
bundles.Add(new StyleBundle("~/Content/css/font-awsome").Include(
"~/Content/css/font-awesome.css"
));
And after that I add both paths to my Layout.cshtml file.
@Styles.Render("~/Content/allcss")
@Styles.Render("~/Content/css/font-awsome")
Works like a charm.
+2
source to share