DotNetStories
Displaying XML data using XSLT transformations in an ASP.Net site
In this post, I will try to show you how to display xml data in asp.net website after making some xslt transformations.
You will need to know a few things about XSLT. The best place to find out about XSLT is this link. I am going to explain a few things about XSLT elements and functions in this post, anyway.
You will see the namespaces we are going to use and some of the main classes and methods.All these come with the FCL (Framework class library) and we just have to know what they do.
We will use a hands on example to demonstrate that.
1) Launch Visual Studio 2008/2010. Express editions will work fine. I am using Visual Studio 2010 Ultimate edition. 2) Create an empty asp.net web site. Choose an appropriate name. Choose C# as the development language. 3) Add an item to your website, a web form. Leave the default name. 4) Add another item in your site, an xml document.Name it footballers.xml.The code for the XML Document follows:
<?xml version="1.0" ?>
<footballers>
<footballer Position="Attacking Midfielder">
<team>Liverpool</team>
<name>Steven Gerrard</name>
<manager>Kenny Dalglish</manager>
<price>40.000.000</price>
</footballer>
<footballer Position="Striker">
<team>Manchester United</team>
<name>Wayne Rooney</name>
<manager>Alex Ferguson</manager>
<price>60.000.000</price>
</footballer>
<footballer Position="Striker">
<team>Barcelona</team>
<name>Lionel Messi</name>
<manager>Pep Guardiola</manager>
<price>110.000.000</price>
</footballer>
<footballer Position="Central Defender">
<team>Chelsea</team>
<name>John Terry</name>
<manager>Carlos Anchelotti</manager>
<price>30.000.000</price>
</footballer>
<footballer Position="Striker">
<team>Manchester City</team>
<name>Carlos Tevez</name>
<manager>Roberto Manchini</manager>
<price>65.000.000</price>
</footballer>
<footballer Position="Stiker">
<team>Panathinaikos</team>
<name>Cibril Cisse</name>
<manager>Zesualdo Ferreira</manager>
<price>15.000.000</price>
</footballer>
</footballers>
This is a very simple xml document. Yes I admit it , I am mad about football and especially the "Premiership". It is a very simple document. 5) Add another item in your site, a XSLT file.Name it footballers.xslt. The contents of the XSLT file follow:
<?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="/">
<html>
<head>
<title>Footballer's XSLT Demo</title>
</head>
<body>
<h2>Footballer's Information</h2>
<br/>
<br />
<table bgcolor="#008BE7" border="1" cellpadding="5">
<tr>
<td>Team</td>
<td>Name of Player</td>
<td>Name of Manager</td>
<td>Price</td>
</tr>
<xsl:for-each select="footballers/footballer">
<xsl:sort select="team"/>
<tr>
<td>
<xsl:value-of select="team"/>
</td>
<td>
<xsl:value-of select="name"/>
</td>
<td>
<xsl:value-of select="manager"/>
</td>
<td>
<xsl:value-of select="price"/>
</td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Let me explain what I do here. The <xsl:output method="html"/> element defines the format of the output document. The <xsl:for-each select="footballers/footballer"> element allow us to perform some sort of looping when we specify the path. I use the <xsl:sort select="team"/> element to sort the the data according to "team" data in an ascending order. The following elements are used to extract the values of the selected nodes.
The <xsl:template match="/"> is a top-level element that contains rules to apply when a specified node is matched.
We use the match attribute to associate the template with an XML element.The match="/" defines the whole document.
<xsl:value-of select="team"/>
<xsl:value-of select="name"/>
<xsl:value-of select="manager"/>
<xsl:value-of select="price"/>
6) In the Page_Load event handling routine of the Default.aspx page, type
string MyXmlPath = Request.PhysicalApplicationPath + "\\Footballers.xml";
string MyXsltPath = Request.PhysicalApplicationPath + "\\Footballers.xslt";
XPathDocument xmlDoc = new XPathDocument(MyXmlPath);
XslCompiledTransform XSLTransform = new XslCompiledTransform();
XSLTransform.Load(MyXsltPath);
XSLTransform.Transform(MyXmlPath, null, Response.Output);
I store in 2 variables the paths of the .xlst and .xml files. I create an instance of the XPathDocument class and store in there the XML document. Then I create an instance of the XslCompiledTransform class that we will use to transform the XML data using an XSLT stylesheet.Then I load the stylesheet.
XSLTransform.Load(MyXsltPath);
Then I execute the transform and output the results.
7) Do not forget to add these namespaces in the Default.aspx.cs file
using System.Xml;
using System.Xml.Xsl;
using System.Xml.XPath;
8) Run your application and see the footballer's related data (transformed by the XLST file) being displayed in the screen.
9) If you want the transformation results to be saved to an .htm file you must , comment out this line of code
i) XSLTransform.Transform(MyXmlPath, null, Response.Output);
ii) Add another item to your site, an .htm file. Name it Football.htm. iii) Add these lines of code to the Page_Load routine.
string MyHTMLPath = Request.PhysicalApplicationPath + "\\Football.htm";
XSLTransform.Transform(MyXmlPath, MyHTMLPath);
10) Run your application and see the footballer's related data (transformed by the XLST file) being written into the html file.Open the Football.htm file. Drop me an email if you want the source code. Hope it helps!!!