force browsers to get latest js and css files in asp.net application

user_59508 0
Viewed 120183

Some browsers cache js and css files, failing to refresh them unless you force them to. What's the easiest way.

I just implemented this solution that seems to work.

Declare a version variable on your page

  public string version { get; set; }

Get the version number from web.config key

 version = ConfigurationManager.AppSettings["versionNumber"];

In your aspx page make the calls to javascript and stylesheets like so

<script src="scripts/myjavascript.js?v=<%=version %>" type="text/javascript"></script>
<link href="styles/mystyle.css?v=<%=version %>" rel="stylesheet" type="text/css" />

So if you set the version = 1.1 from 1.0 in your web.config your browser will download the latest files which will hopefully save you and your users some frustration.

Is there another solution that works better, or will this cause any unforeseen issues for a website?

asp.net-mvc asp.net javascript .net c#
23 Answers

Your solution works. It is quite popular in fact.

Even Stack Overflow uses a similar method:

<link rel="stylesheet" href="http://sstatic.net/so/all.css?v=6184">

Where v=6184 is probably the SVN revision number.

user_2229080

I wanted a simple one liner to make the path unique to bust the cache. This worked for me:

<script src="scripts/main.js?bust_js_cache=<%=System.IO.File.GetLastWriteTime(Server.MapPath("scripts/main.js")).ToString("HH:mm:ss")%>" type="text/javascript"></script>

If the file has been modified since the last time it was loaded on the page the browser will pull the updated file.

It generates the last modified stamp from the .js file and chucks it in there instead of the version which may not be easy to gain access to.

<script src="scripts/main.js?bust_js_cache=10:18:38" type="text/javascript"></script>

Another option could be to get the checksum of the file.

user_11433870

Interestingly, this very site has issues with the approach you describe in connection with some proxy setups, even though it should be fail-safe.

Check this Meta Stack Overflow discussion.

So in light of that, it might make sense not to use a GET parameter to update, but the actual file name:

href="/css/scriptname/versionNumber.css"

even though this is more work to do, as you'll have to actually create the file, or build a URL rewrite for it.

user_1876060

The main problem with doing it this way is mainly that you will need to remember to update your version number in your code every time you make any change to your css or js files.

A possibly better way to do it is to set a guaranteed unique parameter with each of your css or js files, like so:

<script src="scripts/myjavascript.js?_=<%=DateTime.Now.Ticks%>" type="text/javascript"></script>
<link href="styles/mystyle.css?_=<%=DateTime.Now.Ticks%>" rel="stylesheet" type="text/css" />

This forces the files to be requested from the server every single time, which also means that your site will not be as performant upon page load, since those files will never be cached, and will use unneeded bandwidth each time.

Essentially, if you can remember to update the version number every time a change is made, you can get away with how you're doing it.

user_1070090

For resolving this issue in my ASP.Net Ajax application, I created an extension and then called in the master page.

For more details, you can go through the link.

user_8743660

Easy and smart way to implement css versioning in .net application by below concept.. no need to write back-end code.

<link href="<%="../../App_Themes/Base/css/main.css?v="+ DateTime.Now.ToString("yyyyMMddhhmmss") +""%>" rel="stylesheet" />
user_56807300

just put this inside system.webserver in web.config

<caching enabled="true" enableKernelCache="true">
      <profiles>
        <add extension=".html" policy="CacheUntilChange" kernelCachePolicy="CacheUntilChange"/>
        <add extension=".css" policy="CacheUntilChange" kernelCachePolicy="CacheUntilChange"/>
        <add extension=".js" policy="CacheUntilChange" kernelCachePolicy="CacheUntilChange"/>
      </profiles>
    </caching>
user_158832140
Related