Nikolaos Kantzelis ASP.Net Blog

This blog will focus on ASP.NET Framework

Sponsors

About Me

Great Blogs

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: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.

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.

 <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!!!


Comments

nikolaosk said:

I know Sotiris. I was the second person to Like that group, 20 seconds after you created. Have a look here

blogs.msdn.com/.../131166.aspx

# February 6, 2011 7:16 AM

santosh said:

Hi..How to send the output to an email..for ex in your example output is some table data...i want to send this data to email..?

# May 9, 2011 3:17 AM

viji said:

Need Immediate answer please...

In your example, I want to create a link for price tabledata.. when a user click a price, I want to show the price.. How do I that in the above xslt code?  

Thanks

Viji

# August 23, 2011 4:10 PM

viji said:

In your example, I want to create a link for price in tabledata.. when a user click a link, then display the price in the same page.. How do I that in below xslt code?  

Thanks,

Viji

# August 23, 2011 4:16 PM

what is mobile technology said:

Thank goodness some bloggers can still write. My thanks for this post!!!

# November 12, 2011 5:44 PM

chakradhar said:

is it possible to create more number of pages?

# November 17, 2011 4:24 AM

my new pc games said:

This makes great sense to anyone!

# December 4, 2011 11:49 AM

nattuthurai said:

I need source code.. my mail id is nattuthurai.k@live.com

# December 10, 2011 4:29 AM

Hotel Coupons said:

Probably your greatest read on here!!

# December 21, 2011 9:58 PM

Clarence Perdue said:

I would like to get a copy of the code. I can be reach at cperduejr@yahoo.com

# March 10, 2012 7:57 AM

shoba said:

I want code to use XML string not the XML file

# March 12, 2012 1:53 PM

Phen375 GNC said:

I have to say that I agree with the above comment

# June 12, 2012 11:17 AM

Marc said:

Good tutorial but what is with the Position how can i get this?

# July 6, 2012 3:59 AM

Binh Michelle said:

Give me your code . Email : mr.quangbinh@gmail.com

Thank a lot !

# October 31, 2012 2:04 PM