ASP.NET : Display XML Data

February 5, 2011 by Christoff Truter ASP.NET   XML  

I recently took the plunge and finally joined stackoverflow.com and I must say its quite a brilliant site (one of the best programming sites in my opinion) with a few very cleverly thought out concepts (badges, bounties, reputation etc).

I also managed to successfully hunt down my first bounty - something that I feel might make for an useful post.

Imagine you've got the following piece of XML:

XML/books.xml

<?xml version="1.0" encoding="utf-8" ?>
<authors>
  <author name="Edsger Wybe Dijkstra">
    <books>
      <book title="A Discipline of Programming" />
      <book title="A Method of Programming" />
      <book title="EWD316 - A Short Introduction to the Art of Programming" />
    </books>
  </author>
  <author name="Bjarne Stroustrup">
    <books>
      <book title="Programming: Principles and Practice Using C++" />
      <book title="The C++ Programming Language" />
      <book title="The Design and Evolution of C++" />
    </books>
  </author>
  <author name="Christoff Truter">
  </author>
</authors>

The XML file contains a list of famous programmers (and one not so famous) along with some of the books they wrote. In the first example I am going to bind a ListView control to a XmlDataSource in order to render the contents of the XML file, observe:

<asp:XmlDataSource runat="server" ID="xmlSource" XPath="authors/author" DataFile="~/XML/books.xml">
</asp:XmlDataSource>

<asp:ListView runat="server" ID="lvAuthors" ItemPlaceholderID="divAuthors" DataSourceID="xmlSource">
	<LayoutTemplate>
		<asp:PlaceHolder runat="server" ID="divAuthors"></asp:PlaceHolder>
	</LayoutTemplate>
	<ItemTemplate>
		<div>
			<h3>
				<%#XPath("@name") %>
			</h3>
		</div>
	</ItemTemplate>
</asp:ListView>

Notice the XPath attribute & expression, they basically provide the control with the means to navigate/display the appropriate nodes. You will also notice that we're only displaying a list of the authors (for abbreviation sake), but what about their books?

In the following snippet I nest a ListView within a ListView in order to achieve exactly that (list of authors including their books), observe:

<asp:ListView runat="server" ID="lvAuthors" ItemPlaceholderID="divAuthors" DataSourceID="xmlSource">
	<LayoutTemplate>
		<asp:PlaceHolder runat="server" ID="divAuthors"></asp:PlaceHolder>
	</LayoutTemplate>
	<ItemTemplate>
		<div>
			<h3>
				<%#XPath("@name") %>
			</h3>
			<asp:ListView runat="server" ID="lvBooks" DataSource='<%#XPathSelect("books/book") %>' ItemPlaceholderID="divBooks">
				<LayoutTemplate>
					<ul>
						<asp:PlaceHolder runat="server" ID="divBooks"></asp:PlaceHolder>
					</ul>
				</LayoutTemplate>
				<ItemTemplate>
					<li>
						<%#XPath("@title") %>
					</li>
				</ItemTemplate>
				<EmptyDataTemplate>
					No Books
				</EmptyDataTemplate>
			</asp:ListView>
		</div>
	</ItemTemplate>
</asp:ListView>

Notice the XPathSelect statement in the preceding snippet, this is where we assign the author books (child nodes) as DataSource to the nested ListView control.

The second method I am going to have a quick look at involves the Xml Control and a xslt file - which I am going to use to render/transform the XML file into HTML.

<asp:Xml ID="Xml1" runat="server" TransformSource="~/XML/books.xslt" DocumentSource="~/XML/books.xml"></asp:Xml>

Like in the first example (for abbreviation sake), we only display a list of authors at first.

XML/books.xslt

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output encoding="utf-8" method="html" />
  <xsl:template match="authors/author">
    <div>
      <h3>
        <xsl:apply-templates select="@name"/>
      </h3>
    </div>
  </xsl:template>
</xsl:stylesheet>

In the following xslt snippet we achieve the same results - as via the nested ListView.

XML/books.xslt

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output encoding="utf-8" method="html" />
  <xsl:template match="authors/author">
    <div>
      <h3>
        <xsl:apply-templates select="@name"/>
      </h3>
      <xsl:if test="books/book">
        <ul>
          <xsl:apply-templates select="books/book"/>
        </ul>
      </xsl:if>
      <xsl:if test="not(books/book)">
        No Books
      </xsl:if>
    </div>
  </xsl:template>
  <xsl:template match="books/book">
    <li>
      <xsl:apply-templates select="@title"/>
    </li>
  </xsl:template>
</xsl:stylesheet>

Additional Reading

http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.xmldatasource.aspx
http://www.w3schools.com/xsl/default.asp
http://stackoverflow.com/questions/4803128/avoid-reloading-all-xml-data-for-each-repeater-vb-net/4849797#4849797