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

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

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

I solved this by tacking a last modified timestamp as a query parameter to the scripts.

I did this with an extension method, and using it in my CSHTML files. Note: this implementation caches the timestamp for 1 minute so we don’t thrash the disk quite so much.

Here is the extension method:

public static class JavascriptExtension {
    public static MvcHtmlString IncludeVersionedJs(this HtmlHelper helper, string filename) {
        string version = GetVersion(helper, filename);
        return MvcHtmlString.Create("<script type='text/javascript' src='" + filename + version + "'></script>");
    }

    private static string GetVersion(this HtmlHelper helper, string filename)
    {
        var context = helper.ViewContext.RequestContext.HttpContext;

        if (context.Cache[filename] == null)
        {
            var physicalPath = context.Server.MapPath(filename);
            var version = $"?v={new System.IO.FileInfo(physicalPath).LastWriteTime.ToString("MMddHHmmss")}";
            context.Cache.Add(filename, version, null,
              DateTime.Now.AddMinutes(5), TimeSpan.Zero,
              CacheItemPriority.Normal, null);
            return version;
        }
        else
        {
            return context.Cache[filename] as string;
        }
    }
}

And then in the CSHTML page:

 @Html.IncludeVersionedJs("/MyJavascriptFile.js")

In the rendered HTML, this appears as:

 <script type='text/javascript' src='/MyJavascriptFile.js?20111129120000'></script>

Solution 2:

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.

Solution 3:

In ASP.NET Core (MVC 6) this works out of the box via the asp-append-version tag helper:

<script src="scripts/myjavascript.js" asp-append-version="true"></script>
<link href="styles/mystyle.css rel="stylesheet" asp-append-version="true" />

Solution 4:

ASP.NET MVC will handle this for you if you use bundles for your JS/CSS. It will automatically append a version number in the form of a GUID to your bundles and only update this GUID when the bundle is updated (aka any of the source files have changes).

This also helps if you have a ton of JS/CSS files as it can greatly improve content load times!

See Here

Solution 5:

There are a built-in way in asp.net for this: bundling. Just use it. Each new version will have unique suffix “?v=XXXXXXX”. In debug mode bundling is off, for switching on make setting in web.config:

<system.web>
    <compilation debug="false" />
</system.web>

Or add to the method RegisterBundles(BundleCollection bundles) :

BundleTable.EnableOptimizations = true;

For example:

BundleConfig.cs :

bundles.Add(new ScriptBundle("~/Scripts/myjavascript.js")
                .Include("~/Scripts/myjavascript.js"));

bundles.Add(new StyleBundle("~/Content/mystyle.css")
                .Include("~/Content/mystyle.css"));

_Layout.cshtml :

@Scripts.Render("~/Scripts/myjavascript.js")
@Styles.Render("~/Content/mystyle.css")

Solution 6:

There is a simpler answer to this than the answer given by the op in the question (the approach is the same):

Define the key in the web.config:

<add key="VersionNumber" value="06032014"/>

Make the call to appsettings directly from the aspx page:

<link href="styles/navigation.css?v=<%=ConfigurationManager.AppSettings("VersionNumber")%>" rel="stylesheet" type="text/css" />