Click here to Skip to main content
15,861,172 members
Articles / Web Development / ASP.NET

Beginners Introduction To XSL Transform: Rendering XML Data using XSL - Get HTML Output

Rate me:
Please Sign up or sign in to vote.
4.71/5 (16 votes)
7 Jul 2009CPOL3 min read 130.4K   841   42   15
Beginners Introduction to Rendering XML data using XSL transformation, a step by step guide to rendering XML data using XSL

Overview

Sometimes, we need to display the XML data in our web application in a specific format. XSLT provides the ability to display the XML document in some specific format like HTML, PDF, etc. We can select an XML file or a portion of XML File and using XSL Transformation, we can display in some specific format.

SampleFlow

An XSL transformation needs an XML document to transform and an XSL style sheet describing how the transformation will take place. An XSLT engine then transforms the XML document via the XSL style sheet and will produce the output in the format specified by the style sheet.

Here, I am just going to show you how we can display an XML data using XSL in our web page and which will help beginners to start with. This is a sample application. The XSL, which I have used over here is very simple. If you want to learn details on XSL, please read tutorials from W3School.

How to Implement ?

In this section, I have described the steps which we need to follow to render an XML data using XSL. The source of the data can be anything, we can load data from text file, database or can be an XML file itself. But at the time of XSLTranformation, we need to provide the XML data format and the XSL file path.

The steps are listed below.

1. Create Database

Rather than reading the data from XML, I have read the data from database. First of all, I have created a DB, called Student with table name “StudentDetails”. The table contains some dummy data like:

db

Figure: Sample Data

2. Add XSL File

Before, reading the data from database, we have to create the XSL file. We can add XSL file by just right clicking on the project > Add New Item >Select XSLT File.

AddXSL

Figure: Add New XSL File

I have put the xsl file in a specific folder called XSL. This is not mandatory to put the xsl file inside the XSL folder. we have to keep it in mind while providing the filepath for XSL rendering.

FileH

Figure: File Structure

3. Designing XSL

Now, designing XSL is one of the important tasks, and there are many things that are related to an XSL file design. In my case, XSL file is very simple and there is no complexity to design the page, but if you need to learn in details, I will suggest you read from W3School. First of all, have a look into the XML data which I got from the dataset.

xml

And based on that, we need to design the XSL File. Below is the StudentDetails XSL.

XML
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 <xsl:template match="/">
<table width="100%" align="center" cellpadding="0" cellspacing="0" border="1"
 style="background-color:#123456;font-family:verdana;font-size:10pt;border:1">
<tr>
<td  width="10%"  align="left" >
 Roll</td>
<td width="70%" align="left">
 Name</td>
<td width="20%" align="left">
 Address</td>
</tr>
</table>
<xsl:for-each select="Students/Table">
<table width="100%" align="center" cellpadding="0" cellspacing="0" border="1"
 style="font-family:verdana;font-size:10pt;border:1">
<tr >
<td  width="10%"  align="left"   >
 <xsl:value-of select="Roll"/></td>
<td width="70%" align="left" >
 <xsl:value-of select="Name"/></td>
<td  width="20%" align="left" >
 <xsl:value-of select="Address"/></td>
</tr>
</table>
</xsl:for-each>
 </xsl:template>
</xsl:stylesheet>

The XML root node is started with "Students/Table", and the XSL will read the content for each and every child. Following section of the XSL will do the job for that.

XML
<xsl:for-each select="Students/Table"> 

Now, have a look into the code.

What did I do? I have just read the data from database and stored the data in a dataset, then just read the XML content from dataset using:

C#
string XMLString=ds.GetXml();

Below is the complete code for reading the data from database and reading the XML string from dataset.

C#
public string strstudentDetails = string.Empty;
 protected void Page_Load(object sender, EventArgs e)
 {
 string    _strConnectionString = "Data Source=.\\sqlexpress;Initial Catalog=Student;
           Integrated Security=True";
 string _strquery = "select * from studentDetails";
 SqlConnection con = new SqlConnection(_strConnectionString);
 DataSet ds = new DataSet("Students");
 SqlDataAdapter da = new SqlDataAdapter(_strquery, con);
 da.Fill(ds);
 //Get the XML From DataSet
 string strXML = ds.GetXml();
 strstudentDetails=GetHtml(Server.MapPath("~/xsl/studentDetails.xsl"), strXML);
 }

Now, I have wrote a function GetHTML. GetHtml function is actually doing the job. It is taking XSL Stylesheet and XML data as parameter peforming the XSL transformation and returning the HTML output.

C#
/// <summary>
/// Get HTML From XML and XSL
/// </summary>
///<param name="xsltPath">XSL File Path</param>
///<param name="xml">XML String</param>
/// <returns>HTML Output</returns>
public static string GetHtml(string xsltPath, string xml)
{
MemoryStream stream = new MemoryStream(ASCIIEncoding.Default.GetBytes(xml));
XPathDocument document = new XPathDocument(stream);
StringWriter writer = new StringWriter();
XslCompiledTransform transform = new XslCompiledTransform();
transform.Load(xsltPath);
transform.Transform(document, null, writer);
return writer.ToString();
}
}

Now we have got the HTML data and we have to display the data to the page. The below code is used to display the actual content into the page.

HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <title>Student Page</title>
</head>
<body>
 <form id="form1" runat="server">
<div>
<table >
<tr>
<td>
 <b>Student Info : Displaying using XSL Rendering</b></td>
</tr>
<tr>
<td>
 <%= strstudentDetails %></td>
</tr>
</table>
</div>
</form>
</body>
</html>

Now, run the web site, you will get the following output:

Output123

Hope this will help you to move ahead with XSL Transformation.

Thank you for reading!

License

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


Written By
Technical Lead
India India
.NET Consultant | Former Microsoft MVP - ASP.NET | CodeProject MVP, Mentor, Insiders| Technology Evangelist | Author | Speaker | Geek | Blogger | Husband

Blog : http://abhijitjana.net
Web Site : http://dailydotnettips.com
Twitter : @AbhijitJana
My Kinect Book : Kinect for Windows SDK Programming Guide

Comments and Discussions

 
QuestionCSS Pin
estebanfloresf5-Mar-14 4:53
estebanfloresf5-Mar-14 4:53 
GeneralMy vote of 5 Pin
basak20075-Mar-12 1:41
basak20075-Mar-12 1:41 
GeneralMy vote of 1 Pin
robvon6-Jul-09 19:16
robvon6-Jul-09 19:16 
GeneralMy vote of zero. Pin
robvon6-Jul-09 19:15
robvon6-Jul-09 19:15 
GeneralRe: My vote of zero. Pin
Abhijit Jana6-Jul-09 19:26
professionalAbhijit Jana6-Jul-09 19:26 
GeneralMy vote of 1 Pin
Kamran Shahid5-Jul-09 19:51
Kamran Shahid5-Jul-09 19:51 
GeneralRe: My vote of 1 Pin
Abhijit Jana5-Jul-09 20:25
professionalAbhijit Jana5-Jul-09 20:25 
GeneralMy vote of 1 Pin
Tarabanko Yury5-Jul-09 11:40
Tarabanko Yury5-Jul-09 11:40 
GeneralRe: My vote of 1 Pin
Abhijit Jana5-Jul-09 18:50
professionalAbhijit Jana5-Jul-09 18:50 
GeneralRe: My vote of 1 Pin
Tarabanko Yury5-Jul-09 21:37
Tarabanko Yury5-Jul-09 21:37 
GeneralRe: My vote of 1 Pin
Abhijit Jana5-Jul-09 23:12
professionalAbhijit Jana5-Jul-09 23:12 
General5? Self-rating is to humiliate oneself Pin
ImHere2Learn5-Jul-09 4:22
professionalImHere2Learn5-Jul-09 4:22 
GeneralRe: 5? Self-rating is to humiliate oneself Pin
Abhijit Jana5-Jul-09 18:57
professionalAbhijit Jana5-Jul-09 18:57 
GeneralRe: 5? Self-rating is to humiliate oneself Pin
Kamran Shahid5-Jul-09 19:52
Kamran Shahid5-Jul-09 19:52 
GeneralRe: 5? Self-rating is to humiliate oneself Pin
Abhijit Jana5-Jul-09 20:29
professionalAbhijit Jana5-Jul-09 20:29 

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

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