CSS & JS files not rendered when deploy of ASP.Net MVC application on IIS 8 (Windows 8)
19,521
Solution 1
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 :
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"));
Solution 2
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
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
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.
@Styles.Render("~/Content/allcss")
@Styles.Render("~/Content/css/font-awsome")
Works like a charm.
Comments
-
NTinkicht almost 2 years
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...