When you think ASP, think...
Recent Articles
All Articles
ASP.NET Articles
ASPFAQs.com
Message Board
Related Web Technologies
User Tips!
Coding Tips

Sections:
Sample Chapters
Commonly Asked Message Board Questions
JavaScript Tutorials
MSDN Communities Hub
Official Docs
Security
Stump the SQL Guru!
XML Info
Information:
Feedback
Author an Article
Technology Jobs
ASP ASP.NET ASP FAQs Message Board Feedback ASP Jobs
Print this page.
Published: Wednesday, April 23, 2003

Displaying Hierarchical XML Data of an Arbitrary Depth Using XSLT
By Scott Mitchell


Introduction
In June of this year, I will be teaching a three-week XML for .NET course at the University of California - San Diego, University Extension. In preparing the course material, I have been examining XML and related technologies quite a bit lately.

One related XML technology that is quite useful for Web developers like myself is XSLT, which stands for eXtensible Stylesheet Language - Transformation. XSLT is an XML-formatted syntax that translates XML data from one format to another. For example, you might have an XML file on your Web server that contains a list of popular books on ASP.NET. This XML file might contain the following

- continued -

'

structure:

<?xml version="1.0" encoding="UTF-8"?>
<books>
  <book price="34.95">
    <title>Teach Yourself Active Server Pages 3.0 in 21 Days</title>
    <authors>
      <author>Mitchell</author>
      <author>Atkinson</author>
    </authors>
    <year>1999</year>    
  </book>
  
  <book price="29.95">
    <title>Designing Active Server Pages</title>
    <authors>
      <author>Mitchell</author>
    </authors>
    <year>2000</year>
  </book>

  <book price="34.95">
    <title>ASP.NET: Tips, Tutorials, and Code</title>
    <authors>
      <author>Mitchell</author>
      <author>Mack</author>
      <author>Walther</author>
      <author>Seven</author>
      <author>Anders</author>
      <author>Nathan</author>
      <author>Wahlin</author>
    </authors>
    <year>2001</year>
  </book>
</books>

This data is ugly. Perhaps you want to display it in an HTML <table>. Enter XSLT! To display this information you could create an XSLT file that specifies how this data should be transformed into HTML content. This article does not go into the details of XSLT - for basic information on XSLT be sure to check out the recent FAQ, What is XSLT and how does it relate to XML?, as well as the XSL Tutorials on XMLFiles.com.

Applying XSLT to an XML Document
There are a number of ways you can apply an XSLT stylesheet to XML data. This can be done on the client-side (if the user is visiting the page with a browser that supports such functionality), or on the server-side. With ASP.NET it is painfully easy to display formatted XML through the use of the XML Web control. For more information on displaying XSLT-formatted XML through an ASP.NET Web page, be sure to check out: FAQ: How can I display XSL-formatted XML data in an ASP.NET Web page?

Displaying an XML Document with an Arbitrary Depth
XML is great at modeling hierarchical data in an easy-to-read fashion. For example, in the ASP.NET books XML example we just examined, by glancing at the XML content you can quickly deduce that each <books> element has an arbitrary number of <book> children elements. Similarly, each <book> element has three child elements: <title>, <authors>, and <year>. And, finally, each <authors> element has an arbitrary number of <author> child elements.

If you know the depth of your XML document's hierarchy, then it is fairly straightforward to create an XSLT file that will display all of the XML data grouped by each element level. That is, in this live demo, you can see how an XSLT file can be used to group each book, and then to group the authors of each book. This can all be done with a fairly simple and straightforward XSLT file.

However, what if your XML file has an arbitrary hierarchical depth? For example, imagine an XML document that has information about a filesystem. This XML document might contain the following content:

<?xml version="1.0" encoding="UTF-8"?>
<filesystem>
  <drive letter="C">
    <folder name="Program Files">
      <folder name="Visual Studio .NET">
        <file size="324122">devenv.exe</file>
      </folder>
      <folder name="Microsoft Office">
        <folder name="Word" />
        <folder name="Access" />
        <folder name="Outlook" />
        <folder name="Excel" />
      </folder>
    </folder>
    <folder name="Windows">
      <folder name="Web" />
      <folder name="System32">
        <folder name="Microsoft">
          <folder name="Crypto">
            <folder name="RSA" />
          </folder>
        </folder>
        <file size="28432">xcopy.exe</file>
      </folder>
      <file size="256192">winhelp.exe</file>
      <file size="249260">explorer.exe</file>          
    </folder>
  </drive>
  <drive letter="D">
    <folder name="Backup" />
  </drive>
</filesystem>

As you can hopefully ascertain from the XML document's content, there can be <folder> elements up to an arbitrary depth. Furthermore, in each <folder> there can be an arbitrary number of <file> elements.

Now, the question we are faced with is this: How can we display the above XML data in an HTML Web page so that it appears in the following format?

  • C:\
    • Program Files
      • Visual Studio .NET
        • devenv.exe
      • Microsoft Office
        • Word
        • Access
        • Outlook
        • Excel
    • Windows
      • Web
      • System32
        • Microsoft
          • Crypto
            • RSA
        • xcopy.exe
      • winhelp.exe
      • explorer.exe
  • D:\
    • Backup

An ugly way to handle cases where there is some upper-limit on the folder depths is to create just a ton of <xsl:for-each ...> elements, like so:

<?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="/filesystem">
    <ul>
    <xsl:for-each select="drive">
      <li><xsl:value-of select="@letter" />:\</li>
      <ul>
      <xsl:for-each select="folder">
        <ul>
        <xsl:for-each select="folder">
          <ul>
          <xsl:for-each select="folder">
            <ul>
               <xsl:for-each select="file">
                 <li><xsl:value-of select="text()" /></li>
               </xsl:for-each>
            </ul>
          </xsl:for-each>
          <xsl:for-each select="file">
            <li><xsl:value-of select="text()" /></li>
          </xsl:for-each>
          </ul>
        </xsl:for-each>
        <xsl:for-each select="file">
          <li><xsl:value-of select="text()" /></li>
        </xsl:for-each>
        </ul>
      </xsl:for-each>
    </xsl:for-each>
    </ul>
  </xsl:template>
</xsl:stylesheet>

Note that here we hard-coded in <xsl:for-each> elements to accomodate for up to three levels of folder hierarchy. Of course, this idea could be extended to any set level of depth, but it is hard to read, verbose, and will not display any folders or files that are beyond that set level of hierarchy depth.

There is a better way, as we'll see in Part 2, one that is much more concise and will display data for a completely arbitrary depth.

  • Read Part 2!



  • ASP.NET [1.x] [2.0] | ASPMessageboard.com | ASPFAQs.com | Advertise | Feedback | Author an Article