Getting Your Feet Wet with XSLT
In this section we'll examine a simple XSLT document that transforms XML into HTML for display in a browser. The sections that follow show how XSLT can transform XML into many formats other than HTML. This example represents a common task that you will likely use when developing ASP.NET applications that require the presentation of XML data within a browser. Listing 7.1 shows an XML document that contains information about different golfers.
Listing 7.1 Golfers XML Document
1: <?xml version="1.0" ?> 2: <golfers> 3: <golfer skill="excellent" handicap="10" clubs="Taylor Made" id="1111"> 4: <name> 5: <firstName>Heedy</firstName> 6: <lastName>Wahlin</lastName> 7: </name> 8: <favoriteCourses> 9: <course city="Pinetop" state="AZ" name="Pinetop Lakes CC"/> 10: <course city="Phoenix" state="AZ" name="Ocotillo"/> 11: <course city="Snowflake" state="AZ" name="Silver Creek"/> 12: </favoriteCourses> 13: </golfer> 14: <golfer skill="moderate" handicap="12" clubs="Taylor Made" id="2222"> 15: <name> 16: <firstName>Dan</firstName> 17: <lastName>Wahlin</lastName> 18: </name> 19: <favoriteCourses> 20: <course city="Pinetop" state="AZ" name="Pinetop Lakes CC"/> 21: <course city="Pinetop" state="AZ" name="White Mountain CC"/> 22: <course city="Springville" state="UT" name="Hobble Creek"/> 23: </favoriteCourses> 24: </golfer> 25: </golfers>
Listing 7.2 presents an XSLT document that can be used to transform the XML just shown into HTML. The different elements used in this document are discussed later.
Listing 7.2 Golfers XSLT Document
1: <?xml version="1.0" ?>
2: <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
3: version="1.0">
4: <xsl:output indent="yes" method="html"/>
5: <xsl:template match="/">
6: <html>
7: <head>
8: <style type="text/css">
9: .blackText {font-family:arial;color:#000000;}
10: .largeYellowText {font-family:arial;font-size:18pt;
11: color:#ffff00;}
12: .largeBlackText {font-family:arial;font-size:14pt;
13: color:#000000;}
14: .borders {border-left:1px solid #000000;
15: border-right:1px solid #000000;
16: border-top:1px solid #000000;
17: border-bottom:1px solid #000000;}
18: </style>
19: </head>
20: <body bgcolor="#ffffff">
21: <span class="largeBlackText"><b>Golfers: </b></span>
22: <p/>
23: <xsl:apply-templates/>
24: </body>
25: </html>
26: </xsl:template>
27: <xsl:template match="golfers">
28: <xsl:apply-templates/>
29: </xsl:template>
30: <xsl:template match="golfer">
31: <table class="borders" border="0" width="640" cellpadding="4"
32: cellspacing="0" bgcolor="#efefef">
33: <xsl:apply-templates select="name"/>
34: <tr class="blackText">
35: <td width="12%" align="left"><b>Skill: </b></td>
36: <td width="12%" align="left">
37: <xsl:value-of select="@skill"/>
38: </td>
39: <td width="12%" align="left"><b>Handicap: </b></td>
40: <td width="12%" align="left">
41: <xsl:value-of select="@handicap"/>
42: </td>
43: <td width="12%" align="left"><b>Clubs: </b></td>
44: <td width="40%" align="left">
45: <xsl:value-of select="@clubs"/>
46: </td>
47: </tr>
48: <tr>
49: <td colspan="6"> </td>
50: </tr>
51: <tr class="blackText">
52: <td colspan="6" class="largeBlackText">
53: Favorite Courses
54: </td>
55: </tr>
56: <tr>
57: <td colspan="2"><b>City: </b></td>
58: <td colspan="2"><b>State: </b></td>
59: <td colspan="2"><b>Course: </b></td>
60: </tr>
61: <xsl:apply-templates select="favoriteCourses"/>
62: </table>
63: <p/>
64: </xsl:template>
65: <xsl:template match="name">
66: <tr>
67: <td colspan="6" class="largeYellowText" bgcolor="#02027a">
68: <xsl:value-of select="firstName"/> 
69: <xsl:value-of select="lastName"/>
70: </td>
71: </tr>
72: </xsl:template>
73: <xsl:template match="favoriteCourses">
74: <xsl:apply-templates/>
75: </xsl:template>
76: <xsl:template match="course">
77: <tr class="blackText">
78: <td colspan="2" align="left">
79: <xsl:value-of select="@city"/>
80: </td>
81: <td colspan="2" align="left">
82: <xsl:value-of select="@state"/>
83: </td>
84: <td colspan="2" align="left">
85: <xsl:value-of select="@name"/>
86: </td>
87: </tr>
88: </xsl:template>
89: </xsl:stylesheet>
To transform the XML document shown in Listing 7.1 using the XSLT document shown in Listing 7.2, the code shown in Listing 7.3 can be used:
Listing 7.3 Using the XslTransform Class
1: <%@ Import Namespace="System.Xml" %>
2: <%@ Import Namespace="System.Xml.Xsl" %>
3: <%@ Import Namespace="System.Xml.XPath" %>
4: <script language="C#" runat="server">
5: public void Page_Load(Object sender, EventArgs E) {
6: string xmlPath = Server.MapPath("listing7.1.xml");
7: string xslPath = Server.MapPath("listing7.2.xsl");
8:
9: //Instantiate the XPathDocument Class
10: XPathDocument doc = new XPathDocument(xmlPath);
11:
12: //Instantiate the XslTransform Class
13: XslTransform transform = new XslTransform();
14: transform.Load(xslPath);
15:
16: //Custom format the indenting of the output document
17: //by using an XmlTextWriter
18: XmlTextWriter writer = new XmlTextWriter(Response.Output);
19: writer.Formatting = Formatting.Indented;
20: writer.Indentation=4;
21: transform.Transform(doc, null, writer);
22: }
23: </script>
On executing the code in Listing 7.3, the XML document will magically be transformed into HTML that can be rendered in a browser. The result of this transformation is shown in Figure 7.2.
){kind=link}
Figure 7.2 Transforming an XML document into HTML.
The code shown in Listings 7.2 and 7.3 may look quite foreign to you at this point. Don't let that worry you, though, because each portion of the code will be broken down to show how the different pieces work together. In addition to covering the XSLT language, the examples that follow also demonstrate XPath expressions as a point of review. For a detailed explanation of XPath, refer to Chapter 3, "XPath, XPointer, and XLink." Before examining the .NET classes involved in transforming XML to other structures, let's first examine what pieces are involved in constructing an XSLT document.