Click here to Skip to main content
11,649,546 members (76,902 online)
Click here to Skip to main content

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

, 2 Oct 2012 CPOL 51K 1.7K 17
Rate this:
Please Sign up or sign in to vote.
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.

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 XMLdata in our ASP.NET applications. When we need to handle XMLdata and display them then we have 2 ways to do this. First way involved handling the XMLdata in code and then parsing the XMLand extracting the data into DataTables and then using this DataTablesas DataSourcewith 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 XMLby writing code and then populate the DataTables.This way of handling XMLdata 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 XMLdata just for presentation purpose if using XSLTtransformations. What we need to do in this approach is to define an XSLTas per our presentatin requirements and then simply apply that XSLTon our XML and what we get is the HTMLready to present to the user. 

In this article, we will see how we can use XSLTto prcess the XMLand display the data in the required format.

Using the code 

Let us create a small application that will display a simple XMLdata on a web page. The XMLcontains 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 XMLfirst. 

<?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 XSLto process the given XMLdocument 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 XSLTit is advisable to study the w3schools tutorials.

Now we have the XMLand XSLfile ready. How can we display this on the web page. This can be displayed on the web page using ASP.NET XMLserver control. We can place this server control anywhere on the page.


After this from the code behind we need to set the DocumentContentproperty to the XML contents that needs to be displayed. Then we can set the TransformSourceproperty of this XMLcontrol to specify the XSLthat should be used to generate the XHTMLfrom this XML. Once this is done the resulting page will show the XMLdata in the format that has been specified in our XSLfile. 

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 XMLdata is visible in the format that we have specified in our XSLfile.


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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Rahul Rajat Singh
Architect
India India
I Started my Programming career with C++. Later got a chance to develop Windows Form applications using C#. Currently using C#, ASP.NET & ASP.NET MVC to create Information Systems, e-commerce/e-governance Portals and Data driven websites.

My interests involves Programming, Website development and Learning/Teaching subjects related to Computer Science/Information Systems. IMO, C# is the best programming language and I love working with C# and other Microsoft Technologies.
  • Microsoft Certified Technology Specialist (MCTS): Web Applications Development with Microsoft .NET Framework 4
  • Microsoft Certified Technology Specialist (MCTS): Accessing Data with Microsoft .NET Framework 4
  • Microsoft Certified Technology Specialist (MCTS): Windows Communication Foundation Development with Microsoft .NET Framework 4

If you like my articles, please visit my website for more: www.rahulrajatsingh.com[^]

  • Microsoft MVP 2015

You may also be interested in...

Comments and Discussions

 
AnswerArticle of the Day on Microsoft's site Pin
Rahul Rajat Singh9-Oct-12 18:31
memberRahul Rajat Singh9-Oct-12 18:31 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.150804.4 | Last Updated 3 Oct 2012
Article Copyright 2012 by Rahul Rajat Singh
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid