Asp.net 主题中CSS文件的缓存问题

在Asp.net中，如果使用了主题，在CSS文件变化的后，如果文件没有变更名称，浏览器还是使用旧的CSS文件，造成页面变形，只有手动清理浏览器缓存来解决这个问题。

有没有办法使主题中css文件动态加入一个版本号呢？

有人可能说，手动在链接上加个版本号不就解决了。

但是，如果网站已经上线了，要修改链接很困难，有很多地方已经引用。

经过搜索还真有这样的解决方案，使用Asp.net 2.0 提供的扩展动PageAdapter，使用这个方式动态注入代码到页面的生命周期中，代码如下：

Code Snippet

1. protectedoverridevoid OnPreRender(EventArgs e)//css,htmllink
2.         {
3.             foreach (var link in Page.Header.Controls.OfType().ToList()
4.                 .Where(link => link.Attributes["type"].EqualsIgnoreCase("text/css"))
5.                 .Where(link => link.Attributes["href"].ContainsIgnoreCase("/App_Themes/{0}/".Fill(Page.Theme))))
6.             {
7.                 link.Href += string.Format("?t={0}", Version);
8.             }
9.  
10.             foreach (var link in Page.Header.Controls.OfType().ToList()) //script,LiteralControl
11.             {
12.                 if (link.Text.ContainsIgnoreCase("text/javascript"))
13.                     if (link.Text.ContainsIgnoreCase("))
14.                         link.Text = link.Text.ReplaceIgnoreCase(".js", ".js?t={0}".Fill(Version));
15.             }
16.  
17.             base.OnPreRender(e);
18.         }

其实上面实现很简单，就是查询出页面控件“header”中，加入的CSS文件和JS文件动态的在文件尾部一个版本号。

 

完成代码如下：

Code Snippet

1. publicclassScriptCssPageAdapter : System.Web.UI.Adapters.PageAdapter
2.     {
3.         static ScriptCssPageAdapter()
4.         {
5.             Version = System.Configuration.ConfigurationManager.AppSettings["ResourceVersion"];
6.             if (string.IsNullOrEmpty(Version))
7.             {
8.                 Version = DateTime.Now.Ticks.ToString(CultureInfo.InvariantCulture);
9.             }
10.         }
11.         privatestaticreadonlystring Version;
12.  
13.         protectedoverridevoid OnPreRender(EventArgs e)//css,htmllink
14.         {
15.             foreach (var link in Page.Header.Controls.OfType().ToList()
16.                 .Where(link => link.Attributes["type"].EqualsIgnoreCase("text/css"))
17.                 .Where(link => link.Attributes["href"].ContainsIgnoreCase("/App_Themes/{0}/".Fill(Page.Theme))))
18.             {
19.                 link.Href += string.Format("?t={0}", Version);
20.             }
21.  
22.             foreach (var link in Page.Header.Controls.OfType().ToList()) //script,LiteralControl
23.             {
24.                 if (link.Text.ContainsIgnoreCase("text/javascript"))
25.                     if (link.Text.ContainsIgnoreCase("))
26.                         link.Text = link.Text.ReplaceIgnoreCase(".js", ".js?t={0}".Fill(Version));
27.             }
28.  
29.             base.OnPreRender(e);
30.         }
31.     }
32.  
33.     publicstaticclassStringExtent
34.     {
35.         publicstaticbool EqualsIgnoreCase(thisstring str, string tagert)
36.         {
37.             returnString.Compare(str, tagert, StringComparison.OrdinalIgnoreCase) == 0;
38.         }
39.  
40.         publicstaticbool ContainsIgnoreCase(thisstring str, string target)
41.         {
42.             return str.ToUpperInvariant().Contains(target.ToUpperInvariant());
43.         }
44.         publicstaticstring Fill(thisstring str, paramsobject[] formats)
45.         {
46.             returnstring.Format(str, formats);
47.         }
48.  
49.         publicstaticbool EndWithIgnoreCase(thisstring str, string target)
50.         {
51.             return str.ToUpper().EndsWith(target.ToUpper());
52.         }
53.  
54.         publicstaticbool StartWithIgnoreCase(thisstring str, string target)
55.         {
56.             return str.ToUpper().StartsWith(target.ToUpper());
57.         }
58.  
59.         publicstaticstring ReplaceIgnoreCase(thisstring str, string source, string target)
60.         {
61.             return str.ToLower().Replace(source.ToLower(), target.ToLower());
62.         }
63.     }

 

在web页面中使用方法：

首先在其中加入一个浏览设置文件（a.browser)：

内容如下：

<browsers>
  <browser refID="Default">
    <controlAdapters>
      <adapter controlType="System.Web.UI.Page"
               adapterType="AspNetScriptCssVersionControl.ScriptCssPageAdapter,AspNetScriptCssVersionControl" />
    controlAdapters>
  browser>
browsers>

完成配置。