I have an issue where the CSS is not rendering properly when I compile the MVC project and view it on [https://localhost/MyApp.] The buttons, and background image are not showing up. It worked one time, then for some reason it stop working. Something with the pages not caching? I used firebug to check to see if the pages were missing, and no errors were found. Something in Visual Studio 2010 settings need changing or IIS?
However, when I publish it to an individual website, instead of in the (default web site) area, using [https://localhost:444] website I setup in IIS 7.5, the css seem to render fine.
What is the problem?
One common problem that occurs on MVC 4 websites is difference between release and debug when you have css bundles. It does not have to be your case, but you have the symptoms.
I will explain on an example.
If you have bundle which looks like this:
var styles = new StyleBundle("~/Content/css").Include(
"~/Content/toastr.css",
"~/Content/flags/stylesheets/flags16.css",
"~/Content/flags/stylesheets/flags32.css",
"~/Content/Site.css")
And in flags16.css you have:
background:url('flags/images/flags16.png');
Which uses file in ~Content/flags/images/flags16.png
That will work in release mode (compilation debug="false" in web.config), because all of your css files in bundle will be served as 1 file located at ~/Content/css with relative path 'flags/images/flags16.png' pointing at correct file.
However, in debug mode, ASP.NET MVC will disable minification, and if you used #Styles.Render("~/Content/css") inside your view, it will render link to every one of your files contained in a bundle, so there will be a:
<link href="/WorkOrders.Web/Content/flags/stylesheets/flags16.css" rel="stylesheet">
And from that path, relative path to image is not ok, so images in flags16.png will not be rendered.
One way to solve this, you need to move your .css file which contains references to images to the location where bundle is pointing (~/Content in this case), so it will have same path when it is served minified and raw.
UPDATE As your app is not mvc4, and you have problems when your app is not in the root of your web site (i.e. when it is in localhost/myapp) then you need to check paths in references to your pictures. It is possible that you referenced them absolutely ('/somepath/mypic.png'), and when your app is in localhost/MyApp, path needs to be localhost/MyApp/somepath/mypic.png. You can solve that by replacing path with #Url.Content(~/somepath/mypic.png), if you are using it from cshtml. If path is in css, then you need to put relative path to your pictures.
I have just been battling with the same problem - images, scripts and css not being found or rendered. (Visual Studio 2013, Windows 8.1. Project moved across from Visual Studio 2010.)
The problem was caused by a line in Web.config:
<mimeMap fileExtension=".mp4" mimeType="video/mp4" />
It seems that because the IIS Express application.host file already contained this mimeMap definition, IIS Express couldn't cope with it being defined again.
Removing this line from Web.config completely solved the problem.
It looks like your web site is configured to use SSL. Except that when running locally you probably do not have a valid SSL certificate which is trusted by a certification authority and the client browser is refusing to download the static resources. One way to fix that is to add the address as trusted. So copy paste the url to some of your CSS files in your browser address bar:
https://localhost/MyApp/Content/Main.css
and you will see a warning about the invalid certificate that you could ignore by adding an exception to your browser. Hit Ctrl+F5 to force a refresh once the exception is added and your application should start working properly.
When I had this problem I found that all of my CSS and Script files were encountering a HTTP 500 error when they were being downloaded in the browser (Firefox 33.0.2).
Killing the instance of my browser in the Task Manager and then starting afresh fixed the issue for me.
Related
I've been using VS2012 for some years successfully for my asp.net based website but now want to upgrade to VS2015. However, the lack of the virtual path property for the development web server, shown here in VS2012, is preventing me from doing so.
In VS2012 I have it set to / so that static files referenced relative to the root, stylesheets, JS libraries etc. e.g.
<link rel="stylesheet" href="/assets/template/css/template.css"></link>
can be loaded by the browser.
Without the setting in VS2015 the app compiles and runs perfectly and hyperlinks beginning / work just fine but when the browser attempts to load files referenced like that it receives error 500's (according to Fiddler) so of course none of the client side CSS, JS and some images are loaded.
Is there a solution? I've read answers to similar questions that involve editing config files in the IISExpress folder but I've not been able to find one that relates to this issue specifically.
Presumably I could work round it by adding the host name to the paths programmatically so they end up like:
<link rel="stylesheet" href="http://localhost:57209/assets/template/css/template.css"></link>
but surely there's a better solution?
Thanks for your help.
A late reaction, probably too late, but may be useful for others.
I experienced the same: after opening a VS2013 project in VS2015 the stylesheets were not read.
I was amazed that after removing a mimeMap from web.config all worked well. I removed:
<staticContent>
<mimeMap fileExtension=".json" mimeType="application/json" />
</staticContent>
Found this after switching to a 64 bits version of IIS express (in Options/Projects and Solutions/Web Project). Then I got the message that the mimemap had to be removed. No idea when this mimemap has entered the web.config file.
You can do it from one of the page property windows for your website. I did it in 2013, but I can't remember exactly what I did. I think you open up the property pages window (by pressing Shift + f4, from the view menu, or the wrench icon on the properties window), and then go to start options.
This post has an image of the property window you are looking for. Not sure if they changed it for 2015.
Is there a way to add a virtual directory to Visual Studio Development Server?
I hope this helps.
I'm hosting an ASP.NET website on Local IIS (not IIS Express), and as soon as I save a change to a .css file in Visual Studio, the change immediately appears in browser windows that use that file (or after mousing over the window in Chrome), without clearing caches and refreshing.
Why do the changes appear immediately?
Opening the .css file itself (not a page using the file) in the browser shows a more expected result: saving the file in Visual Studio does not change what I see in the browser until I refresh the .css file.
As it turns out, I had Browser Link enabled in Visual Studio, and with it, CSS Auto-Sync. This opens up a port on the local machine and uses SignalR to communicate with the browser window about 400 times per second, including any CSS changes needed.
For more information, see these topics:
.net localhost website consistently making get arterySignalR/poll?transport=longPolling&connectionToken= calls
How can I disable __vwd/js/artery in VS.NET 2013?
This probably happens due to caching. when you open the css itself, it retrieves a new copy from the server, but when you open a page that uses the css file, the css file is being cached as the page's resource and the browser just shows the cached resources until you force it to reload them.
a trick i learned to fix the issue, is to link the css file to the aspx page and include a random query string to the linking, that way it tricks the browser to think that its a new resource and reload it from the server anyway.
like this:
<link href="../stylesheets/MyCSS.css?<%=DateTime.Now%>"
rel="stylesheet" type="text/css" />
we use the aspx preprocessor directive <%=DateTime.Now%> to append the current time as a query string, to ensure the link is always different.
Dont forget the question mark between the css filename and the preprocessor directive
I have an ASP.NET MVC application that works fine when I run it on Visual Studio. But when I publish it, all the styles dont seem to work. Are there any general guidelines on why styles dont work for an MVC application when published because right now I have no clue on what is happenning??
Any ideas and suggestions are appreciated!
There are many reasons why your css styles might not show up.
Caching: Maybe your browser use a cached version of your css file(s). Check with fiddler or clear the browsers cache
Wrong relativ path to the css file(s): You should specify relative paths when including css files in your views (use Url.Content("~/...") for getting the right url). This is an issue when you use not the same path on your IIS and your IDE.
But the first check in any cas is to run fiddler and see
Is the browser requesting the right css file(s)
Is the server returning the file or a 404, 304, ... status code
It is possible that you have defined the styles in a new file and have not included the new css file in your project (in Visual Studio .net).
VS.Net does not publish those files which are not part of the project.
Get Firebug, inspect the element that should have the style applied and see what CSS is actually present.
Take a look at the CSS Panel and see the CSS files that are being linked (click the down arrow in the master.css as shown in the image below).
I'm having a problem with a component used in a Sitecore solution on our Windows 7 workstations that is driving me batty.
In short, the component in question adds <script> tags to the page that load supporting JavaScript files. The src attributes are set to something like:
/path/to/scriptgenerator/?r=1234&p=asdf
Those paths are not working - I'm getting a 404 back.
You might thing "oh ... well, the path doesn't exist." But it does, and it also has a Default.aspx page in it. In fact, if I try the following path, the JS is generated and returned by the server:
/path/to/scriptgenerator/Default.aspx?r=1234&p=asdf
We're testing the site using IIS7.5, not Visual Studio's debugging web server. Of course, on the production machines, which are Win Server 2008, things work just fine.
The component in question is a third-party component and I have no access to the source code, so I can't just modify it to append default.aspx to the SRC path.
I have checked to verify that Default.aspx is set up as a default document for the site, and it is.
I tried to work around the problem using ISAPI_Rewrite, but for some reason, rules that I set up for /path/to/scriptgenerator are ignored.
I've tried the solution described in these questions, and that has no effect on my problem:
IIS 7 Not Serving Default Document
ASP.NET 2.0 and 4.0 seem to treat the root url differently in Forms Authentication
I'm really not sure what to try or look for next ... any suggestions?
Is this component set up within the same IIS Site as the Sitecore application?
If so, have you added path /path/to/scriptgenerator to IgnoreUrlPrefixes setting in web.config?
I created a website and used css friendly adapters for Menu, TreeView and GridView, all was correct, but after publishing it to my great web server, the menus and treeviews didn't load and there is just some bullets!
Here is my work: http://jds.cot.ir (dead link)
Left side I have a menu which did not load.
Did you copy over the App_Browsers folder? I'd check you copied all files over and, if you can, restart the application pool (touching web.config should achieve this).
I found the problem and the solution, I have an error loading one css file:
<link href="/WebResource.axd?d=FmPs0x8PbK0cHdhnI4N-J7cB33HdEr5UOoA_QzdIwqZdeINM8Kod5dxru5SzZMkL0&t=633820044382031250" type="text/css" rel="stylesheet" />
and the content of this css was an error titled:
Specified argument was out of the range of valid values. Parameter name: utcDate
I changed my pc date to one month ago and rebuilt my solution, and upload it again.
And every thing is correct. ;)
Try deleting precompiled.config from the root of the web app on the server. That did it for me. Haven't really looked into what the pros and cons are. Looks like the publisher's precompilation doesn't take into account the control adapters for some reason. I just ran into this in VS2010 beta 2.