c# - XSLT 转换为 HTML 并根据 XML 中的数据格式化 HTML

Question

我对 XSLT/XML 和 HTML 还很陌生。我有一个 XML 文件，我目前使用 XSLT 在 c# 中将其转换为 HTML。XML 文件只表示从数据库中的表中提取的数据。我目前可以相当轻松地使用 XSLT 将 XML 文件转换为 HTML，而无需进行太多格式化。打开时的 HTML 看起来很普通。我打算格式化 HTML，即根据 XML 文档中的某些键值更改字体、背景颜色、字体颜色等。

XML 每天使用 C# 代码生成。 XML 文件的内容完全取决于执行 C# 代码时数据库中表的内容。

XML 看起来像这样

<?xml version="1.0" standalone="yes"?>
<NewDataSet>
  <defects>
    <Defectid>56</Defectid>
    <testid>111</testid>
    <summary>Release of DIT </summary>
    <DetectedDate>2011-09-21 </DetectedDate>
    <priority>2-Give High Attention</priority>
    <status>Ready to Test</status>
    <project>Business Intelligence</project>
    <assignedTo>peter</assignedTo>
    <detectedBy>john</detectedBy>
    <severity>3-Average</severity>
  </defects>
  <defects>
    <Defectid>829</Defectid>
    <testid>111</testid>
    <summary> Data request</summary>
    <DetectedDate>2012-01-12 </DetectedDate>
    <priority>3-Normal Queue</priority>
    <status>Open</status>
    <project>web</project>
    <assignedTo>tcm</assignedTo>
    <detectedBy>john</detectedBy>
    <severity>3-Average</severity>
  </defects>
  <defects>
    <Defectid>728</Defectid>
    <testid>999</testid>
    <summary>Data request</summary>
    <DetectedDate>2012-01-11</DetectedDate>
    <priority>3-Normal Queue</priority>
    <status>Fixed</status>
    <project>Business Intelligence</project>
    <assignedTo>chris</assignedTo>
    <detectedBy>peter</detectedBy>
    <severity>3-Average</severity>
  </defects>
</NewDataSet>

我打算做的是从这个 XML 生成 HTML 表，它是表格格式，但 HTML 表中行的字体颜色应该根据“testid”属性设置。即，对于每个“testid”属性，HTML 上的字体颜色应该是唯一的。由于每个 testid 的行会根据数据库表中的数据每天发生变化，所以我不确定如何使用 XSLT 来实现这一点。

当前的 XSLT 看起来像这样..如您所见，我已经对字体颜色进行了硬编码。

<?xml version="1.0" encoding="UTF-8" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html"/>
  <xsl:template match="/">
    <table  BORDER="1" CELLPADDING="3" CELLSPACING="2" WIDTH="100">
      <tr>
        <td nowrap="nowrap" width = "70">
          <h1 style="font-family:verdana ;font-size:60%;color:green">
            <b>Defect ID</b>
          </h1>
        </td>
        <td nowrap="nowrap" width = "70">
          <h1 style="font-family:verdana ;font-size:60%;color:green">
            <b>Test ID</b>
          </h1>
        </td>
        <td nowrap="nowrap" width = "400">
          <h1 style="font-family:verdana ;font-size:60%;color:green">
            <b>Summary</b>
          </h1>
        </td>
        <td nowrap="nowrap" width = "150">
          <h1 style="font-family:verdana ;font-size:60%;color:green">
            <b>Detected Date</b>
          </h1>
        </td>
        <td width = "200">
          <h1 style="font-family:verdana ;font-size:60%;color:green">
            <b>Priority</b>
          </h1>
        </td>
        <td width = "200">
          <h1 style="font-family:verdana ;font-size:60%;color:green">
            <b>Status</b>
          </h1>
        </td>
        <td width = "200">
          <h1 style="font-family:verdana ;font-size:60%;color:green">
            <b>Project</b>
          </h1>
        </td>
        <td nowrap="nowrap" width = "100">
          <h1 style="font-family:verdana ;font-size:60%;color:green">
            <b>Assigned To</b>
          </h1>
        </td>
        <td nowrap="nowrap" width = "100">
          <h1 style="font-family:verdana ;font-size:60%;color:green">
            <b>Detected By</b>
          </h1>
        </td>
        <td nowrap="nowrap" width = "80">
          <h1 style="font-family:verdana ;font-size:60%;color:green">
            <b>Severity</b>
          </h1>
        </td>
      </tr>
      <xsl:for-each select="//defects">

        <tr>
          <td width = "100">
            <h1 style="font-family:verdana ;font-size:60%;color:blue">
              <xsl:value-of select="Defectid"></xsl:value-of>
            </h1>
          </td>
          <td width = "100">
            <h1 style="font-family:verdana ;font-size:60%;color:blue">
              <xsl:value-of select="testid"/>
            </h1>
          </td>
          <td width = "400">
            <h1 style="font-family:verdana ;font-size:60%;color:blue">
              <xsl:value-of select="summary"/>
            </h1>
          </td>
          <td width = "100">
            <h1 style="font-family:verdana ;font-size:60%;color:blue">
              <xsl:value-of select="DetectedDate"/>
            </h1>
          </td>
          <td width = "100">
            <h1 style="font-family:verdana ;font-size:60%;color:blue">
              <xsl:value-of select="priority"/>
            </h1>
          </td>
          <td width = "100">
            <h1 style="font-family:verdana ;font-size:60%;color:blue">
              <xsl:value-of select="status"/>
            </h1>
          </td>
          <td width = "100">
            <h1 style="font-family:verdana ;font-size:60%;color:blue">
              <xsl:value-of select="project"/>
            </h1>
          </td>
          <td width = "100">
            <h1 style="font-family:verdana ;font-size:60%;color:blue">
              <xsl:value-of select="assignedTo"/>
            </h1>
          </td>
          <td width = "100">
            <h1 style="font-family:verdana ;font-size:60%;color:blue">
              <xsl:value-of select="detectedBy"/>
            </h1>
          </td>
          <td width = "100">
            <h1 style="font-family:verdana ;font-size:60%;color:blue">
              <xsl:value-of select="severity"/>
            </h1>
          </td>

        </tr>
      </xsl:for-each>
    </table>
  </xsl:template>

</xsl:stylesheet>

有人知道或有人可以指导我吗？

Answer 1

下面是应用多达 20 种不同颜色的解决方案 - 为具有特定 testid 的每一行应用一种特定颜色。
请注意，出现多少个不同的 testid 并不重要。另请注意，颜色编码并没有说明 testid 本身 - 但这正是您想要的方式:-)。

<?xml version="1.0" encoding="UTF-8" ?>
<xsl:stylesheet
    version="2.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:std="http://www.standardColors.com">

    <xsl:output method="html"/>

    <xsl:variable name="colors">
        <color>#0000FF</color>
        <color>#FF0000</color>
        <color>#00FFFF</color>
        <color>#FFFF00</color>
        <color>#347C2C</color>
        <color>#800080</color>
        <color>#3B9C9C</color>
        <color>#A52A2A</color>
        <color>#3BB9FF</color>
        <color>#FF00FF</color>
        <color>#6698FF</color>
        <color>#808000</color>
        <color>#8D38C9</color>
        <color>#ADD8E6</color>
        <color>#F660AB</color>
        <color>#F87217</color>
        <color>#F9B7FF</color>
        <color>#FFA500</color>
        <color>#FFE87C</color>
        <color>#8E35EF</color>
    </xsl:variable>

    <xsl:variable name="testIDs" select="distinct-values(//testid)"/>

    <xsl:variable name="colorList">
        <xsl:for-each select="$testIDs">
            <xsl:variable name="pos" select="position() mod 20"/>
            <xsl:copy-of select="$colors/color[$pos]"/>
        </xsl:for-each>
    </xsl:variable>

    <xsl:template match="/">
        <html>
            <head>
                <style>
                    th, td {
                        border: solid black 1px ;
                        padding: 3px;                       
                        border-spacing:2px;
                        border-collapse: collapse;
                        width: 100px;
                    }
                    th {
                        font-family:verdana;
                        font-size:60%;
                        color:green;
                        align:center;
                        white-space: nowrap;
                    }
                    <xsl:for-each select="$testIDs">
                    <xsl:variable name="pos" select="position()"/>
                     tr.testid<xsl:value-of select="."/> {
                        font-family:verdana;
                        font-size:60%;
                        font-weight:bold;
                        color:<xsl:value-of select="$colorList/color[$pos]"/>;
                        align:center
                    }
                   </xsl:for-each>
                </style>
            </head>                
            <body>
                <table>
                    <tr>
                        <xsl:for-each select="/NewDataSet/defects[1]/*">
                            <th>
                                <xsl:value-of select="name(.)"/>
                            </th>
                        </xsl:for-each>
                    </tr>
                    <xsl:apply-templates select="*"/>
                </table>
            </body>
        </html>
   </xsl:template>

    <xsl:template match="/NewDataSet/defects">
        <tr>
            <xsl:attribute name="class">testid<xsl:value-of select="testid"/></xsl:attribute>
            <xsl:for-each select="*">
                <td>
                    <xsl:value-of select="."/>
                </td>
            </xsl:for-each>
        </tr>
    </xsl:template>

</xsl:stylesheet>

我在下面的 xml 中应用了它:

<?xml version="1.0" standalone="yes"?>
<NewDataSet>
  <defects>
    <Defectid>56</Defectid>
    <testid>111</testid>
    <summary>Release of DIT </summary>
    <DetectedDate>2011-09-21 </DetectedDate>
    <priority>2-Give High Attention</priority>
    <status>Ready to Test</status>
    <project>Business Intelligence</project>
    <assignedTo>peter</assignedTo>
    <detectedBy>john</detectedBy>
    <severity>3-Average</severity>
  </defects>
  <defects>
    <Defectid>829</Defectid>
    <testid>111</testid>
    <summary> Data request</summary>
    <DetectedDate>2012-01-12 </DetectedDate>
    <priority>3-Normal Queue</priority>
    <status>Open</status>
    <project>web</project>
    <assignedTo>tcm</assignedTo>
    <detectedBy>john</detectedBy>
    <severity>3-Average</severity>
  </defects>
  <defects>
    <Defectid>728</Defectid>
    <testid>999</testid>
    <summary>Data request</summary>
    <DetectedDate>2012-01-11</DetectedDate>
    <priority>3-Normal Queue</priority>
    <status>Fixed</status>
    <project>Business Intelligence</project>
    <assignedTo>chris</assignedTo>
    <detectedBy>peter</detectedBy>
    <severity>3-Average</severity>
  </defects>
  <defects>
    <Defectid>728</Defectid>
    <testid>321</testid>
    <summary>Data request</summary>
    <DetectedDate>2012-01-11</DetectedDate>
    <priority>3-Normal Queue</priority>
    <status>Fixed</status>
    <project>Business Intelligence</project>
    <assignedTo>chris</assignedTo>
    <detectedBy>peter</detectedBy>
    <severity>3-Average</severity>
  </defects>
  <defects>
    <Defectid>728</Defectid>
    <testid>457</testid>
    <summary>Data request</summary>
    <DetectedDate>2012-01-11</DetectedDate>
    <priority>3-Normal Queue</priority>
    <status>Fixed</status>
    <project>Business Intelligence</project>
    <assignedTo>chris</assignedTo>
    <detectedBy>peter</detectedBy>
    <severity>3-Average</severity>
  </defects>
  <defects>
    <Defectid>728</Defectid>
    <testid>202</testid>
    <summary>Data request</summary>
    <DetectedDate>2012-01-11</DetectedDate>
    <priority>3-Normal Queue</priority>
    <status>Fixed</status>
    <project>Business Intelligence</project>
    <assignedTo>chris</assignedTo>
    <detectedBy>peter</detectedBy>
    <severity>3-Average</severity>
  </defects>
</NewDataSet>

得到结果

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
                    th, td {
                        border: solid black 1px ;
                        padding: 3px;                       
                        border-spacing:2px;
                        border-collapse: collapse;
                        width: 100px;
                    }
                    th {
                        font-family:verdana;
                        font-size:60%;
                        color:green;
                        align:center;
                        white-space: nowrap;
                    }

                     tr.testid111 {
                        font-family:verdana;
                        font-size:60%;
                        font-weight:bold;
                        color:#0000FF;
                        align:center
                    }

                     tr.testid999 {
                        font-family:verdana;
                        font-size:60%;
                        font-weight:bold;
                        color:#FF0000;
                        align:center
                    }

                     tr.testid321 {
                        font-family:verdana;
                        font-size:60%;
                        font-weight:bold;
                        color:#00FFFF;
                        align:center
                    }

                     tr.testid457 {
                        font-family:verdana;
                        font-size:60%;
                        font-weight:bold;
                        color:#FFFF00;
                        align:center
                    }

                     tr.testid202 {
                        font-family:verdana;
                        font-size:60%;
                        font-weight:bold;
                        color:#347C2C;
                        align:center
                    }
                   </style>
    </head>
    <body>
        <table>
            <tr>
                <th>Defectid</th>
                <th>testid</th>
                <th>summary</th>
                <th>DetectedDate</th>
                <th>priority</th>
                <th>status</th>
                <th>project</th>
                <th>assignedTo</th>
                <th>detectedBy</th>
                <th>severity</th>
            </tr>
            <tr class="testid111">
                <td>56</td>
                <td>111</td>
                <td>Release of DIT </td>
                <td>2011-09-21 </td>
                <td>2-Give High Attention</td>
                <td>Ready to Test</td>
                <td>Business Intelligence</td>
                <td>peter</td>
                <td>john</td>
                <td>3-Average</td>
            </tr>
            <tr class="testid111">
                <td>829</td>
                <td>111</td>
                <td> Data request</td>
                <td>2012-01-12 </td>
                <td>3-Normal Queue</td>
                <td>Open</td>
                <td>web</td>
                <td>tcm</td>
                <td>john</td>
                <td>3-Average</td>
            </tr>
            <tr class="testid999">
                <td>728</td>
                <td>999</td>
                <td>Data request</td>
                <td>2012-01-11</td>
                <td>3-Normal Queue</td>
                <td>Fixed</td>
                <td>Business Intelligence</td>
                <td>chris</td>
                <td>peter</td>
                <td>3-Average</td>
            </tr>
            <tr class="testid321">
                <td>728</td>
                <td>321</td>
                <td>Data request</td>
                <td>2012-01-11</td>
                <td>3-Normal Queue</td>
                <td>Fixed</td>
                <td>Business Intelligence</td>
                <td>chris</td>
                <td>peter</td>
                <td>3-Average</td>
            </tr>
            <tr class="testid457">
                <td>728</td>
                <td>457</td>
                <td>Data request</td>
                <td>2012-01-11</td>
                <td>3-Normal Queue</td>
                <td>Fixed</td>
                <td>Business Intelligence</td>
                <td>chris</td>
                <td>peter</td>
                <td>3-Average</td>
            </tr>
            <tr class="testid202">
                <td>728</td>
                <td>202</td>
                <td>Data request</td>
                <td>2012-01-11</td>
                <td>3-Normal Queue</td>
                <td>Fixed</td>
                <td>Business Intelligence</td>
                <td>chris</td>
                <td>peter</td>
                <td>3-Average</td>
            </tr>
        </table>
    </body>
</html>

在浏览器中看起来如下:

使用键添加变体

<?xml version="1.0" encoding="UTF-8" ?>
<xsl:stylesheet
    version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:std="http://www.standardColors.com"
    exclude-result-prefixes="std">

    <xsl:output method="html"/>

    <xsl:variable name="colors">
        <color>#0000FF</color>
        <color>#FF0000</color>
        <color>#00FFFF</color>
        <color>#FFFF00</color>
        <color>#347C2C</color>
        <color>#800080</color>
        <color>#3B9C9C</color>
        <color>#A52A2A</color>
        <color>#3BB9FF</color>
        <color>#FF00FF</color>
        <color>#6698FF</color>
        <color>#808000</color>
        <color>#8D38C9</color>
        <color>#ADD8E6</color>
        <color>#F660AB</color>
        <color>#F87217</color>
        <color>#F9B7FF</color>
        <color>#FFA500</color>
        <color>#FFE87C</color>
        <color>#8E35EF</color>
    </xsl:variable>

    <!--<xsl:variable name="testIDs" select="distinct-values(//testid)"/>-->

    <xsl:key name="testidKey" match="testid" use="text()"/>

    <xsl:variable name="colorList">
        <xsl:for-each select="//testid">
            <xsl:if test="generate-id() = generate-id(key('testidKey', text())[1])">
                <xsl:variable name="pos" select="position() mod 20"/>
                <color>
                    <xsl:attribute name="testid"><xsl:value-of select="."/></xsl:attribute>
                    <xsl:value-of select="$colors/color[$pos]"/>
                </color>
            </xsl:if>
        </xsl:for-each>
    </xsl:variable>

    <xsl:template match="/">
        <html>
            <head>
                <style>
                    th, td {
                        border: solid black 1px ;
                        padding: 3px;                       
                        border-spacing:2px;
                        border-collapse: collapse;
                        width: 100px;
                    }
                    th {
                        font-family:verdana;
                        font-size:60%;
                        color:green;
                        align:center;
                        white-space: nowrap;
                    }
                    <xsl:for-each select="$colorList/color">
                     tr.testid<xsl:value-of select="@testid"/> {
                        font-family:verdana;
                        font-size:60%;
                        font-weight:bold;
                        color:<xsl:value-of select="."/>;
                        align:center
                    }
                   </xsl:for-each>
                </style>
            </head>                
            <body>
                <table>
                    <tr>
                        <xsl:for-each select="/NewDataSet/defects[1]/*">
                            <th>
                                <xsl:value-of select="name(.)"/>
                            </th>
                        </xsl:for-each>
                    </tr>
                    <xsl:apply-templates select="*"/>
                </table>
            </body>
        </html>
   </xsl:template>

    <xsl:template match="/NewDataSet/defects">
        <tr>
            <xsl:attribute name="class">testid<xsl:value-of select="testid"/></xsl:attribute>
            <xsl:for-each select="*">
                <td>
                    <xsl:value-of select="."/>
                </td>
            </xsl:for-each>
        </tr>
    </xsl:template>

</xsl:stylesheet>

MSXML 错误预防(以及使用的任何其他 xsl 引擎)

参见 convert RTF into node-set和 RTF to node-set generic approach了解更多详情。

<?xml version="1.0" encoding="UTF-8" ?>
<xsl:stylesheet
    version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:std="http://www.standardColors.com"
    xmlns:exslt="http://www.exslt.org/common"
    xmlns:msxsl="urn:schemas-microsoft-com:xslt"
    exclude-result-prefixes="std">

    <xsl:output method="html"/>

    <std:colors>
        <color>#0000FF</color>
        <color>#FF0000</color>
        <color>#00FFFF</color>
        <color>#FFFF00</color>
        <color>#347C2C</color>
        <color>#800080</color>
        <color>#3B9C9C</color>
        <color>#A52A2A</color>
        <color>#3BB9FF</color>
        <color>#FF00FF</color>
        <color>#6698FF</color>
        <color>#808000</color>
        <color>#8D38C9</color>
        <color>#ADD8E6</color>
        <color>#F660AB</color>
        <color>#F87217</color>
        <color>#F9B7FF</color>
        <color>#FFA500</color>
        <color>#FFE87C</color>
        <color>#8E35EF</color>
    </std:colors>

    <xsl:variable name="colors" select="document('')/*/std:colors"/>

    <xsl:key name="testidKey" match="testid" use="text()"/>

    <xsl:variable name="std:colorList">
        <xsl:for-each select="//testid">
            <xsl:if test="generate-id() = generate-id(key('testidKey', text())[1])">
                <xsl:variable name="pos" select="position() mod 20"/>
                <xsl:element name="color">
                    <xsl:attribute name="testid"><xsl:value-of select="."/></xsl:attribute>
                    <xsl:value-of select="$colors/color[$pos + 1]"/>
                </xsl:element>
            </xsl:if>
        </xsl:for-each>
    </xsl:variable>

    <xsl:template match="/">
        <html>
            <head>
                <style>
                    table {
                        font-family:verdana;
                        font-size:60%;
                        font-weight:bold;
                        align:center;
                        white-space: nowrap;
                    }
                    th, td {
                        border: solid black 1px ;
                        padding: 3px;                       
                        border-spacing:2px;
                        border-collapse: collapse;
                        width: 100px;
                    }
                    th {
                        color:green;
                    }
                    <xsl:choose>
                        <xsl:when test="function-available('msxsl:node-set')">
                            <xsl:apply-templates select="msxsl:node-set($std:colorList)/color" mode="addTRclassToCSS"/>
                        </xsl:when>
                        <xsl:when test="function-available('exslt:node-set')">
                            <xsl:apply-templates select="exslt:node-set($std:colorList)/color" mode="addTRclassToCSS"/>
                        </xsl:when>
                        <xsl:otherwise>
                            <xsl:variable name="colorList" select="$std:colorList"/>
                            <xsl:apply-templates select="$colorList" mode="addTRclassToCSS"/>
                        </xsl:otherwise>
                    </xsl:choose>

                </style>
            </head>                
            <body>
                <table>
                    <tr>
                        <xsl:for-each select="/NewDataSet/defects[1]/*">
                            <th>
                                <xsl:value-of select="name(.)"/>
                            </th>
                        </xsl:for-each>
                    </tr>
                    <xsl:apply-templates select="*"/>
                </table>
            </body>
        </html>
   </xsl:template>

    <xsl:template match="/NewDataSet/defects">
        <tr>
            <xsl:attribute name="class">testid<xsl:value-of select="testid"/></xsl:attribute>
            <xsl:for-each select="*">
                <td>
                    <xsl:value-of select="."/>
                </td>
            </xsl:for-each>
        </tr>
    </xsl:template>

    <xsl:template match="color" mode="addTRclassToCSS">
                    tr.testid<xsl:value-of select="@testid"/> {
                    color:<xsl:value-of select="."/>;
                    }
    </xsl:template>
</xsl:stylesheet>