Rendering XML Data as HTML using XSL

Transformation and ASP.NET XML Control

Rahul Rajat Singh, 2 Oct 2012

Introduction
This article talks about how we can render XML data in an ASP.NET application. We will see how this
can be done using XSLT transformations.

Background
There are many scenarios when we need to handle XML data in our ASP.NET applications. When we
need to handle XML data and display them then we have 2 ways to do this. First way involved
handling the XML data in code and then parsing the XML and extracting the data into DataTables
and then using this DataTables as DataSource with any of the ASP.NET server control.

The above mentioned technique is not only inefficient but also error prone becauase the developer
will have the extract the data from XML by writing code and then populate the DataTables.This way
of handling XML data just for presentation sometimes become very problematic if the data that we
are recieving is of more than 2 dimensions i.e. multiple tables coming in form of XML. This is still a
perfectly doable way of handling this data but all the code that we write is overkill just to display the
data.

Another way, and the recommended way, of handling XML data just for presentation purpose if
using XSLT transformations. What we need to do in this approach is to define an XSLT as per our
presentatin requirements and then simply apply that

XSLT

on our XML and what we get is the HTML ready to present to the user.

In this article, we will see how we can use XSLT to prcess the XML and display the data in the
required format.

Using the code

Let us create a small application that will display a simple XML data on a web page.
The XML contains contact information of some people and we need to display this data in a tabular
grid like format to the user. Lets look at the sample XML first.
<?xml version="1.0" encoding="utf-8" ?>
<Contacts>
<Contact>
<Name>Sample Name 1</Name>
<MobileNumber>111111111</MobileNumber>
<email>sample@one.com</email>
<address>Sample Address 1</address>
</Contact>
<Contact>
<Name>Sample Name 2</Name>
<MobileNumber>222222222</MobileNumber>
<email>sample@two.com</email>
<address>Sample Address 2</address>
</Contact>
</Contacts>

Now let us decide the format in which we want to show the data to the user.

Now let us write the XSL to process the given XML document and display it in the desired format.

<?xml version="1.0" encoding="utf-8"?>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
<table width="500px" border="1px" style="text-align:left;border-collapse:collapse">
<tr backcolor="blue">
<td>
<strong>Name</strong>
</td>
<td>
<strong>
Mobile Number
</strong>
</td>
<td>
<strong>
eMail ID
</strong>
</td>
<td>
<strong>
Address
</strong>
</td>
</tr>
<xsl:for-each select="Contacts/Contact">
<tr>
 <td>
<xsl:value-of select="Name"/>
</td>
<td>
<xsl:value-of select="MobileNumber"/>
</td>
<td>
<xsl:value-of select="email"/>
</td>
<td>
<xsl:value-of select="address"/>
</td>
</tr>
</xsl:for-each>
</table>
</xsl:template>

</xsl:stylesheet>

Note: To undertand all the details of XSLT it is advisable to study the w3schools tutorials.

Now we have the XML and XSL file ready. How can we display this on the web page. This can be
displayed on the web page using ASP.NET XML server control. We can place this server control
anywhere on the page.

After this from the code behind we need to set the DocumentContent property to the XML
contents that needs to be displayed. Then we can set the

TransformSource

property of this XML control to specify the XSL that should be used to generate the XHTML from
this XML. Once this is done the resulting page will show the XMLdata in the format that has been
specified in our XSL file.
protected void Page_Load(object sender, EventArgs e)
{
// this is being read from the same folder as this page is in.(only for demo purpose)
// In real applications this xml might be coming from some external source or database.
string xmlString = File.ReadAllText(Server.MapPath(@".\SampleData.XML"));

// Define the contents of the XML control

xmlContacts.DocumentContent = xmlString;

// Specify the XSL file to be used for transformation.

 xmlContacts.TransformSource = Server.MapPath(@".\Contacts.xsl");
}

Now when we run the page we can see that the XML data is visible in the format that we have
specified in our XSL file.

Point of Interest
Coming from a background of System Software development and C++, I didn't get chance to use
the XSL transformations earlier to display the XML data in ASP.NET applications. I used to do it the
hard way i.e. taking the XML data and putting it into the Diconnected Data classes and then using
these as DataSource with any ASP.NET server control. Very recently I got a chance to work with huge
amount of data coming in XML format. Also the data had more than 2 dimensions. To cater to that
problem, I used this approach of displaying the data. And since I already had the DataTable version
of the application ready too, I could see the visible performance improvements using this
approach(as the amount of server side processing has been reduced a lot).
Most of the experienced programmers already know this stuff. This article is meant for the beginners.
I hope this has been informative.