|
|
|
Transforming XML through XSLT with Asp.Net XML Control |
|
Posted by
Moderator1
on
6/26/2007 11:30:33 AM
|
Category:
Asp.Net 2.0 |
|
|
Total Views :
49438 |
|
Adding to your Favorites....
|
|
|
 |
|
|
|
|
|
Introduction |
|
This article makes clear the concept of transforming XML Document through a well-defined
XSLT incorporated with Asp.Net XML Control. |
|
|
|
Description |
Nowadays XML (eXtensible Markup Language), has occupied a huge
part of Asp.Net Technology. Although most of the XML functionality in the .NET Framework
can be found in System.Xml namespace, we can also find the influence of XML throughout
the entire frameworks including System.Data and System.Web and on so many other
namespaces too. Yes, XML provides the core structure within which data can be stored
and passed throughout the Internet. Though the XML document provides the content
needed, but there is no information about how that content should be presented.
|
|
|
Now XSLT comes to center stage. XSLT is a language for transforming
the structure of an XML document. With XSLT, we can select the elements we want
to present, rearrange them, and either output them as a new XML document or provide
additional formatting to create an HTML document, a PDF file or a set of SQL instructions
– whatever we want. XSLT is a W3C specification; the current version is 1.0, and
version 2.0 is a working draft currently under review. And this article, explains
you the concept of transforming an XML Document with two different XSLT formats
with the help of Asp.Net XML Control. Asp.Net XML control is a
new feature available in Asp.Net 2.0 framework, which helps to easily bind XML document
with any XSLT. |
|
|
|
Sample Scenario
I have some collections of CDs with me. I fed these CDs information in an XML document.
Now I’m going to display it for you in two formats. The first XSLT transforms the
XML in a List format. While the second XSLT transforms it in a Tabular format. Let
us start by creating an xml file in your visual studio web application and name
it as cdlist.xml. Copy and paste the following sample file, if you don’t have one.
XML CDList.xml
The structure of the Xml file looks as below |
<?xml version="1.0" encoding="utf-8" ?>
<CDLIST>
<XMLTITLE>My CD Collections</XMLTITLE>
<CD>
<TITLE>Spider-Man 3</TITLE>
<ARTIST>Tobey Maguire</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Sony Pictures</COMPANY>
<PRICE>20.90</PRICE>
<YEAR>2007</YEAR>
</CD>
<CD>
<TITLE>The Pink Panther</TITLE>
<ARTIST>Steve Martin</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>MGM Distribution Company</COMPANY>
<PRICE>17.90</PRICE>
<YEAR>2006</YEAR>
</CD>
<CD>
<TITLE>Mission: Impossible III </TITLE>
<ARTIST>Tom Cruise</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Paramount Pictures</COMPANY>
<PRICE>12.90</PRICE>
<YEAR>2006</YEAR>
</CD>
<CD>
<TITLE>Indepence Day</TITLE>
<ARTIST>Will Smith</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia Pictures</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1997</YEAR>
</CD>
</CDLIST>
|
|
Create First XSLT File ‘ListFormat.xsl’
Before we go to create the format in the XLS file let me give you some basic idea
regarding the XSLT elements. The XSLT stylesheet itself is a valid XML document
and must follow the rules of well-formed. It contains special elements that are
defined by XSLT, which provide rules for the transformation, and may also contain
other types of elements or formatting codes (HTML tags, for example). XSLT-defined
elements belong to the XSLT namespace and are distinguished from other elements
by the XSLT namespace prefix (typically xsl:).
|
xsl:for-each
This element appears inside a template and it will iterate through a set of nodes.
We have to mention the nodes hierarchy as value for the select attributes. The syntax
is
|
|
<lt;xsl:for-each select="node-list"/>
[. . .]
</xsl:for-each> |
xsl:value-of
When this XSLT element appears in a template, it tells the processor to compute
the value of the selected node and copies it into the output document. The item
whose value is selected is relative to the current node. The syntax is
|
|
<xsl:value-of select="expression"/> |
|
We are going to use these two elements to traverse the xml file, retrieve the value
of each node and output those values to the aspx file. Now its time to add a new
XSLT file to your application. Right click on your project in the solution explorer,
click on Add New Item, choose XSLT File and name it as ListFormat.xsl. The new xsl
document will have the following structure.
|
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<!--
This is an XSLT template file. Fill in this area with the
XSL elements which will transform your XML to XHTML.
-->
</body>
</html>
</xsl:template>
</xsl:stylesheet>
|
Since we are going to output the XML in an aspx page, the <html> and <body>
tags within the <xsl:template> section has no effect in the output, so we
can remove it. Inside the <xsl:template> section, insert a <h2> element
to display some header text. Between the header tags, insert the <xsl:value-of>
tag and set its select’s attributes value to the XmlTitle node. You have to traverse
from the parent node to the child node. See below the select attibutes value is
“CDList/XmlTitle”. That is the CDList is the parent node and you need the value
of XMLTitle. So its very clear.
<h2>
<xsl:value-of select="CDList/XmlTitle"/>
</h2>
|
Next we need to design a Html table to display the data in a list format. Insert
a HTML table into the <xsl:template> section with two rows and six columns.
The first row will be the header row for the table. From the section row we will
display the data. Before the beginning of the second row’s <tr> tag we have
to insert the <xsl:for-each> element. This element is response for iterating
the whole xml document on the specified node list mentioned in the select attribute.
So the value for the select attribute will be “CDList/CD”. At each cell of the row,
we have to specify the <xsl:value-of select="YourNodeToDisplay" /> element
with the select attributes value should be the node value to want to output in that
cell. So the whole ListFormat.xsl will look like below
<table width="500" border="1">
<tr>
<td width="125">CD Name</td>
<td width="100">Artist</td>
<td width="75">Country</td>
<td width="75">Company</td>
<td width="75">Price</td>
<td width="50">Year</td>
</tr>
<xsl:for-each select="CDList/CD">
<tr>
<td><xsl:value-of select="TITLE" /></td>
<td><xsl:value-of select="ARTIST" /></td>
<td><xsl:value-of select="COUNTRY" /></td>
<td><xsl:value-of select="COMPANY" /></td>
<td><xsl:value-of select="PRICE" /></td>
<td><xsl:value-of select="YEAR" /></td>
</tr>
</xsl:for-each>
</table> |
|
|
Create Second XSLT File ‘TableFormat.xsl’
Right click on your project in the solution explorer, click on Add New Item, choose
XSLT File and name it as TableFormat.xsl. We are exactly going to do the same things
as we did for ListFormat.xsl, but slightly different in the structure of the Html
table. See below for the format of the Html table below
<h2>
<xsl:value-of select="CDList/XmlTitle" />
</h2>
<table width="500" border="1">
<xsl:for-each select="CDList/CD">
<tr>
<td>
<b>Title: <xsl:value-of select="TITLE" />
</b><br />
Artist: <xsl:value-of select="ARTIST" /><br />
Country: <xsl:value-of select="COUNTRY" /><br />
Company: <xsl:value-of select="COMPANY" /><br />
Price: $ <xsl:value-of select="PRICE" /><br />
Year: <xsl:value-of select="YEAR" />
</td>
</tr>
</xsl:for-each>
</table> |
|
|
Now, we have a XML with data and two XSLT files with two different structures to
perform transformation.
Move towards Default.aspx Page
In your Default.aspx page, drag and drop an Asp.Net XML Control from the Toolbox
Standard tab. The ID of this control will be Xml1. Specify the DocumentSource property
to point the XML file that is CDList.xml. Then specify the TransformSource property
to ListFormat.xsl. Run your page in browser, You can see the data in the XML file
is getting displayed in the way you defined in the ListFormat.xsl. Now change the
TransformSource property to point the second xsl file that is TableFormal.xsl and
run the application, you will be surprised on seeing the same data in different
structure.
|
<asp:Xml ID="Xml1" runat="server" DocumentSource="~/cdlist.xml" TransformSource="~/listformat.xsl"></asp:Xml> |
You can even set the DocumentSource and TransformSource property at runtime. Asp.Net
XML Control is an excellent stuff offered my Microsoft to render the XML document
with any desired structure at runtime. Ease of code and consume less time to build
any XML oriented application.
To view our sample application, click here. |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|