CSS not updated during debugging ASP.NET MVC application

Question

I am working on a test application based on ASP.NET MVC. I am new to CSS stuff so I am learning that as well.

I have created a master page called "new.master" and created a new css "new.css". I am calling the view from controller as:

return View ("About", "new");

What I am doing is that I am frequently updating the css and master page. So I run the application in debug mode frequently. After sometime I stop seeing the effect of changes in css. When I "view source" in chrome and check the css, it shows an old version.

When I change the name of both master page and css, I start to receive updated views but that works for sometime and then again I stop getting the CSS updates. Have you faced this problem? How can I fix it? (Its terribly annoying!)

Player

Answer 1

Your browser is caching the css. If you force a refresh with F5 that should display any changes.

Genista

Thanks a lot. It did solve my problem. It was like hell. I started questioning my learning ability at one point of time. :) – Player

Browser was playing mind games on me - Text I added was showing up so I assumed it was refreshing yet CSS was not. F5 did the trick. – Marvelous

any way to do it from code whenever a new publish/deploy? – Damn

Your framework / tools should be compiling assets and giving it a fingerprint in the url. – Genista

Answer 2

I think this may be a browser cache issue. In in IE and FF I usually do Ctrl + F5 or Ctrl + Refresh button. Also you can manually clear the cache. For IE you can use the IE Dev Toolbar and for Firefox there is Firebug with both you can clear the cache easily. Not sure about chrome, sorry.

Sayed Ibrahim Hashimi

My Book: Inside the Microsoft Build Engine : Using MSBuild and Team Foundation Build

Burly

Thanks for your answer. Its a good one but other guy was first to point out the cache issue so accepted that one. You get my vote though :) Thanks again. – Player

Ctr + F5 absolutely resolved my issue on Mozilla. Thank you! – Mortal

Answer 3

go to chroom developer panel by right click inspect -> then go to Network tap -> tick the Disable cache checkbox (note: this should always be checked) -> Refresh the page by pressing F5.

this work for me, hope this help others who have this issue! :)

Elicia

Answer 4

I found another case in which this can happen.

We started our application with just plain links to the CSS files, then switched to using bundling. We updated the old <link href="@Url.Content("~/somePath/someStyle.css")" rel="stylesheet" type="text/css" /> to @Styles.Render("~/Styles/bundles/someStyle").

We also use a few stylesheets which are only needed for some pages, and they have their own bundle. Now, for one of them, we forgot to change the link tag to the @Styles.Render statement.

The result was that this CSS got updated now and then (so we thought everything is OK; the style wasn't missing), but we could not influence when the update happens. When I started making changes to the file, I realized that nothing I do (emptying the cache, rebuilding the project, restarting Cassini) will trigger an update. The browser always got a 304 Not modified.

So, if you have these symptoms, check your links.

Hooey

Answer 5

Please use Ctrl+F5 to refresh your browser.

F5 may give you the same page even if the content is changed, because it may load the page from cache. But Ctrl - F5 forces a cache refresh, and will guarantee that if the content is changed, you will get the new content.

hope this will help you

Thank you

Occupational

Answer 6

It's very possible that css is being cached in your browser, so simply clearch browser cache, it should help

Ramachandra

Answer 7

This happened to me when I had a master view that would load partial views depending on which partial view the user wanted to see, but the answer from this page helped, https://forums.asp.net/t/1763494.aspx?applying+CSS+layouts+to+a+partial+view

CSS must be referenced in the of the Html document. As a consequence you cannot include them in a partial view...because in such case the css is included in the Html body. Please plce the style sheet in head of the page that hosts the partial view.

I would have css links in my partial views and any modifications to the css files would never happen, even if I pressed Ctrl-F5 in the browser. I also tried clearing cache contents in the developer tools. I noticed by viewing the source stylesheets that the css files linked by the partial views were not changing, so the fix for me was to move the css links from the partial view to the main view where these partial views were to be held.

Bluecollar

Answer 8

I had something similar happening to me.

Then suddenly noticed the bundle was added to the page:

@Styles.Render("/bundles/classifiedDetailCss")

instead of:

@Styles.Render("~/bundles/classifiedDetailCss")

Note the missing ~ character in the first example.

(The first example only worked after building the project, otherwise it would return a cached version even in debug mode.)

Osithe

Answer 9

This can help solve this issues in both dev and production. use asp-append-version="true"

Sulfite