Bundling and minification is sending old styles - asp.net-mvc

I was followed this article to setup bundling and minification, http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification.
I thought it was working great, until I updated some css, but I kept getting the old style. I am working in firefox, I have cleared my cache, restarted my browser, restarted IIS, and even restarted my computer, and nothing is working.
When I turn off bundling and minification
BundleTable.EnableOptimizations = false;
The new styles show up and the page looks as it should. Turn bundling and minification back on and I get the old styles again. Also, whenever I rebuild or change one of the css files, there is is a new chache busting token. So you would think that it is sending different content, but I still get the old stuff. I even added a test class to one of the css files, then downloaded the minified css file, but the test class I added is not there.
Has anyone else run into this problem?

Follow my instructions under Debugging Bundled and Minified JavaScript to figure out what you're doing wrong.
rebuild or change one of the css files, there is is a new chache busting token
Verify you are using RC and not beta. Rebuilding will not change the cache busting token, only a change will.

Don't I feel like the bonehead. Apparently I am working too many hours. I had a style.min.css file that the optimizer was using, but I was making changes to style.css. I even knew that is what the optimizer did, but I... Well no excuses. It was a brain fart.

Related

Bootstrap Glyphicons not visibile after refreshing IE

If I start the Project with Visual Studio(2013) and choose HTTPS the first time the application starts I see the glyphicons but not if I refresh the page.
If I do the same with HTTP then I dont have this Problem.
In my web.Config I don't use Cache and I also checked the Font Folder everything seems OK.
I saw many similar question on stackoverflow like this link
or this one but nothing helped.

Azure Changes not getting published

I have made changes to my css on my MVC5 project that are working as intended on my local version but when I deploy to Azure the changes are not working.
I have tried creating a min.css file but this did not work
Have you done a hard refresh and pulled a copy of the stylesheet from the server to see if the changes you made are actually there? Http caching could be the culprit depending on how you're packaging your CSS.
Next, check the page source to make sure that your page is actually requesting the stylesheet you think it is. For example, if your site is requesting styles.min.css but you only made changes to styles.css and didn't create a new minified version, that'll cause problems.
Third, I'd check the elements that do not have the styles you're expecting and trace the styles with something like Chrome Developer Tools to ensure that your styles aren't being overridden in a way you're not expecting.

Sudden CSS styling issue only on Safari on iPhone

Trying to help troubleshoot an issue with a charity's web site and it appears that the site's CSS is only partially loading when viewed on Safari. A short link to the site is http://bit.ly/1znipeN
I've used the W3C CSS validator on the child theme CSS and it validated ok, less a couple of warnings. The odd thing is that the site appeared to be working fine until today. I wonder whether it could be a temporary issue in a 3rd party resource, such as JSQuery or similar that is causing Safari not to render correctly? It works fine in Chrome for example.
Is there any way of debugging it to try and find the cause?
If you haven't done so yet clear cache in Safari and Chrome and reload to check if the error is possibly now gone or visible in multiple browsers.
If you are using versioning such as git:
Undo all changes that have been made today (and maybe also yesterday) and test again. If the site works now on Safari, take the changes back in one by one and test which one breaks the layout.
If you use a preprocessor such as Sass, compare the size of yesterday's CSS file to the current one. If it is smaller there might be an error in rendering the file.
Hope one of these helps.
Ah interesting, so these lines we added to .htaccess were the cause for the site not to render correctly in Safari, Firefox and a few others (worked fine in Chrome).
<filesMatch "\.(js|css)$">
Header set Content-Encoding x-deflate
# Header set Content-Encoding compress
# Header set Content-Encoding x-gzip
</filesMatch>

visual studio not updating html / javascript to server / browser

This is an MVC 4 app using the Hot Towel SPA template. Whenever I change anything in the HTML and/or javascript the only way I can get the new code to display is to clear the browser cache. F5, cntrl-F5, shift-F5, nothing works.
I'm not normally a web dev and just learning this. I've done regular MVC before and not had this issue, maybe it has to do with where the HTML and javascript is in my project (i.e. in the /App folder) ?. I'm going nuts trying to figure this out.
I can completely delete an HTML file and run the app and it still runs as it did. Clear cache and run and I then get the update.
It's running using IIS express using Firefox, Chrome, IE...
Thanks..
In Opera and Chrome (and possibly others), you can disable caching while in 'development mode'.
While in DevTools, the 2nd option in the Settings menu is
Disable cache (while DevTools is open)
Go to your web.config file and make a change in it.Its not matter what change you make.For example type a character and then delete it and build the project and run it again.I hope it works.
I also experienced this issue and turns out it was related to caching.
If using Chrome DevTools, you can simply disable cache by navigating to the Network Tab and ticking Disable Cache
This will only disable the cache when Dev Tools is open.
ctrl+shift+F5 will do the trick! Seems like browser cache is part of the problem :)
in my case iis express not updated site, but site , created by iis Manager worked correctly?
possible solution for this problem is
set "use this 64 bit version of iis express for web sites and projects" option at visual studio
it located at options->Projects and Solutions->Web projects
I found that I had the .js file open in the Chrome Developer Tools -> Sources View.
When I closed the file there and refreshed the page the new .js file showed up as expected.
The browsers cache by default. You can turn off caching in your browser to get the changed files.
I had an issue with moved .ts & .html files on the server and had to:
stop debugging
clear the whole output/dist folder inside my ClientApp
start debugging again
Ctrl-F5 to force the cache to refresh on the browser
Simply disabling the browser's cache, or forcing the .net app to recompile, or even running ng serve had no effect.
None of the above listed methods works consistently and if one considers that different browsers are used in the task pane depending on Windows version/build used then you may have to clear the cache of a different browser in each case.
However, it seems that the real issue is not so much browser caching as it is VS deciding which files to deploy to the local IIS Express server used for testing/development. In many cases, when pressing the "Start" button, modified html and/or js files won't make it to the local deployment even if you also modify the web.config file.
The way I made this work consistently is I selected the web application project (in Solution Explorer), opened properties, clicked the "Package/Publish Web" tab and then under "Items to deploy" I selected "All files in this project".
Works fine for me!
If you just want to test locally You can try
A) Create Virtual Directory
Follow below path: Project / Properties / Web
Find Servers section
Click on Create Virtual directory
B) Follow below path: Project / Properties / Web
Find Servers section
Click on Drop down and change the selected value between Express and Local
Then Create Virtual directory
Following are some of the options that we can use to solve the problem.
ctrl + shift + r (This will do a hard refresh of your current tab)
ctrl + F5 (This will force the cache to refresh on the browser)
Stop debugging and Change the web.config file and run again
Stop debugging and clean the project, Rebuild it and run the project
In case disabling the cache and editing the web.config file does not work.
Simply close the solution and reopen it and try it. Strange, but it worked for me.

CSS not updated during debugging ASP.NET MVC application

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!)
Your browser is caching the css. If you force a refresh with F5 that should display any changes.
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
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.
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
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! :)
It's very possible that css is being cached in your browser, so simply clearch browser cache, it should help
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.
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.)
This can help solve this issues in both dev and production.
use asp-append-version="true"

Resources