Rendering XML Data as HTML using XSL Transformation and ASP.NET XML Control

• Download demo - 3 KB

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 XML data 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.

History  

• 03 October 2012: First version