How to force CSS to reload using RadStyleSheetManager?

[Sean]

Hi,

It is common practice to do something such as this:

<link rel="stylesheet" type="text/css" href="../Content/Dashboard/Dashboard.css?t=<%= DateTime.Now.Ticks %>" />

This is for development purposes, and would be converted to something like ?v=[Version Number] for releases. This is to force browsers to reload CSS instead of using cached versions.

If I attempt to use the same syntax inside of RadStyleSheetManager I am told I am using illegal characters. Does Telerik's control support something like this?

Thanks

Sean

[Dimitar Terziev]

Hello Sean,

In case you want to load custom styles using our RadStyleSheetManager, please refer to the following help article.

Best wishes,
Dimitar Terziev
the Telerik team

[Rob sherwood]

Hi Dimitar,

That link doesn't seem to provide a solution to the original question. It is also outdated and does not apply to the most recent Telerik builds (that support directly including your own CSS with a reference to the directory in the web.config via Telerik.Web.UI.StyleSheetFolders..

I think another way to phrase Sean's question would be: How can I avoid having to rebuild the solution every time I make a change to CSS included via the RadStyleSheetManager? Is there a way to disable caching?

[Sean]

It's more than just rebuilding the solution, but I thank you both for the responses.

If I push a build out live, a customer installs this web application, and their browser caches the CSS file, I need a means of informing their browser that the CSS file is out of date.

See this thread: http://stackoverflow.com/questions/101125/force-browser-to-use-new-css

I experience this issue in my project. If I do not clear the browsers cache, or generate unique paths to the css file, then the browser will continue to use the old CSS version until some arbitrary time has passed.

[Simon]

Hi Sean,

If the references to the style sheets in the RadStyleSheetManager are to embedded resources, then simply rebuilding the assembly containing these resources will cause another URL to be generated, which will effectively force the browser to request the resources anew.

What kind of the resources you are referencing in RSSM - embedded or external?

Kind regards,
Simon
the Telerik team

[Sean]

Hi Telerik,

The files I am working on, I believe, are external resources. The stylesheets are located at MyProject/Content/
I did a quick Google attempting to compare the pros/cons of embedded vs external style sheets, but didn't come up with anything.

        <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" Runat="server">
            <StyleSheets>
                <telerik:StyleSheetReference Path="~/Content/Dashboard/Site.css" />
            </StyleSheets>
        </telerik:RadStyleSheetManager>

<link rel="stylesheet" type="text/css" href="../Content/Site.css?t=<%= DateTime.Now.Ticks %>" />

In my project's Web Properties, I have it set to NOT use the Visual Studio Development Server. I am targeting a Local IIS Web Server and overriding the application root URL. I'm not sure if this has any barring on Telerik controls, but there are differences between the two. 

Is this something I should be experiencing? It sounds like it's something on my end.

Thanks,

Sean

[Simon]

Hello Sean,

Thank you for the clarification.

Currently RadStyleSheetManager does not provide any means of invalidating the cache for externally combined style sheets. The only time the URL is invalidated is when the Telerik.Web.UI assembly is updated, i.e. its version changes. The only way to avoid the problem is to disable cache in the browser during development.

The web server is unrelated to the actual problem - the URLs do not change when the external style sheets are modified. The web server works as it is configured and the rest is up to the browser and there is nothing wrong with them.

We will address this issue in the upcoming weeks. Please excuse us for the caused inconvenience.

Regards,
Simon
the Telerik team

[RvdGrint]

Hello Telerik,

is there already a solution to this problem?

Regards,
    Jos Meerkerk

[Simon]

Hello Jos,

Yes, an automatic cache buster, that invalidates the URL whenever the last modified date of an external style sheet reference is changed, has been implemented after Q2 2011 SP1 (version 2011.2.915).

So you have two options: either use an internal build or wait for the Q3 2011 release for an official version.

Regards,
Simon
the Telerik team

[RvdGrint]

Simon,

Thnx. I'll wait for the Q3 release.

regards,
  Jos Meerkerk

[RvdGrint]

I've the same problem with the RadScriptManager and my *.js files. Is there also a solutions available for this.

Regards,
  Jos

[Simon]

Hi Jos,

RadScriptManager inherits from ScriptManager and serving external scripts is in the codebase of the latter. Unfortunately no 'cache buster' is implemented by SM. If are able to override the part of workflow of SM, which works with external scripts, we will be able to add a 'cache buster'. This however may happen in future versions.

Regards,
Simon
the Telerik team

[RvdGrint]

Simon,

is there an other way to force that always the latetst script files are used?

Regards,
  Jos.

[Simon]

Hi Jos,

As far as I know there is no convenient way to do this. One thing you can do is to version the external JavaScript files, e.g. script_v1.js and increment the version whenever you need to force the new version. Of course this will require to change the name in the place you add the script to (Rad)ScriptManager.

I hope this helps.

Regards,
Simon
the Telerik team

[Sean]

Jos,

Just thought I would chime in here -- Our solution does currently implement a solution for this which may or may not be useful to you.

public static class VersionManager
{
    private static string _urlVersion = null;
    public static string UrlVersion
    {
        get
        {
            if (_urlVersion == null)
            {
                string version = HttpContext.Current.IsDebuggingEnabled ? DateTime.Now.ToString() : FileVersionInfo.GetVersionInfo(Assembly.GetExecutingAssembly().Location).FileVersion;
                _urlVersion = "?v=" + version;
            }

            return _urlVersion;
        }
    }
}

 
And it's usage is:

<link rel="stylesheet" type="text/css" href="../Content/Dashboard/CustomTooltip.css<%=VersionManager.UrlVersion%>" />

You'll need to import the namespace into your .aspx file, though:

<%@ Import Namespace="CableSolve.Web.Controllers.Managers" %>

What this does is appends to the end of a path either the current Date/Time in Debug mode, or the solution's version in Release mode. What this means for you as a developer is that in Debug mode this file will not be able to be cached. Then, out in the wild, every time you release a new version of your product -- the old cache will be replaced with new, but not again until a new version.

I would still recc. keeping your RadStyleSheetManager on the page, though, as it does do additional work in condensing all the files into one request.

[Simon]

Hello Sean,

That is a good solution. Thank you for sharing it with us and the community.

Regards,
Simon
the Telerik team

[RvdGrint]

This doesn't work in the RadScriptManager and I need to use the ScriptManager because some scripts are not loaded correct if de not use the scriptmanager.

Regards,
  Jos

[Allen]

I am sorry but these manager tools should automatically implement cache-busting for css and javascript alike if the user wants it.

 

The solution provided by Sean assumes css files are referenced in Link statements.  

<link rel="stylesheet" type="text/css"href="../Content/Dashboard/CustomTooltip.css<%=VersionManager.UrlVersion%>" />

As far as I can tell, Rad StyleSheetManager wants  the relevant css files entered as properties for the control and not as link statements like this, so how do we reconcile these two approaches?   A similar dilemma occurs for js files.  Both Telerik controls for script and stylesheet management should implement cache-busting or cache-expiry setting or whatever.

[Peter Filipov]

Hello Allen,

Please log your suggestion in our feedback portal and vote for it.

Regards,
Peter Filipov
Telerik

[Allen]

So do I have to make any changes in my code to tell the RadStyleSheetManager to bust the cache and reload if the css file mod datetime changes?  What about RadScriptManager for js?  A more complete example would be helpful.

Thank you.

[Peter Filipov]

Hello Allen,

This feature is not supported by the control. In case that you want to reload the scripts you could add them as a embedded resource and on every build of the project where they resides the links to them will be changed. 

Regards,
Peter Filipov
Telerik

[Allen]

Circling back to this after (ahem) a few years, cache-busting scripts is still needed.  Can it be done by doing something like this? Basically, embed a call to a function in the ScriptReferences so the names are changed when the file changes and RadScriptManager will be forced to reload / recombine?  The syntax below is for discussion purposes and I am not going to bother doing anything further with this if the approach will not work.  Thank you.

 

 

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" AsyncPostBackTimeout="3600"><br>            <CdnSettings TelerikCdn="Enabled" /><br>            <Scripts><br>                <%--Needed for JavaScript IntelliSense in VS2010--%><br>                <%--For VS2008 replace RadScriptManager with ScriptManager--%><br>                <telerik:RadScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" Combine="True" /><br>                <telerik:RadScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" Combine="True" /><br>                <telerik:RadScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" Combine="True" /><br>                <%--this will create $ alias--%><br>                <telerik:RadScriptReference Path="~/Scripts/modernizr-custom.js" Combine="True" /><br> 

              <telerik:RadScriptReference Path="~/Scripts/modernizr-2.8.3.js" Combine="True" /><br><br>             

<div style=" background-color: #fff;"><span style=" "><span style=" margin-left: 0px !important;"><code style="color: #000;">   <%--added this to turn on and off debug and provide a wrapper for log.debug....--%><</code><code style="color: #069;font-weight: bold;">br</code><code style="color: #000;">> </code></span></span></div><div style=" background-color: #fff;"><span style=" "><span style=" margin-left: 0px !important;"><code style="color: #000;"><telerik:RadScriptReference Path="<%=Fingerprint.Tag(" />content/Content/js/toggle-debug.js") %>" Combine="True" /></code></span></span></div>

as opposed to this

              <telerik:RadScriptReference Path="~/Content/js/toggle-debug.js" Combine="True" /><br> 

etc.

etc.

              <telerik:RadScriptReference Path="~/Content/js/form-setup.js" Combine="True" /><br>                <%-- <telerik:RadScriptReference Path="~/Content/js/heart-beat.js" Combine="True" />--%><br>            </Scripts><br><br>        </telerik:RadScriptManager>

 

using this lovely bit from 

https://www.madskristensen.net/blog/cache-busting-in-aspnet/

 

using System;
using System.IO;
using System.Web;
using System.Web.Caching;
using System.Web.Hosting;

public class Fingerprint
{
  public static string Tag(string rootRelativePath)
  {
    if (HttpRuntime.Cache[rootRelativePath] == null)
    {
      string absolute = HostingEnvironment.MapPath("~" + rootRelativePath);

      DateTime date = File.GetLastWriteTime(absolute);
      int index = rootRelativePath.LastIndexOf('/');

      string result = rootRelativePath.Insert(index, "/v-" + date.Ticks);
      HttpRuntime.Cache.Insert(rootRelativePath, result, new CacheDependency(absolute));
    }

      return HttpRuntime.Cache[rootRelativePath] as string;
  }
}

[Peter Milchev]

Hello Allen,

If the issue is with the custom scripts loaded as a script reference with the Path property, then the option below might help:

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" OnResolveScriptReference="RadScriptManager1_ResolveScriptReference">
    <Scripts>
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
        <telerik:RadScriptReference Path="~/scripts.js?cache-buster-v" />
    </Scripts>
</telerik:RadScriptManager>

protected void RadScriptManager1_ResolveScriptReference(object sender, ScriptReferenceEventArgs e)
{
    if (e.Script.Path.ToLower().EndsWith("cache-buster-v"))
    {
        e.Script.Path += "=" + DateTime.Now.ToString("yyyy-MM-dd");
    }
}

 

This way the script will be loaded with the desired query parameter:

<script src="scripts.js?cache-buster-v=2020-07-24" type="text/javascript"></script>

Regards,
Peter Milchev
Progress Telerik

[Allen]

I will give it a whack with a big stick and report back.  Thank you.

[Jackie]

It's more than just rebuilding the solution, but I thank you both for the responses.

If I push a build out live, a customer installs this web application, and their browser caches the CSS file, I need a means of informing their browser that the CSS file is out of date.

See this thread: [quote]Sean said:It's more than just rebuilding the solution, but I thank you both for the responses.

If I push a build out live, a customer installs this web application, and their browser caches the CSS file, I need a means of informing their browser that the CSS file is out of date.

See this thread: http://stackoverflow.com/questions/employee monitoring software/101125/force-browser-to-use-new-css

I experience this issue in my project. If I do not clear the browsers cache, or generate unique paths to the css file, then the browser will continue to use the old CSS version until some arbitrary time has passed.
[/quote]

I experience this issue in my project. If I do not clear the browsers cache, or generate unique paths to the css file, then the browser will continue to use the old CSS version until some arbitrary time has passed.

I faced this issue in my project. 10 years passed-still relevant. Thanks!