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

Question

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   lt script src  scripts myjavascript js v  lt   version   gt   type  text javascript  gt  lt  script gt   lt link href  styles mystyle css v  lt   version   gt   rel  stylesheet  type  text css    gt    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

User · Answer

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" />

User · Answer

Simplified prior suggestions and providing code for  NET Web Forms developers   This will accept both relative        and absolute urls in the file path to the resource   Put in a static extensions class file  the following   public static string VersionedContent this HttpContext httpContext  string virtualFilePath        var physicalFilePath   httpContext Server MapPath virtualFilePath       if  httpContext Cache physicalFilePath     null                httpContext Cache physicalFilePath      Page httpContext CurrentHandler  ResolveUrl virtualFilePath     virtualFilePath Contains          amp             v     File GetLastWriteTime physicalFilePath  ToString  yyyyMMddHHmmss              return  string httpContext Cache physicalFilePath       And then call it in your Master Page as such    lt link type  text css  rel  stylesheet  href   lt    Context VersionedContent    styles mystyle css     gt     gt   lt script type  text javascript  src   lt    Context VersionedContent    scripts myjavascript js     gt   gt  lt  script gt

User · Answer

Based on the above answer I ve written a small extension class to work with CSS and JS files   public static class TimestampedContentExtensions       public static string VersionedContent this UrlHelper helper  string contentPath                var context   helper RequestContext HttpContext           if  context Cache contentPath     null                        var physicalPath   context Server MapPath contentPath               var version     v     new FileInfo physicalPath  LastWriteTime ToString   yyyyMMddHHmmss                 var translatedContentPath   helper Content contentPath                var versionedContentPath                   contentPath Contains                             translatedContentPath      amp     version                       translatedContentPath          version               context Cache Add physicalPath  version  null  DateTime Now AddMinutes 1   TimeSpan Zero                  CacheItemPriority Normal  null                context Cache contentPath    versionedContentPath              return versionedContentPath                    else                       return context Cache contentPath  as string                      Instead of writing something like    lt link href   Url Content     Content bootstrap min css    rel  stylesheet  type  text css    gt   lt script src   Url Content     Scripts bootstrap min js    gt  lt  script gt    You can now write    lt link href   Url VersionedContent     Content bootstrap min css    rel  stylesheet  type  text css    gt   lt script src   Url VersionedContent     Scripts bootstrap min js    gt  lt  script gt    I e  simply replace Url Content with Url VersionedContent   Generated URLs look something like    lt link href   Content bootstrap min css v 20151104105858  rel  stylesheet  type  text css    gt   lt script src   Scripts bootstrap min js v 20151029213517  gt  lt  script gt    If you use the extension class you might want to add error handling in case the MapPath call doesn t work  since contentPath isn t a physical file

User · Answer

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    lt script src  scripts myjavascript js    lt   DateTime Now Ticks  gt   type  text javascript  gt  lt  script gt   lt link href  styles mystyle css    lt   DateTime Now Ticks  gt   rel  stylesheet  type  text css    gt    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 · Answer

I wanted a simple one liner to make the path unique to bust the cache   This worked for me    lt script src  scripts main js bust js cache  lt   System IO File GetLastWriteTime Server MapPath  scripts main js    ToString  HH mm ss    gt   type  text javascript  gt  lt  script gt    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    lt script src  scripts main js bust js cache 10 18 38  type  text javascript  gt  lt  script gt    Another option could be to get the checksum of the file

User · Answer

Get file modified time  as shown below  private static string GetLastWriteTimeForFile string pathVal                return System IO File GetLastWriteTime HostingEnvironment MapPath pathVal   ToFileTime   ToString            Append this with input as querystring  public static string AppendDateInFile string pathVal                var patheWithDate   new StringBuilder pathVal           patheWithDate AppendFormat   0 x  1                                   pathVal IndexOf       gt   0     amp                                         GetLastWriteTimeForFile pathVal            return patheWithDate ToString            Call this from markup   MVC Extension Helper Approach  Add an extension method  namespace TNS Portal Helpers       public static class ScriptExtensions               public static HtmlString QueryStringScript lt T gt  this HtmlHelper lt T gt  html  string path                        var file   html ViewContext HttpContext Server MapPath path               DateTime lastModified   File GetLastWriteTime file               TagBuilder builder   new TagBuilder  script                builder Attributes  src     path     modified     lastModified ToString  yyyyMMddhhmmss                return new HtmlString builder ToString                       public static HtmlString QueryStringStylesheet lt T gt  this HtmlHelper lt T gt  html  string path                   var file   html ViewContext HttpContext Server MapPath path           DateTime lastModified   File GetLastWriteTime file           TagBuilder builder   new TagBuilder  link            builder Attributes  href     path     modified     lastModified ToString  yyyyMMddhhmmss            builder Attributes  rel      stylesheet           return new HtmlString builder ToString                        Add this namespace in web config   lt system web webPages razor gt       lt host factoryType  System Web Mvc MvcWebRazorHostFactory  System Web Mvc  Version 5 2 3 0  Culture neutral  PublicKeyToken 31BF3856AD364E35    gt       lt pages pageBaseType  System Web Mvc WebViewPage  gt         lt namespaces gt           lt add namespace  System Web Mvc    gt           lt add namespace  System Web Mvc Ajax    gt           lt add namespace  System Web Mvc Html    gt           lt add namespace  System Web Optimization   gt           lt add namespace  System Web Routing    gt           lt add namespace  TNS Portal    gt           lt add namespace  TNS Portal Helpers    gt         lt  namespaces gt       lt  pages gt     lt  system web webPages razor gt    Use it in view as   Html QueryStringScript   Scripts NPIAjaxCalls js    Html QueryStringStylesheet   Content StyledRadio css

User · Answer

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 · Answer

For ASP NET pages I am using the following  BEFORE   lt script src   Scripts pages common js  type  text javascript  gt  lt  script gt    AFTER  force reload     lt script src   Scripts pages common js ver lt   DateTime Now Ticks ToString    gt   type  text javascript  gt  lt  script gt    Adding the DateTime Now Ticks works very well

User · Answer

In ASP NET Core  MVC 6  this works out of the box via the asp-append-version tag helper    lt script src  scripts myjavascript js  asp-append-version  true  gt  lt  script gt   lt link href  styles mystyle css rel  stylesheet  asp-append-version  true    gt

User · Answer

You can override the DefaultTagFormat property of Scripts or Styles   Scripts DefaultTagFormat      lt script src    0  v     ConfigurationManager AppSettings  pubversion          gt  lt  script gt    Styles DefaultTagFormat      lt link href    0  v     ConfigurationManager AppSettings  pubversion          rel   stylesheet    gt

User · Answer

Easy and smart way to implement css versioning in  net application by below concept   no need to write back-end code    lt link href   lt          App Themes Base css main css v    DateTime Now ToString  yyyyMMddhhmmss        gt   rel  stylesheet    gt

User · Answer

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   lt script type  text javascript  src      filename   version      gt  lt  script gt                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     lt script type  text javascript  src   MyJavascriptFile js 20111129120000  gt  lt  script gt

User · Answer

lt  php  rand no   rand 10000000  99999999   gt   lt script src  scripts myjavascript js v  lt    rand no  gt  lt  script gt   This works for me in all browsers  Here I have used PHP to generate random no  You can use your own server side language

User · Answer

Based on Adam Tegan s answer  modified for use in a web forms application   In the  cs class code   public static class FileUtility       public static string SetJsVersion HttpContext context  string filename            string version   GetJsFileVersion context  filename           return filename   version             private static string GetJsFileVersion HttpContext context  string filename                if  context Cache filename     null                        string filePhysicalPath   context Server MapPath filename                string version     v     GetFileLastModifiedDateTime context  filePhysicalPath   yyyyMMddhhmmss                 return version                    else                       return string Empty                       public static string GetFileLastModifiedDateTime HttpContext context  string filePath  string dateFormat                return new System IO FileInfo filePath  LastWriteTime ToString dateFormat             In the aspx markup    lt script type  text javascript  src   lt    FileUtility SetJsVersion Context   js exampleJavaScriptFile js     gt   gt  lt  script gt    And in the rendered HTML  it appears as   lt script type  text javascript  src   js exampleJavaScriptFile js v 20150402021544  gt  lt  script gt

User · Answer

Here s an approach that works with ASP NET 5   MVC 6   vNext   Step 1  Create a class to return the last write time of the file  similar to other answers in this thread  Note  this requires ASP NET 5  or other  dependency injection   public class FileVersionService       private IHostingEnvironment  hostingEnvironment      public FileVersionService IHostingEnvironment hostingEnvironment                 hostingEnvironment   hostingEnvironment             public string GetFileVersion string filename               var path   string Format   0  1     hostingEnvironment WebRootPath  filename          var fileInfo   new FileInfo path          var version   fileInfo LastWriteTimeUtc ToString  yyyyMMddhhmmssfff           return version             Step 2  Register the service to be injected inside startup cs   public void ConfigureServices IServiceCollection services                services AddScoped lt FileVersionService gt                 Step 3  Then  in ASP NET 5  it is possible to inject the service directly into a layout view such as  Layout cshtml like this    inject Namespace Here FileVersionService fileVersionService  lt  DOCTYPE html gt   lt html lang  en  class   ViewBag HtmlClass  gt   lt head gt               lt link href   css styles css v  fileVersionService GetFileVersion    css  styles css    rel  stylesheet    gt           lt  head gt   lt body gt           lt  body gt    There are some finishing touches that could be done to combine physical paths better and handle the file name in a style more consistent with the  syntax  but this is a starting point  Hope it helps people moving to ASP NET 5

User · Answer

Starting from the above answer I modified a little bit the code to make the helper work with CSS files too and add a version every time when you do some change in the files and not only when you do the build  public static class HtmlHelperExtensions       public static MvcHtmlString IncludeVersionedJs this HtmlHelper helper  string filename                string version   GetVersion helper  filename           return MvcHtmlString Create   lt script type  text javascript  src      filename   version      gt  lt  script gt                public static MvcHtmlString IncludeVersionedCss this HtmlHelper helper  string filename                string version   GetVersion helper  filename           return MvcHtmlString Create   lt link href      filename   version      type   text css  rel  stylesheet   gt                private static string GetVersion this HtmlHelper helper  string filename                var context   helper ViewContext RequestContext HttpContext          var physicalPath   context Server MapPath filename           var version     v             new System IO FileInfo physicalPath  LastWriteTime          ToString  yyyyMMddHHmmss            context Cache Add physicalPath  version  null            DateTime Now AddMinutes 1   TimeSpan Zero            CacheItemPriority Normal  null            if  context Cache filename     null                        context Cache filename    version              return version                    else                       if  version    context Cache filename  ToString                                  context Cache filename    version                  return version                            return context Cache filename  as string

User · Answer

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    lt system web gt       lt compilation debug  false    gt   lt  system web gt    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

User · Answer

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 · Answer

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

User · Answer

I have employed a slightly different technique in my aspnet MVC 4 site    ViewStart cshtml    using System Web Caching  using System Web Hosting        Layout      Views Shared  Layout cshtml       PageData Add  scriptFormat   string Format   lt script src     0      0    gt  lt  script gt    GetDeployTicks          functions        private static string GetDeployTicks                 const string cacheKey    DeployTicks           var returnValue   HttpRuntime Cache cacheKey  as string          if  null    returnValue                        var absolute   HostingEnvironment MapPath    Web config                returnValue   File GetLastWriteTime absolute  Ticks ToString                HttpRuntime Cache Insert cacheKey  returnValue  new CacheDependency absolute                      return returnValue            Then in the actual views     Scripts RenderFormat PageData  scriptFormat       Scripts Search javascriptFile min js

User · Answer

Your solution works  It is quite popular in fact    Even Stack Overflow uses a similar method    lt link rel  stylesheet  href  http   sstatic net so all css v 6184  gt     Where v 6184 is probably the SVN revision number

User · Answer

I use a similar way to do the same you are doing without modifying each page  Added a PreRender event is master file  It keeps my logic at one place and applicable to both js and css files   protected void Page PreRender object sender  EventArgs e                HtmlLink link   null          LiteralControl script   null            foreach  Control c in Header Controls                          StyleSheet add version             if  c is HtmlLink                                link   c as HtmlLink                    if  link Href EndsWith   css   StringComparison InvariantCultureIgnoreCase                                         link Href    string Format   v  0    ConfigurationManager AppSettings  agVersion                                                     Js add version             if  c is LiteralControl                                script   c as LiteralControl                   if  script Text Contains   js                                          var foundIndexes   new List lt int gt                           for  int i   script Text IndexOf   js      i  gt  -1  i   script Text IndexOf   js     i   1                                                  foundIndexes Add i                                              for  int i   foundIndexes Count - 1  i  gt   0  i--                                                 script Text   script Text Insert foundIndexes i    3  string Format   v  0    ConfigurationManager AppSettings  agVersion

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

Examples related to javascript

Examples related to c#

Examples related to asp.net

Examples related to .net

Examples related to asp.net-mvc