<script src="someJs.js?v=1001" ></script>
In order to do this, developers have to go to all the html, aspx, ascx, master pages, find all references to static files that are changed, and then increase the version number. If you forget to do this on some page, that page may break because browser uses old cached script. So, it requires a lot of regression test effort to find out whether changing some css or js breaks something anywhere in the entire website.
First, you add set the filter called
StaticContentFilter in the
Application_BeginRequest event handler:
Response.Filter = new Dropthings.Web.Util.StaticContentFilter(
if (Context.Cache[physicalPath] == null)
var physicalPath = Server.MapPath(relativePath);
var version = "?v=" +
Context.Cache.Add(physicalPath, version, null,
Context.Cache[physicalPath] = version;
return Context.Cache[physicalPath] as string;
The only tricky part here is the delegate that is fired whenever the filter detects a script or css link and it asks you to return the version for the file. Whatever you return gets appended right after the original URL of the script or css. So, here the delegate is producing the version as “?v=yyyyMMddhhmmss” using the file’s last modified date time. It’s also caching the version for the file to make sure it does not make a File I/O request on each and every page view in order to get the file’s last modified date time.
For example, the following scripts and css in the html snippet:
<link href="Styles/Stylesheet.css" rel="stylesheet" type="text/css" />
It will get emitted as:
<link href="Styles/Stylesheet.css?v=20110522074829" rel="stylesheet" type="text/css" />
As you see there’s a query string generated with each of the file’s last modified date time. Good thing is you don’t have to worry about generating a sequential version number after changing a file. it will take the last modified date, which will change only when a file is changed.
HttpFilter I will show you here can not only append version suffix, it can also prepend anything you want to add on image, css and link URLs. You can use this feature to load images from a different domain, or load scripts from a different domain and benefit from the parallel loading feature of browsers and increase the page load performance. For example, the following tags can have any URL prepended to them:
<script src="some.js" ></script>
<link href="some.css" />
<img src="some.png" />
They can be emitted as:
<link href="http://styles.mydomain.com/some.css" />
<img src="http://images.mydomain.com/some.png" />
Read here to learn how this works:
Appreciate your feedback.