The content for your application is in XML format, and you need to transform it to HTML for display in a browser.
Use an ASP.NET XML control and set
its
DocumentSource
property to the XML document you
need to transform and the TransformSource
property
to the XSLT document that specifies the transformation to be
performed.
In the .aspx
file, place an
asp:Xml
control where you want the HTML from the
transformation to be placed in the page.
In the code-behind class for the page, use the .NET language of your choice to:
Set the DocumentSource
property of the XML control
to the relative path to the XML document to convert.
Set the TransformSource
property to the relative
path to the XSLT document.
Example 18-5 through Example 18-7 show the .aspx
file and
VB and C# code-behind files for an application that demonstrates this
solution. The XML used as the source is shown in Example 18-8, and the XSLT used to transform the XML is
shown in Example 18-9. The output transformed to HTML
is shown in Figure 18-1.
XML is quickly becoming the predominant format for storing content. XML provides a platform-independent format that can easily be converted to many other formats, including HTML. By storing the content for your web application in XML, the same content can be transformed to the HTML needed for display in a standard browser or the HTML needed for a PDA.
In our example to illustrate this problem, an XML document containing
book information (Example 18-8) is transformed into
an HTML table using an XSLT document (Example 18-9).
The transformation is performed by an Xml
server
control.
When you use an Xml
control
to
do the work, you need to set only two of its properties to convert
XML to HTML. The DocumentSource
property needs to
be set to the relative path to the XML document to convert, and the
TransformSource
property needs to be set to the
relative path to the XSLT document, as we have done in our example.
Most controls that use files require a fully qualified name of the
file on the web server. However, the Xml
control
requires a relative path from the root folder of the web site to the
XML and XSLT files. Setting the properties to fully qualified paths
will result in an exception being thrown.
xmlTransform.DocumentSource = "xml/books.xml" xmlTransform.TransformSource = "xml/books.xslt" xmlTransform.DocumentSource = "xml//books.xml"; xmlTransform.TransformSource = "xml//books.xslt";
The majority of the work to
perform an XSL transformation is in
the creation of the XSLT. An XSLT document is a specially formatted
XML document and, as such, requires a declaration defining the
version of XML and the encoding of the document. In addition,
elements indicating that the document is an XSL
stylesheet
and defining the output method are
required, as shown here:
<?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:stylesheet>
In XSLT, templates are used to
replace
specific content in the XML document with the template defined in an
xsl:template
element. In our example, two
templates are used. The first template defines the base structure of
the HTML table that will be used to display the XML content when it
is converted to HTML, as shown here:
<!-- output main table with header row --> <xsl:template match="Root"><table width="80%" border="1" cellspacing="0" cellpadding="4">
<tr class="TableHeader" bgcolor="#000080">
<td width="50%" align="center">Title</td>
<td width="25%" align="center">ISBN</td>
<td width="25%" align="center">Publisher</td>
</tr>
<xsl:apply-templates select="Book"/></table>
</xsl:template>
This template also instructs the conversion to apply additional
templates using the Book
element of the XML
document as a source for the data.
<xsl:apply-templates select="Book"/>
The xsl:apply-templates
element is roughly
equivalent to a for
loop that would iterate
through each Book
element in the XML document
applying our second template, as shown here:
<!-- output a row in the table for each Book node in the XML document --> <xsl:template match="Book"> <tr class="TableCellNormal" bgcolor="#ffffe0"> <td width="50%"><xsl:value-of select="Title"/>
</td> <td width="25%" align="center"><xsl:value-of select="ISBN"/>
</td> <td width="25%" align="center"><xsl:value-of select="Publisher"/>
</td> </tr> </xsl:template>
This template generates a row for the base HTML table for each
Book
element in the XML document. Each cell in the
table contains an xsl:value-of
element that
instructs the transformation to insert the value of the element
indicated by the select
attribute in the cell.
XSLT is very powerful and can be used to perform very complex transformations, including transformations that dynamically vary according to passed parameters, and is not limited to converting XML to HTML. To learn the techniques of XSLT, these books are highly recommended: XSLT and the XSLT Cookbook, both from O’Reilly.
XSLT, by Doug Tidwell (O’Reilly); XSLT Cookbook, by Sal Mangano (O’Reilly)
Example 18-5. Transforming XML to HTML (.aspx)
<%@ Page Language="vb" AutoEventWireup="false"
Codebehind="CH18TransformingXMLToHTMLVB.aspx.vb"
Inherits="ASPNetCookbook.VBExamples.CH18TransformingXMLToHTMLVB" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Transforming XML To HTML</title>
<link rel="stylesheet" href="css/ASPNetCookbook.css">
</head>
<body leftmargin="0" marginheight="0" marginwidth="0" topmargin="0">
<form id="frmTransformXML" method="post" runat="server" >
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center">
<img src="images/ASPNETCookbookHeading_blue.gif">
</td>
</tr>
<tr>
<td class="dividerLine">
<img src="images/spacer.gif" height="6" border="0"></td>
</tr>
</table>
<table width="90%" align="center" border="0">
<tr>
<td><img src="images/spacer.gif" height="10" border="0"></td>
</tr>
<tr>
<td align="center" class="PageHeading">
Transform XML To HTML (VB)
</td>
</tr>
<tr>
<td><img src="images/spacer.gif" height="10" border="0"></td>
</tr>
<tr>
<td align="center" class="MenuItem">
<asp:Xml ID="xmlTransform" Runat="server" />
</td>
</tr>
</table>
</form>
</body>
</html>
Example 18-6. Transforming XML to HTML code-behind (.vb)
Option Explicit On Option Strict On '----------------------------------------------------------------------------- ' ' Module Name: CH18TransformingXMLToHTMLVB.aspx.vb ' ' Description: This module provides the code behind for the ' CH18TransformingXMLToHTMLVB.aspx page ' '***************************************************************************** Imports System Namespace ASPNetCookbook.VBExamples Public Class CH18TransformingXMLToHTMLVB Inherits System.Web.UI.Page 'controls on the form Protected xmlTransform As System.Web.UI.WebControls.Xml '************************************************************************* ' ' ROUTINE: Page_Load ' ' DESCRIPTION: This routine provides the event handler for the page load ' event. It is responsible for initializing the controls ' on the page. '------------------------------------------------------------------------- Private Sub Page_Load(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles MyBase.Load'set the names of the XML and XSLT documents used in the
'transformation
xmlTransform.DocumentSource = "xml/books.xml"
xmlTransform.TransformSource = "xml/books.xslt"
End Sub 'Page_Load End Class 'CH18TransformingXMLToHTMLVB End Namespace
Example 18-7. Transforming XML to HTML code-behind (.cs)
//---------------------------------------------------------------------------- // // Module Name: CH18TransformingXMLToHTMLCS.aspx.cs // // Description: This module provides the code behind for the // CH18TransformingXMLToHTMLCS.aspx page // //**************************************************************************** using System; namespace ASPNetCookbook.CSExamples { public class CH18TransformingXMLToHTMLCS : System.Web.UI.Page { // controls on the page protected System.Web.UI.WebControls.Xml xmlTransform; //************************************************************************ // // ROUTINE: Page_Load // // DESCRIPTION: This routine provides the event handler for the page // load event. It is responsible for initializing the // controls on the page. //------------------------------------------------------------------------ private void Page_Load(object sender, System.EventArgs e) {// set the names of the XML and XSLT documents used in the
// transformation
xmlTransform.DocumentSource = "xml//books.xml";
xmlTransform.TransformSource = "xml//books.xslt";
} // Page_Load } // CH18TransformingXMLToHTMLCS }
Example 18-8. XML source used for transformation
<Root> <Book> <BookID>1</BookID> <Title>Access Cookbook</Title> <ISBN>0-596-00084-7</ISBN> <Publisher>O'Reilly</Publisher> </Book> <Book> <BookID>2</BookID> <Title>Perl Cookbook</Title> <ISBN>1-565-92243-3</ISBN> <Publisher>O'Reilly</Publisher> </Book> <Book> <BookID>3</BookID> <Title>Java Cookbook</Title> <ISBN>0-596-00170-3</ISBN> <Publisher>O'Reilly</Publisher> </Book> <Book> <BookID>4</BookID> <Title>JavaScript Application Cookbook</Title> <ISBN>1-565-92577-7</ISBN> <Publisher>O'Reilly</Publisher> </Book> <Book> <BookID>5</BookID> <Title>VB .Net Language in a Nutshell</Title> <ISBN>0-596-00092-8</ISBN> <Publisher>O'Reilly</Publisher> </Book> <Book> <BookID>6</BookID> <Title>Programming Visual Basic .Net</Title> <ISBN>0-596-00093-6</ISBN> <Publisher>O'Reilly</Publisher> </Book> <Book> <BookID>7</BookID> <Title>Programming C#</Title> <ISBN>0-596-00117-7</ISBN> <Publisher>O'Reilly</Publisher> </Book> <Book> <BookID>8</BookID> <Title>.Net Framework Essentials</Title> <ISBN>0-596-00165-7</ISBN> <Publisher>O'Reilly</Publisher> </Book> <Book> <BookID>9</BookID> <Title>COM and .Net Component Services</Title> <ISBN>0-596-00103-7</ISBN> <Publisher>O'Reilly</Publisher> </Book> </Root>
Example 18-9. XSLT used to transform HTML
<?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"/> <!-- output main table with header row --> <xsl:template match="Root"> <table width="80%" border="1" cellspacing="0" cellpadding="4" align="center"> <tr class="TableHeader" bgcolor="#000080"> <td width="50%" align="center" >Title</td> <td width="25%" align="center" >ISBN</td> <td width="25%" align="center" >Publisher</td> </tr> <xsl:apply-templates select="Book" /> </table> </xsl:template> <!-- output a row in the table for each Book node in the XML document --> <xsl:template match="Book" > <tr class="TableCellNormal" bgcolor="#FFFFE0"> <td width="50%"><xsl:value-of select="Title"/></td> <td width="25%" align="center"><xsl:value-of select="ISBN" /></td> <td width="25%" align="center"><xsl:value-of select="Publisher" /></td> </tr> </xsl:template> </xsl:stylesheet>