Main Points

We've demonstrated the ability to import XML data into an ASP.NET enabled web page. Now we're going to test our first XSL transform to control the output from the XML file, and see if we can plug it into the .NET webpage as well.

XSLT for Data Manipulation

OK, here we start to get into real XSLT. The control on this page is very similar to the one we used in the previous test. The main exception is the new attribute, TransformSource, which specifies the path to locate our 02DisplayOneElement.xsl, our XSL transform.

<asp:Xml ID="XmlBibliography" runat="server" DocumentSource="XmlResources/Books.xml" TransformSource="Xslt/02DisplayOneElement.xsl" />

Here's the new stuff, this is the XSLT file that we're using. Note that at top, it has the standard XML declaration specifying that this is an XML file, it's version XML 1.0, and uses UTF-8 encoding. It's important to consider this, because it's actually pretty cool. We have a file of data, Books.xml which is written in XML. If we defined the structure of our XML bibliography language we would use a .xsd file and XSD is also an XML language. Now you can see that XSLT is also an XML language. So all three of the most important pieces of this technology, XML, XSD, and XSLT are XML languages so it's relatively easy to learn them all since they are highly related and very similar.

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" exclude-result-prefixes="">
<xsl:template match="/">
<h3>Book Title</h3>
<xsl:for-each select="/Bibliography/item/title">
<xsl:sort select="." />
<p><xsl:value-of select="." /></p>
</xsl:for-each>
<h3>Series Titles</h3>
<xsl:for-each select="/Bibliography/item/seriesName">
<xsl:sort select="." />
<p><xsl:value-of select="." /></p>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>

And here's the output which this generates.

Book Title

Atlas of World History

Breaking the Maya Code

DHTML and CSS Advanced

Flash 8 Accelerated

Flash 8: Graphics, Animation, & Interactivity

Flash 8: Projects for Learning Animation and Interactivity

Gone for Soldiers

Hubble: The Mirror on the Universe

Paris 1919: Six Months That Changed the World

The Crusades Through Arab Eyes

Til We Have Faces

Web Design: Tools and Techniques

Web Designers Reference: An Integrated Approach to Web Design with XHTML and CSS

World Atlas

Writing On Both Sides of the Brain

Series Titles

The Byzantium series

The Lord of the Rings series

The Marcus Didius Falco series

The US Civil War series

The US Revolution series

Skip to Main Points

XSLT Structure

Let's take a look at the basic structure of the XSL transform.

<xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" exclude-result-prefixes="">
<xsl:template match="/">
.
.
.
</xsl:template>
</xsl:stylesheet>

The root element of any XSLT file is xsl:stylesheet. Here we declare the version of XSLT that we're working with and set the namespace for XSL transforms (just like we declare the XHTML namespace in the <html> tag of an XHTML file. Currently, we are not using the exclude-result-prefixes, but only because we don't have any prefixes defined in our file. Our XML file is still lacking a formal namespace. We will have to correct this soon, and when that happens we will have some prefixes running around our document (for example, the stylesheet element takes the xsl prefix). We don't want these prefixes from the source tree to be passed along into the result tree and this is the attribute that strips them out. So while I'm not putting it to work here, it's ready and waiting for when I do.

The element which follows the root is <xsl:template>. It specifies that it contains a template to be applied to a specific section of the XML document. Since we want this template to apply to the entire XML document, we need to specify the root element. In the naming conventions used in XSLT, called XPath, the symbol used to indicate the root element is a slash, /. Hence the match attribute is set to slash. You can see that our honeymoon is in a way over. For reasons that are no doubt important, but which I certainly don't understand, XPath is not an XML language. So while XSLT is an XML language, it uses a lot of XPath which is not, and I've found that XPath takes some getting used to.

These are the fundamental parts of an XSL Transform. You'll find them in virtually every XSLT file, just like you'll file <html>, <head>, and <body> in virtually every XHTML file.

Skip to Main Points

XSL Transforms

Yes, all of that was necessary, but you probably want to know how that huge blob of information became those two lists, right? Here's the real guts of the XSL transform that made the magic happen.

<h3>Book Title</h3>
<xsl:for-each select="/Bibliography/item/title">
<xsl:sort select="." />
<p><xsl:value-of select="." /></p>
</xsl:for-each>
<h3>Series Titles</h3>
<xsl:for-each select="/Bibliography/item/seriesName">
<xsl:sort select="." />
<p><xsl:value-of select="." /></p>
</xsl:for-each>

First, since we're inside the template we can use XHTML elements. Very cool. Remember that the whole point of XSLT is to transform one kind of XML into another; in our case we're converting our specialized bibliographic XML into standard XHTML. So the first thing in each section is a level 3 heading that specifies the titles we are displaying. Following that is an <xsl:for-each> element. The select attribute specifies what we're going to affect. In the first instance we're moving from the root element, Bibliography, and tracing a path to the title element, using XPath of course. In the second instance, we're tracing a path to the seriesName element. The XPath is very much like specifying a path through folders in a file structure, but in this case what we're navigating is not folders but various levels of nested XML tags. For example, the book titles are listed in the title tags which are nested in the item tags, which are nested in the root Bibliography tag, /Bibliography/item/title.

The next key element is the <xsl:value-of> element. Note that it is nested within <p> tags to provide XHTML structure to the titles, though it should probably be a list. The value we want displayed within the <p> tags is the title or series name that we selected in the <for-each> element. We want the text associated with that element. In XPath, the way to denote the current node is with a period, so the select attribute of the <xsl:value-of> is set to period.

The final thing I've chosen to do is sort the results with an <xsl:sort> tag. By default, this sorts the items alphabetically. Further, the sort is very powerful since it can sort on any element in the XML file. I want them sorted by title and, yes, title is the current node, so you can guess what happens next. We use a select attribute with a value of period just like when we were using the <xsl:value-of> element.

Skip to Main Points
← Back to 1. Displaying Raw XML
Continue to 3. Display Titles by Series →
← ← Jump back to XML / XSLT Play