Changes to CSS File Changes Not Loaded after Postback

[TazDeveloper]

My Scenario:

Single web page with TabStrip and MultiPage.  Tab1/Page1 has a RadEditor that is used by the user to enter html.  Tab2/Page2 has an editor that allows the user to create a stylesheet.  When the user switches from Tab2, server side the users styles are written out to a file.  The CSSFiles in the RadEditor are cleared and the newly created CSSFile is added to the editor.  This works and the "Apply Styles Class" gets the styles in the drop down.

After going back to Tab 2 and making changes to the style sheet, when the user switches back to Tab 1, the new styles are applied to the file and the file is again removed and added to CSSFiles (Same File name).  Even though the file has changed, the RadEditor is using the contents from the previous version of the file.

So, I am pretty sure that the file does not get loaded again, because of caching by the browser.  I don't think this is an issue with the RadEditor itself. 

So my question is, "Is there a way to force the css to reload on these subsequent changes to pickup the changes to the CSS file?"

[Rumen]

Hi TazDeveloper,

The only possible way to reload the Apply Class dropdown on subsequent changes to pickup the changes to the CSS file is to make a postback or put the tabstrip in Ajax UpdatePanel.

The "Apply Class" dropdown could not be customized on the client, because it is populated with items on the server. On the server you can reset the stylese using:

RadEditor1.CssFiles.Clear();
RadEditor1.CssFiles.Add(newEditorCssFile("~/Test.css"));

Best regards,
Rumen
the Telerik team

[TazDeveloper]

Thank you for the reply, but it doesn't work.  It is the browser that is caching the css file.  My scenario already does a post back, and it also has panel identified as reload in the script manager.   The CSS file is set at the Server, but it appears the CSS is applied at the client through Javascript.

I know this, because the only way to get it to refresh is to Delete the temporary files in IE and click on the tab.  The CSS is refreshed then because it is not cached by the browser.

I gave up on a forced refresh, and fixed the issue by bumping a suffix number on the CSS file.  When the tab is changed style1.css becomes style2.css which forces IE to load the new changes.  Not ideal, but I couldn't find another way to force the css.

Why I think this is happening, and might help you to enhance the RadEditor:

The rad editor is set to use an iframe.  Because of this, it is loaded with your html/javascript to show the editor, and it does not use the information from the containing page.  Under normal circumstances, you can add a Pragma statement to the head of a web page to tell it not to use the cache when loading.  I added this to my web page, but because the editor renders in an iframe, it ignores my pragma statement.  If you include the statement in the rendered page of the iframe, it would fix this issue.  You can add a property of the RadEditor that would allow a user to include the statement or not.  This is something you should consider in an enhancement to the RadEditor.

Cheers,
        Paul

[Rumen]

Hi TazDeveloper,


Thank you for your suggestion. We will consider it.

The workaround that you found is pretty good and you can use it. Another approach that you can try is to add a different query string to the css file path that should also fix the caching issue:

RadEditor1.CssFiles.Add(newEditorCssFile("~/Test.css" + "?" + Math.Rand()));

Greetings,
Rumen
the Telerik team

[TazDeveloper]

Thanks.  Wish I had thought about the query string before I coded bumping the file name.  Too much cleanup of files with my approach.  Your last approach is the best for anyone else facing this issue.

Cheers!