Question posted in 
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 !
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 :
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:
<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 content in windows features. I changed the BundleConfig.cs file as told here Bundler not including .min files, but nothing worked for me !
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 !
can anyone help me please ?
<==== EDIT =====>
I just put in my Web.Config file :
<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…
3
Answers
I solved the problem!
Thanks to Bundling & minification not applying css & js using Asp.net 4.0 C# !
All I had to do is to change in my bundleConfig.cs file the name from :
to
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.
-G
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
Then i also had font-awsome which i wanted to include in the project. so i created another bundle
And afterwards i add both paths to my Layout.cshtml file.
Works like a charm.