XSL Transformation : Rendering XML using XSL – HTML Output

Overview

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

SampleFlow

An XSL transformation need 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 a XML data using XSL in our web page and which will help beginners to start with. This is an 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 ?

1. Create Data Base :

Rather than reading the data from xml, I have read the data from database. First of all I have create an DB Student with table name “StudentDetails” . Table contain some dummy data like,

db

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 click on the project > Add New Item >Select XSLT File

AddXSL

I have put the xsl file in a specific folder called XSL .
 

 

FileH
 

 

3. Desing XSL

Now, Designing XSL is one of the important task, and there are many things that related with XSL . In my case, this is very simple XSL, but if you need to learn in details, I will suggest you to read from W3School. First of all have a look into the XML data which I have got from the dataset.

xml

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

 

 

</span>

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

<span style="font-family: Verdana; font-size: x-small;">

Now, have a look into the code,

Read the data from database and put it into dataset. We can easily get the XML from dataset using.


string XMLString=ds.GetXml();

Below code is used to read data from database

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);
 }

GetHtml function actually doing the job. Its taking XSL Stylesheet and XML data as parameter and returning the html output

 

 

 

 

/// <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 for displaying the result, we have to put following line in the aspx page,

<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 : Displying using XSL Rendering</b></td>
</tr>
<tr>
<td>
 <%= strstudentDetails %></td>
</tr>
</table>
</div>
</form>
</body>
</html>

and the output like,

Output123

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

Thankyou

 

 

 

 

 

9 thoughts on “XSL Transformation : Rendering XML using XSL – HTML Output

  1. Hi Abhijit,

    I just read your article related to SOAPUI. It was very good article. Good work done!

    I am lecturer for M.Sc. Computer Science at Thakur College, affiliated to University of Mumbai.

    Recently I am enrolled for Ph.D. in Computer Science and my topic is how to improve web services performance.

    I seek your help. Can you please give me more references please.

    Please send me email.

    Kind regards.
    Girish Tere

  2. I see that the XSLT path is being saved to a local drive and that is being fetched on for further use. Is there any way, that we can read the XSLT file directly from the Db and write it through the memorystream instead of loading it up from the local drive?

  3. Hi Abhijit,

    It is nice reading your articles as explained with an excel details. Specially your real-time deployment article on Session Management is awesome. I seek your help understanding Web application deployment and real-time pros & cons. Can you please help me out in this regard?

  4. Hi I am trying to create output report data file from xml input document using existing xsl style sheet.
    I want to highlight every column header, and start creating a new page afte the end of current page that ends with the error message.
    I am enclosing the first few lines of xml and then xsl stylesheet as follows:

    Healthsuite Authorizations


    <!–

    –>


    Submitter Name:

    Submission Date:

    /

    /

    Service Provider Information:


    Services Review: Type:

    Services:

    this is the xsl style sheet.

    I need to highlite all the column headers such as; “heathersuite authorization”, “submitter name”, Submission date” etc.
    And want to get the page break after the error message is printed.

    Please help me out asap

    Thank You
    gsp

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s