Share via

AutoF5 1.3 Published: Support Dynamically Loading CSS files

  • Article

If you are first time here, please read my previous post: https://blogs.msdn.com/b/hongyes/archive/2011/11/03/introducing-to-autof5-nuget-package-live-editing-in-asp-net.aspx 

Thanks for Scott Galloway's suggestion. AutoF5 1.3 now supports to refresh CSS file dynamically by javascript instead of reloading the whole page. With this feature, It will be very convenient to develop and style Ajax UI. 

In this update, I shamelessly copy the js snippet from https://snippets.dzone.com/posts/show/2069 and fixed the regular expression issue in it. It will dynamically change the href of stylesheet links and append a random seed to avoid browser cache.

Here is the code snippet:

  function updateStylesheets() {
 var i, a, s;
 a = document.getElementsByTagName('link');
 for (i = 0; i < a.length; i++) {
 s = a[i];
 if (s.rel.toLowerCase().indexOf('stylesheet') >= 0 && s.href) {
 var h = s.href.replace(/(&|\?)forceReload=\d*/g, '');
 s.href = h + (h.indexOf('?') >= 0 ? '&' : '?') + 'forceReload=' + (new Date().valueOf());
 }
 }
 }

To make it simple, I just reload all the stylesheets no matter it changed or not.

In the code behind, I changed the monitor handler for CSS file and tell the client to just reload all CSS files.

Some useless file monitors are also removed to avoid unintentional reload of page. Like cs, vb, config files are removed.

Nuget Package: https://nuget.org/List/Packages/AutoF5.

Source: https://github.com/hongyes/AutoF5.

Please leave comments here if you find any issue of it. Thanks.