关于项目中使用HTML模板与XML模板的比较

来源：互联网发布：数据决策系统编辑：程序博客网时间：2024/06/06 18:01

经常我们做项目需要用到动态构造HTML的功能，这个功能或者用在展示页面，或者用在发送的邮件主体里面。

最常用的做法，我们是采用模板替换的方式，也就是说在HTML中插入一个关键字，然后将关键字替换为我们要构造的HTML代码，最后合成一个整体HTML。

譬如：

public static string ErrorFile { get { string errorFile = @" <div><B>Days Count ： [#DaysCount]</B><BR> <table cellspacing='0' cellpadding='4' rules='all' border='1' style='background-color:White;border-color:#333333;border-width:1px;border-style:Solid;width:100%;border-collapse:collapse;margin-left:2px;'> <tr align='center' style="color:White;background-color:#FF3300;font-weight:bold;" mce_style="color:White;background-color:#FF3300;font-weight:bold;"> <th scope='col' style='width:5%;'> No. </th> <th scope='col' style='width:10%;'>Category</th> <th scope='col' style='width:25%;'>Filename</th> <th scope='col' style='width:10%;'>Remote File Size</th> <th scope='col' style='width:10%;'>Local File Size</th> <th scope='col' style='width:20%;'>Create Time</th> <th scope='col' style='width:20%;'>Last Modify</th> <th scope='col' style='width:10%;'>Status</th> </tr> [#Temp] <tr align='right' style="color:Red;background-color:#CCCCCC;font-weight:bold;" mce_style="color:Red;background-color:#CCCCCC;font-weight:bold;"> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> </div>"; return errorFile; } }

接着构造[#Temp]模板的HTML TR代码，并替换，形成一整个HTML文档。

当然，你也可以将此HTML的代码另存为一个HTML文件，当要构造HTML的时候，直接从HTML文件读取HTML文档代码并替换[#Temp]模板。

这种处理方式一个比较方便的地方就是快捷，不用太麻烦的构造页面。但是这种方式有一个缺点，就是当替换的时候需要全文检索，这样当替换的关键字比较多的时候会带来的性能影响。

譬如：

public static string ErrorTemp { get { string errorTemp = @" <tr align='center' style="cursor:default;" mce_style="cursor:default;"> <td>[#0]</td> <td>[#1]</td> <td>[#2]</td> <td>[#3]</td> <td>[#4]</td> <td>[#5]</td> <td>[#6]</td> <td>[#7]</td> </tr>"; return errorTemp; } }

这里还只有8列，当有几十个列，上百个列呢？性能方面那就体现的比较明显了。

所以，这里我推荐一种方式，就是标题上面所说的XML模板方式。

原理：通过XML与XSL配合来构造HTML模板。我展示一个项目实战中的例子。

一. 首先，我们建立一个XML文件EmailTemp.xml：

<?xml version="1.0" encoding="utf-8"?><?xml-stylesheet type="text/xsl" href="EmailTemp.xsl" ?><root><generic><csvDateRange></csvDateRange><cdrDateRange></cdrDateRange><cdrFilesCount></cdrFilesCount><channelsFilesCount></channelsFilesCount><exceptionCDRCount></exceptionCDRCount></generic><csvException></csvException><cdrException></cdrException></root>

二.接着，我们建立一个XSL文件EmailTemp.xsl：

<?xml version="1.0" encoding="utf-8"?><xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>[TeraGo]Daily Report</title> </head> <body><mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">div, a, body,p, td {font-family: Verdana, Arial, Helvetica, sans-serif; color: #444444; font-size: 12px;}p{line-height:150%; margin-bottom:8px;} a{color:#f45c13; text-decoration:none;}a:hover{color:#f90; text-decoration:none;}table, td {border:solid 1px #cccccc; border-collapse:collapse;}div {margin-bottom: 5px;}</style><p><div><b>All changed csv files list</b></div><div>Date: <xsl:value-of select="//root/generic/csvDateRange" /></div><table cellspacing="0" cellpadding="3" border="1"><tr style="background-color:#eeeeee;" mce_style="background-color:#eeeeee;"> <td>Date</td> <td>Category</td> <td>Filename</td> <td>Remote File Size</td> <td>Local File Size</td></tr><xsl:for-each select="//root/csvException/item"> <tr> <td><xsl:value-of select="@date"/></td> <td><xsl:value-of select="@category"/></td> <td><xsl:value-of select="@filename"/></td> <td align="right"><xsl:value-of select="@localFileSize"/></td> <td align="right"><xsl:value-of select="@remoteFileSize"/></td> </tr></xsl:for-each><tr style="background-color:#eeeeee;" mce_style="background-color:#eeeeee;"> <td colspan="7" align="right"> Changed CDR files: <font color="red"><xsl:value-of select="//root/generic/cdrFilesCount" /></font> Changed Channels files: <font color="red"><xsl:value-of select="//root/generic/channelsFilesCount" /></font> </td></tr></table></p><p><div><b>All CDR records that cost is exception.</b></div><div>Date: <xsl:value-of select="//root/generic/cdrDateRange" /></div><table cellspacing="0" cellpadding="3" border="1"><tr style="background-color:#eeeeee;" mce_style="background-color:#eeeeee;"> <td>Date</td> <td>CSV File</td> <td>Exception Count</td> <td>TeraGo Cost</td> <td>Client Cost</td></tr><xsl:for-each select="//root/cdrException/item"> <tr> <td><xsl:value-of select="@date"/></td> <td><xsl:value-of select="@csvFile"/></td> <td align="right"><xsl:value-of select="@exceptionCount"/></td> <td align="right"><xsl:value-of select="@teragoCost"/></td> <td align="right"><xsl:value-of select="@clientCost"/></td> </tr></xsl:for-each><tr style="background-color:#eeeeee;" mce_style="background-color:#eeeeee;"> <td colspan="5" align="right">Total CDR records: <font color="red"><xsl:value-of select="//root/generic/exceptionCDRCount" /></font></td></tr></table></p> </body> </html> </xsl:template></xsl:stylesheet>

注：

<xsl:value-of> 元素用于提取某个选定节点的值。用于提取某个选定节点的值，并把值添加到转换的输出流中。
<xsl:for-each> 元素允许您在 XSLT 中进行循环。可用于选取指定的节点集中的每个 XML 元素。
select 属性的值是一个 XPath 表达式。此表达式的工作方式类似于定位某个文件系统，在其中正斜杠可选择子目录。

三.预览XML文件，并调整XSL的样式。一切都到位之后，就可以开始在程序中控制给XML模板添加数据。或者增加XML节点或者替换XML的节点值。这一部分，就相当于我们在HTML模板中构造[#Temp]

对应的TR。

1. 加载XML:

public System.Xml.XmlDocument CreateXmlDocument() { System.Xml.XmlDocument doc = new System.Xml.XmlDocument(); doc.LoadXml(ExtendedData); return doc; }

注：ExtendedData代表XML存入数据库中后，从数据库中读取出来的XML文档字符串。

2. 取得XML中的节点：

XmlDocument doc = email.CreateXmlDocument(); XmlNode csvException = doc.SelectSingleNode("//root/csvException"); XmlNode cdrException = doc.SelectSingleNode("//root/cdrException");

3. 给节点添加子节点，这里相当于构造HTML模板中的TR：

query.ForEach(a => { //add node XmlNode node = doc.CreateNode(XmlNodeType.Element, "item", null); node.Attributes.Append(doc.CreateAttribute("date")).Value = a.CSVDate.ToString("MM/dd/yyyy"); node.Attributes.Append(doc.CreateAttribute("csvFile")).Value = a.CSVName; node.Attributes.Append(doc.CreateAttribute("exceptionCount")).Value = a.ExceptionCount.ToString(); node.Attributes.Append(doc.CreateAttribute("teragoCost")).Value = a.TeraGoCost.ToString(); node.Attributes.Append(doc.CreateAttribute("clientCost")).Value = a.ClientCost.ToString(); cdrException.AppendChild(node); exceptionCDRCount += a.ExceptionCount; });

4. 设置其他节点的值：

doc.SelectSingleNode("//root/generic/csvDateRange").InnerText = csvDateRange.ToString(); doc.SelectSingleNode("//root/generic/cdrDateRange").InnerText = cdrDateRange.ToString(); doc.SelectSingleNode("//root/generic/cdrFilesCount").InnerText = cdrFilesCount.ToString(); doc.SelectSingleNode("//root/generic/channelsFilesCount").InnerText = channelsFilesCount.ToString(); doc.SelectSingleNode("//root/generic/exceptionCDRCount").InnerText = exceptionCDRCount.ToString(); email.ExtendedData = doc.OuterXml;

四.将XML使用XSL的样式转换为流，并将输出流处理为HTML字符串。

public static string ConvertToHTML(string xslt, string xml) { MemoryStream ms = new MemoryStream(); TextReader textReader = new StringReader(String.Empty); try { XslCompiledTransform transform = new XslCompiledTransform(); //load the xslt textReader = new StringReader(String.Format(TEMPLATE_SCHEMA, xslt)); XPathDocument xslDoc = new XPathDocument(textReader); transform.Load(xslDoc); textReader.Close(); textReader.Dispose(); //load the xml textReader = new StringReader(xml); XmlDocument xmlDoc = new XmlDocument(); xmlDoc.Load(textReader); textReader.Close(); textReader.Dispose(); //transform transform.Transform(xmlDoc, null, ms); //output StringBuilder html = new StringBuilder(HttpUtility.HtmlEncode(Encoding.UTF8.GetString(ms.GetBuffer()))); //& is not encode html = html.Replace("&", "&"); return html.Replace("<", "<").Replace(">", ">").Replace(""", "/"").Replace("&", "&").Replace("/u0000", "").ToString(); } catch (Exception e) { Log.SaveException(e); return null; } finally { textReader.Close(); textReader.Dispose(); ms.Close(); ms.Dispose(); } }

注：这里我们可以直接读取XML与XSL文件，也可以先将XML与XSL文件内容预先存取到数据库中然后再读取，我们项目采取的后者。

因为XSL头文件可以共享:

private const string TEMPLATE_SCHEMA = "<?xml version=/"1.0/" encoding=/"utf-8/"?>" +"<xsl:stylesheet version=/"1.0/" xmlns:xsl=/"http://www.w3.org/1999/XSL/Transform/">" +"<xsl:template match=/"//">" +"<html xmlns=/"http://www.w3.org/1999/xhtml/" xml:lang=/"en/" lang=/"en/">" +"<head>" +"<meta http-equiv=/"Content-Type/" content=/"text/html;charset=UTF-8/" />" +"</head>" +"<body>{0}</body>" +"</html>" +"</xsl:template>" +"</xsl:stylesheet>";

XML模板的这种方式，其优点就是程序解析效率高，不用到冗长的HTML文档字符串中检索关键字，我们只需要添加节点，修改节点就成。

还有一个优点就是，XML文档形成之后，可以随时预览。虽然使用HTML文件通过替换关键字并重新写入HTML文件的方式也可以达到，但是XML追加或者替换了节点直接保存的效率会比重新写入HTML文件的效率更高些。