Step 1: Create the XML file
XML can be in memory representation or a flat file. The XML
file that I will be using for this illustration is shown below. This file has
the population data of different countries along with the names of cities and
percentage of population.
Listing 1
<?xml version="1.0" encoding="UTF-8"?>
<countries>
<country name="USA" continent="North America">
<stats>
<Population>301,139,947</Population>
<cities>
<city name="NYC" percentage="2.72"/>
<city name="Los Angeles" percentage="1.15"/>
<city name="Chicago" percentage="0.94"/>
</cities>
</stats>
</country>
<country name="India" continent="Asia">
<stats>
<Population>1,129,866,154</Population>
<cities>
<city name="Bangalore" percentage="0.50"/>
<city name="Chennai" percentage="0.58"/>
<city name="Kolkata" percentage="0.60"/>
</cities>
</stats>
</country>
<country name="China" continent="Asia">
<stats>
<Population>1,321,851,888</Population>
<cities>
<city name="Beijing" percentage="1.10"/>
<city name="Shanghai" percentage="1.51"/>
<city name="Tianjin" percentage="0.51"/>
</cities>
</stats>
</country>
</countries>
Copy this data into a file and name it aspalliance.xml.
Step 2: Create the XSLT file
The XSLT file can be created using your favorite editor. I
recommend XML Spy because
it has very good support for XML and XSLT. The stylesheet for this example is
shown below.
Listing 2
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="xml" version="1.0" encoding="UTF-8" indent="yes"/>
<xsl:template match="/">
<html>
<head/>
<body>
<h1>Countries</h1>
<xsl:apply-templates/>
</body>
</html>
</xsl:template>
<xsl:template match="countries">
<xsl:apply-templates/>
</xsl:template>
<xsl:template match="country">
<h3>
<xsl:value-of select="@name"/> (<xsl:value-of select="@continent"/>)
</h3>
<xsl:apply-templates/>
</xsl:template>
<xsl:template match="stats">
Population : <xsl:value-of select="@Population"/>
<xsl:apply-templates/>
</xsl:template>
<xsl:template match="cities">
<table border="1" >
<tr>
<td>Name</td>
<td>Percentage</td>
</tr>
<xsl:apply-templates/>
</table>
</xsl:template>
<xsl:template match="city">
<tr>
<td>
<xsl:value-of select="@name"/>
</td>
<td>
<xsl:value-of select="@percentage"/>
</td>
</tr>
<xsl:apply-templates/>
</xsl:template>
</xsl:stylesheet>
Some important notes about XSLT
You will have noticed that I have a template section for
every XML element. When the XSLT processor encounters the statement <xsl:apply-templates/>,
it searches for the template that matches (ex: <xsl:template
match="city"> ) and applies it.
The syntax <xsl:value-of select="@percentage"/>
is used to print the value of the element/attribute.
Copy this XSLT into a file and name it aspalliance.xslt.
Step 3: Create a web page that displays the XML using
XSLT in ASP.NET
ASP.NET has excellent support for XML and XSLT. First,
import the necessary namespaces.
Listing 3
using System.Xml;
using System.Xml.Xsl;
using System.Xml.XPath;
using System.IO;
Add the XML and XSLT files into the web project. Create an
aspx page (or a ascx control) and use the method (ApplyXSLTransformation())
below that will read the XML and the XSLT document and return a string that is
the HTML representation of the transformed XML data.
Listing 4
private string ApplyXSLTransformation()
{
string strHtml;
string strXstFile = Server.MapPath("aspalliance.xslt");
XslCompiledTransform x = new XslCompiledTransform();
// Load the XML
XPathDocument doc = new XPathDocument(Server.MapPath("aspalliance.xml"));
// Load the style sheet.
XslCompiledTransform xslt = new XslCompiledTransform();
xslt.Load(strXstFile);
MemoryStream ms = new MemoryStream();
XmlTextWriter writer = new XmlTextWriter(ms, Encoding.ASCII);
StreamReader rd = new StreamReader(ms);
xslt.Transform(doc, writer);
ms.Position = 0;
strHtml = rd.ReadToEnd();
rd.Close();
ms.Close();
return strHtml;
}You can use the string (strHtml) that is returned in this
method in anyway useful for your application. Ex: You can assign it to a label
or process it further as needed.
Step 4: View the Output
The output of transformation is shown in the figure below.
Figure 2
