When running my application from Visual Studio with IIS Express, the browser is just showing content with no CSS or JavaScript applied.
When watching the network, the css and js files ARE being requested, and the server is returning a 200. The body of theses responses is the correct file content.
If I enter the url of these files into my browser directly, the browser shows (downloads) the correct file.
I tried both IE and Chrome; same issue on both.
Here's what I have in my layout, but I also tried linking the CSS file directly without using Styles.Render
<head>
<meta charset="utf-8" />
@*Set the viewport width to device width for mobile *@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Site Name - @ViewBag.Title</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
@Styles.Render("~/Content/css")
@RenderSection("head", required: false)
@Scripts.Render("~/bundles/modernizr")
</head>
BudleConfig.cs
public static void RegisterBundles(BundleCollection bundles)
{
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 StyleBundle("~/Content/css").Include("~/Content/site.css"));
#region Foundation Bundles
bundles.Add(Foundation.Scripts());
#endregion
}
And the HTML looks like this
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Site Name</title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.8.3.js"></script>
</head>
You can add a web.config in the Scripts and Content folders with the following content:
<configuration>
<system.web>
<authorization>
<allow users="*"/>
</authorization>
</system.web>
</configuration>
This should work.
Exclude the web.config file from the project so when you publish the project it doesn't publish with the project.
My Web.Config had a custom entry like this:
<system.webServer>
<staticContent>
<mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
</staticContent>
</system.webServer>
When debugging my VS2012 environment gave me a "Script Block" tab below my page and my css, pngs, and javascript would not load.
After I commented it out the page then loaded fine. Turns out IIS Express uses your mimeMap setting instead of its own. So either specify all your mime types in your web config or add the custom type to IIS Express config.
Cheers.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With