18.3.1 Problem The content for your application is in XML format, and you need to transform it to HTML for display in a browser. 18.3.2 Solution 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. Figure 18-1. Transforming XML to HTML output 
18.3.3 Discussion 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. 18.3.4 See Also 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>
| 
