让ASP.Net HTML页面代码 清爽起来

自从用了 ASP.Net MVC后就喜欢上了它 ，因为MVC对服务器控件的依赖大大减少，它生成的HTML页面就比WebForm清爽多了，加载速度有了明显的改善。

 

但对于页面中内嵌script，还是不能彻底的避免，如：

<script type="text/javascript" language="javascript"> //<!-- function DepositPage() { // 这是一个第3方的WebControl,由于是服务器控件，受MasterPage影响,它的客户端ID并不是确定的。 this.ctrlRadGrid = "#<%= ctrlRadGrid.ClientID %>"; // 这是一段又臭又长的JSON，从Modal中传递过来 this.accounts = <%= Modal.JSON %>; // ............................. } new DepositPage(); // --> </script>

 

是否有一种方法可以将这段JS不内嵌在HTML中，使用<script src="">标记从外部文件加载?

 

答案是肯定的，通过自定义WebControl完全可以实现，有如下WebControl

using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Text.RegularExpressions; using System.IO; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; [ParseChildren(false)] public class ExternalJavascriptControl : WebControl { private string SafeFilenamePrefix { get { return Regex.Replace( this.ClientID , "(|///|//:|//*|//?|///"|//<|//>|//|)" , "_" , RegexOptions.ECMAScript | RegexOptions.Compiled ); } } protected override void Render(HtmlTextWriter writer) { if (!Visible) return; try { using (StringWriter sw = new StringWriter()) { using (HtmlTextWriter htw = new HtmlTextWriter(sw)) { base.Render(htw); // get the rendered content string rendered = sw.ToString(); // remove the script tag if exist rendered = Regex.Replace(rendered , @"(<[/s//]*script/b[^>]*>)" , string.Empty , RegexOptions.ECMAScript | RegexOptions.Compiled | RegexOptions.IgnoreCase ); // get the file path and name string dir = string.Format("/temp/{0:0000}{1:00}{2:00}/", DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day); string path = HttpContext.Current.Server.MapPath(dir); string filename = string.Format("{0}{1:X}{2:X}.js" , this.SafeFilenamePrefix , rendered.Length , rendered.GetHashCode() ); // save to temp file if not exist if (!Directory.Exists(path)) Directory.CreateDirectory(path); if (!File.Exists(path + filename) ) { using (StreamWriter output = new StreamWriter(path + filename, false, Encoding.UTF8)) { output.Write(rendered); output.Flush(); } } // write the external js file link writer.Write("<script type=/"text/javascript/" language=/"javascript/" src=/"{0}{1}/"></script>" , dir , HttpUtility.UrlEncode(filename) ); } } } catch { base.Render(writer); } } public override void RenderBeginTag(HtmlTextWriter writer) { } public override void RenderEndTag(HtmlTextWriter writer) { } }

这个WebControl很简单，就是将JS代码生成到外部文件，替换成<script src=""> 标签来加载

生成的JS文件名由3部分主城，<控件ClientID><JS字符串长度><JS字符串HashCode>.js

也就是说，如果Javascript没有改变，浏览器在读取第一次后，只要这段JS没有改变，则仍然可以从缓存读取。这样就降低了不必要的网络流量。

 

此控件对JS代码的编写并没有任何影响 ，仅仅是在其外部用这个控件包起来即可。

<ui:JavascriptControl ID="JavascriptControl1" runat="server"> <script type="text/javascript" language="javascript"> //<!-- $(document).ready( function() { $('#<%=txtXXXX.ClientID %>').val('<%= Model.ToString().SafeJavascriptEncode() %>'); } ); // --> </script> </ui:JavascriptControl>

 

生成的 HTML代码中就 清爽多了

PS.SafeJavascriptEncode 
是一个扩展方法，用于将多字符串编码成安全的Javascript字符串

    public static string SafeJavascriptEncode(this string str)
    {
        if (string.IsNullOrEmpty(str)) return string.Empty;
        return Regex.Replace(str
                 , "([^//x00-//x7F]|&|///"|'|//<|//>|//n|//r|//t)"
                 , new MatchEvaluator(delegate(Match m) { string x = m.ToString(); return string.Format("//u{0:X4}", (int)x[0]); })
                 , RegexOptions.ECMAScript | RegexOptions.Compiled
                 );
    }


对于使用了负载均衡器的多台服务器，这种办法也是可行的，负载均衡器会将一定时间段内收到的后续HTTP请求发往同一台服务器