Category Archives: XSLT

Creating Html Table Layout form XML using XSLT

We can create Html layout by XSLT from XML. So you don’t have to depend on XML content that in times might retrieved for a webservice so you are not sure about the content of the xml but you are sure about the structure of the xml.

So, We can make an XSLT depending on XML structure and XSLT would provide the look and feel for the HTML depending on the structure.

Here,

I will proved an example by creating an table form an xml by xslt.

So for this we will need to do the following things:

1) Get the XML ( here we will have an example xml)

2) Writing the XSLT

3) Convert the XML using XSLT

4) Showing the output

 

XML:
This is an XML collected form an webservice response:

<?xml version="1.0" encoding="utf-8"?> <GetSubmittedFormsWithFieldsResult> <SubmittedFormDTO> <FieldList> <SubmittedFormFieldDTO> <Id>0</Id> <PageNumber>1</PageNumber> <FormPageId>0</FormPageId> <FieldName>Adresse_1</FieldName> <FieldValue>My Address 1</FieldValue> </SubmittedFormFieldDTO> <SubmittedFormFieldDTO> <Id>0</Id> <PageNumber>1</PageNumber> <FormPageId>0</FormPageId> <FieldName>Journalnummer</FieldName> <FieldValue /> </SubmittedFormFieldDTO> <SubmittedFormFieldDTO> <Id>0</Id> <PageNumber>1</PageNumber> <FormPageId>0</FormPageId> <FieldName>StX</FieldName> <FieldValue /> </SubmittedFormFieldDTO> <SubmittedFormFieldDTO> <Id>0</Id> <PageNumber>1</PageNumber> <FormPageId>0</FormPageId> <FieldName>Datoogunderskrift_1</FieldName> <FieldValue /> </SubmittedFormFieldDTO> <SubmittedFormFieldDTO> <Id>0</Id> <PageNumber>1</PageNumber> <FormPageId>0</FormPageId> <FieldName>Adresse</FieldName> <FieldValu>Address of form</FieldValu> </SubmittedFormFieldDTO> <SubmittedFormFieldDTO> <Id>0</Id> <PageNumber>1</PageNumber> <FormPageId>0</FormPageId> <FieldName>Navn</FieldName> <FieldValue /> </SubmittedFormFieldDTO> <SubmittedFormFieldDTO> <Id>0</Id> <PageNumber>1</PageNumber> <FormPageId>0</FormPageId> <FieldName>Navn_1</FieldName> <FieldValue>Altaf</FieldValue> </SubmittedFormFieldDTO> <SubmittedFormFieldDTO> <Id>0</Id> <PageNumber>1</PageNumber> <FormPageId>0</FormPageId> <FieldName>Dato</FieldName> <FieldValue>12/12/12</FieldValue> </SubmittedFormFieldDTO> <SubmittedFormFieldDTO> <Id>0</Id> <PageNumber>1</PageNumber> <FormPageId>0</FormPageId> <FieldName>Personnummerfdselsdato_1</FieldName> <FieldValue /> </SubmittedFormFieldDTO> <SubmittedFormFieldDTO> <Id>0</Id> <PageNumber>1</PageNumber> <FormPageId>0</FormPageId> <FieldName>Personnummerfdselsdato</FieldName> <FieldValue /> </SubmittedFormFieldDTO> <SubmittedFormFieldDTO> <Id>0</Id> <PageNumber>1</PageNumber> <FormPageId>0</FormPageId> <FieldName>Datoogunderskrift</FieldName> <FieldValue /> </SubmittedFormFieldDTO> <SubmittedFormFieldDTO> <Id>0</Id> <PageNumber>1</PageNumber> <FormPageId>0</FormPageId> <FieldName>IndleverestilstatsamtetiKbenhavn</FieldName> <FieldValue>dfgdfgd</FieldValue> </SubmittedFormFieldDTO> </FieldList> <ReferenceString /> <Id>24</Id> <FormId>224</FormId> <SubmittedTime>2009-06-02T13:05:38</SubmittedTime> <SurveyID>0</SurveyID> <SurveyName /> <SurveyRecipientGroupID>0</SurveyRecipientGroupID> <UserEmail /> <UserIp>192.168.20.189</UserIp> <ReferenceNumber>11745</ReferenceNumber> <WorkflowStepId>0</WorkflowStepId> <WorkflowStepTitle /> <StatusCodeId>1</StatusCodeId> <StatusCode>0</StatusCode> <IndsenderId>farhana@leads-bd.com</IndsenderId> <StatusCodeText /> <SessionNote /> <ReferenceNumberString /> <FormLink /> <SerialNumber>-1</SerialNumber> <IsSubmitted>false</IsSubmitted> <FormAlias>vi085 PDF</FormAlias> </SubmittedFormDTO> <SubmittedFormFieldDTO> <Id>0</Id> <PageNumber>1</PageNumber> <FormPageId>0</FormPageId> <FieldName>Personnummerfdselsdato_1</FieldName> <FieldValue /> </SubmittedFormFieldDTO> <SubmittedFormFieldDTO> <Id>0</Id> <PageNumber>1</PageNumber> <FormPageId>0</FormPageId> <FieldName>Personnummerfdselsdato</FieldName> <FieldValue /> </SubmittedFormFieldDTO> <SubmittedFormFieldDTO> <Id>0</Id> <PageNumber>1</PageNumber> <FormPageId>0</FormPageId> <FieldName>Datoogunderskrift</FieldName> <FieldValue /> </SubmittedFormFieldDTO> <SubmittedFormFieldDTO> <Id>0</Id> <PageNumber>1</PageNumber> <FormPageId>0</FormPageId> <FieldName>IndleverestilstatsamtetiKbenhavn</FieldName> <FieldValue>afafa</FieldValue> </SubmittedFormFieldDTO> </FieldList> <ReferenceString /> <Id>32</Id> <FormId>224</FormId> <SubmittedTime>2009-06-02T13:55:47.47</SubmittedTime> <SurveyID>0</SurveyID> <SurveyName /> <SurveyRecipientGroupID>0</SurveyRecipientGroupID> <UserEmail>farhana@leads-bd.com</UserEmail> <UserIp>192.168.20.189</UserIp> <ReferenceNumber>11761</ReferenceNumber> <WorkflowStepId>34</WorkflowStepId> <WorkflowStepTitle /> <StatusCodeId>2</StatusCodeId> <StatusCode>0</StatusCode> <IndsenderId>farhana</IndsenderId> <StatusCodeText /> <SessionNote /> <ReferenceNumberString /> <FormLink /> <SerialNumber>18</SerialNumber> <IsSubmitted>true</IsSubmitted> <FormAlias>vi085 PDF</FormAlias> </SubmittedFormDTO> <SubmittedFormDTO> <FieldList> <SubmittedFormFieldDTO> <Id>0</Id> <PageNumber>1</PageNumber> <FormPageId>0</FormPageId> <FieldName>Adresse_1</FieldName> <FieldValue /> </SubmittedFormFieldDTO> <SubmittedFormFieldDTO> <Id>0</Id> <PageNumber>1</PageNumber> <FormPageId>0</FormPageId> <FieldName>Journalnummer</FieldName> <FieldValue /> </SubmittedFormFieldDTO> <SubmittedFormFieldDTO> <Id>0</Id> <PageNumber>1</PageNumber> <FormPageId>0</FormPageId> <FieldName>StX</FieldName> <FieldValue>forældre</FieldValue> </SubmittedFormFieldDTO> <SubmittedFormFieldDTO> <Id>0</Id> <PageNumber>1</PageNumber> <FormPageId>0</FormPageId> <FieldName>Datoogunderskrift_1</FieldName> <FieldValue /> </SubmittedFormFieldDTO> <SubmittedFormFieldDTO> <Id>0</Id> <PageNumber>1</PageNumber> <FormPageId>0</FormPageId> <FieldName>Adresse</FieldName> <FieldValue /> </SubmittedFormFieldDTO> <SubmittedFormFieldDTO> <Id>0</Id> <PageNumber>1</PageNumber> <FormPageId>0</FormPageId> <FieldName>Navn</FieldName> <FieldValue /> </SubmittedFormFieldDTO> <SubmittedFormFieldDTO> <Id>0</Id> <PageNumber>1</PageNumber> <FormPageId>0</FormPageId> <FieldName>Navn_1</FieldName> <FieldValue /> </SubmittedFormFieldDTO> <SubmittedFormFieldDTO> <Id>0</Id> <PageNumber>1</PageNumber> <FormPageId>0</FormPageId> <FieldName>Dato</FieldName> <FieldValue /> </SubmittedFormFieldDTO> <SubmittedFormFieldDTO> <Id>0</Id> <PageNumber>1</PageNumber> <FormPageId>0</FormPageId> <FieldName>Personnummerfdselsdato_1</FieldName> <FieldValue /> </SubmittedFormFieldDTO> <SubmittedFormFieldDTO> <Id>0</Id> <PageNumber>1</PageNumber> <FormPageId>0</FormPageId> <FieldName>Personnummerfdselsdato</FieldName> <FieldValue /> </SubmittedFormFieldDTO> <SubmittedFormFieldDTO> <Id>0</Id> <PageNumber>1</PageNumber> <FormPageId>0</FormPageId> <FieldName>Datoogunderskrift</FieldName> <FieldValue /> </SubmittedFormFieldDTO> <SubmittedFormFieldDTO> <Id>0</Id> <PageNumber>1</PageNumber> <FormPageId>0</FormPageId> <FieldName>IndleverestilstatsamtetiKbenhavn</FieldName> <FieldValue>hfdgdfhhfdhfh</FieldValue> </SubmittedFormFieldDTO> </FieldList> <ReferenceString /> <Id>43</Id> <FormId>224</FormId> <SubmittedTime>2009-06-02T14:49:20</SubmittedTime> <SurveyID>0</SurveyID> <SurveyName /> <SurveyRecipientGroupID>0</SurveyRecipientGroupID> <UserEmail>rakibul_islam@leads-bd.com</UserEmail> <UserIp>192.168.20.185</UserIp> <ReferenceNumber>11784</ReferenceNumber> <WorkflowStepId>34</WorkflowStepId> <WorkflowStepTitle /> <StatusCodeId>2</StatusCodeId> <StatusCode>0</StatusCode> <IndsenderId>rakibul_islam@leads-bd.com</IndsenderId> <StatusCodeText /> <SessionNote /> <ReferenceNumberString /> <FormLink /> <SerialNumber>27</SerialNumber> <IsSubmitted>true</IsSubmitted> <FormAlias>vi085 PDF</FormAlias> </SubmittedFormDTO>

</GetSubmittedFormsWithFieldsResult>

 

 

 

 

Now if we apply following xslt:

 

 

 

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Author: Altaf Hussain; SE; LeadSoft BD. Ltd-->
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:template match="/">
    <html>
      <body>
        <h1 style="font-family:calibri; color:#33CCFF">Submitted Form Details</h1>
        <hr style="color:#33CCFF; width:100%"></hr>
        <table style="background-color:#B7E8FF">
          <tr>
            <td>
              <table style="border:1px solid #33CCFF; font-family:Calibri" bgcolor="transparent" cellspacing="1" cellpadding="2px">
                <tr bgcolor="#B7E8FF" style="border:1px solid #B7E8FF" >
                  <th>FromId</th>
                  <th>Id</th>
                  <xsl:for-each select="//SubmittedFormDTO[1]/FieldList/SubmittedFormFieldDTO">
                    <th>
                      <xsl:value-of select="FieldName"/>
                    </th>
                  </xsl:for-each>
                  <th>ReferenceString</th>
                  <th>SubmittedTime</th>
                  <th>SurveyID</th>
                  <th>SurveyName</th>
                  <th>SurveyRecipientGroupID</th>
                  <th>UserEmail</th>
                  <th>UserIp</th>
                  <th>ReferenceNumber</th>
                  <th>WorkflowStepId</th>
                  <th>StatusCodeId</th>
                  <th>StatusCode</th>
                  <th>IndsenderId</th>
                  <th>StatusCodeText</th>
                  <th>SessionNote</th>
                  <th>ReferenceNumberString</th>
                  <th>FormLink</th>
                  <th>SerialNumber</th>
                  <th>IsSubmitted</th>
                  <th>FormAlias</th>
                </tr>
                <!--For Value-->

                <xsl:for-each select="//FieldList">
                  <tr  align="Justify" style="border:1px solid #B7E8FF">
                    <td style="background-color:white">
                      <xsl:value-of select="../FormId"/>
                    </td>
                    <td style="background-color:white">
                      <xsl:value-of select="../Id"/>
                    </td>
                    <xsl:for-each select="SubmittedFormFieldDTO">
                      <td style="background-color:white" align="Middle">
                        <xsl:value-of select="FieldValue"/>
                      </td>
                    </xsl:for-each>
                    <td style="background-color:white">
                      <xsl:value-of select="../ReferenceString"/>
                    </td>
                    <td style="background-color:white">
                      <xsl:value-of select="../SubmittedTime"/>
                    </td>
                    <td style="background-color:white">
                      <xsl:value-of select="../SurveyID"/>
                    </td>
                    <td style="background-color:white">
                      <xsl:value-of select="../SurveyName"/>
                    </td>
                    <td style="background-color:white">
                      <xsl:value-of select="../SurveyRecipientGroupID"/>
                    </td>
                    <td style="background-color:white">
                      <xsl:value-of select="../UserEmail"/>
                    </td>
                    <td style="background-color:white">
                      <xsl:value-of select="../UserIp"/>
                    </td>
                    <td style="background-color:white">
                      <xsl:value-of select="../ReferenceNumber"/>
                    </td>
                    <td style="background-color:white">
                      <xsl:value-of select="../WorkflowStepId"/>
                    </td>
                    <td style="background-color:white">
                      <xsl:value-of select="../StatusCodeId"/>
                    </td>
                    <td style="background-color:white">
                      <xsl:value-of select="../StatusCode"/>
                    </td>
                    <td style="background-color:white">
                      <xsl:value-of select="../IndsenderId"/>
                    </td>
                    <td style="background-color:white">
                      <xsl:value-of select="../StatusCodeText"/>
                    </td>
                    <td style="background-color:white">
                      <xsl:value-of select="../SessionNote"/>
                    </td>
                    <td style="background-color:white">
                      <xsl:value-of select="../ReferenceNumberString"/>
                    </td>
                    <td style="background-color:white">
                      <xsl:value-of select="../FormLink"/>
                    </td>
                    <td style="background-color:white">
                      <xsl:value-of select="../SerialNumber"/>
                    </td>
                    <td style="background-color:white">
                      <xsl:value-of select="../IsSubmitted"/>
                    </td>
                    <td style="background-color:white">
                      <xsl:value-of select="../FormAlias"/>
                    </td>
                  </tr>
                </xsl:for-each>
              </table>
            </td>
          </tr>
        </table>
      </body>
    </html>
  </xsl:template>
</xsl:stylesheet>

 

This will provide the following Tabular Output in HTML:

image

Fig1: First part of the output

image

Fig2: Second part of the output

 

Now the Conversion Function:

private void ConvertSumbittedFormSeriesDTOWithoutSoapHeader()
       {
           XmlDocument xmlDoc = new XmlDocument();
           xmlDoc.Load(MapPath("XmlFileName.xml"));
           string xslPath = Server.MapPath("XsltFileName.xslt");
           XslCompiledTransform transform = new XslCompiledTransform();
           transform.Load(xslPath);
           transform.Transform(xmlDoc, null, Response.Output);
       }

XSLT: Apply Templates

Using <xsl:Apply-templates/>

Prerequisit: Please go through previous post “XSLT Startup

Using apply-templates enable us to use default templates. It also let us not to think about complex XPATH statements/ finding a complex XPATH pattern that works. Though using apply-templates cause your XSLT code to be larger but it let your code to be simple and easy to go through.

I use same example as in “XSLT-startup” post but just used another XSLT:

<?xml version="1.0" encoding="utf-8" ?>

<xsl:stylesheet version=”1.0″ xmlns:xsl=”http://www.w3.org/1999/XSL/Transform”>

<xsl:template match=”/”>

<html>

<body>

<h1>Employee Listing</h1>

<xsl:apply-templates/>

</body>

</html>

</xsl:template>

<xsl:template match=”employee”>

<div style=”border: 1px dashed  #66CCFF”>

<h3>Employee Id:

<xsl:value-of select=”@employeeid”/>

</h3>

<xsl:apply-templates select=”firstname”/>

<xsl:apply-templates select=”lastname”/>

<xsl:apply-templates select=”homephone”/>

<xsl:apply-templates select=”notes”/>

</div>

</xsl:template>

<xsl:template match=”firstname”>

<b>First Name: </b><xsl:value-of select=”.”/>

<br/>

</xsl:template>

<xsl:template match=”lastname”>

<b>

Last Name:    </b> <xsl:value-of select=”.”/>

<br/>

</xsl:template>

<xsl:template match=”homephone”>

<b>

Home Phone:</b> <xsl:value-of select=”.”/>

<br/>

</xsl:template>

<xsl:template match=”notes”>

<b>

Remarks:</b> <xsl:value-of select=”.”/>

<br/>

</xsl:template>

</xsl:stylesheet>

Where XSLT starts with a entry templates where match=”/” and gradually apply templates that matches with the given XPATH statement for each templates.

Please notice that all the Apply-templates tags are within the <xsl:Stylesheet> tag.
Output:
applytemplates

XSLT: StartUp in ASP.NET

XSLT Conversion >> Start Up:

What is XSLT?

XSLT is processors that can convert, manipulate XML files depending on XPATH statement. XSLT is a language that can define style for various XML elements depending on their positions. XSLT self is a hierarchical document. It is also a programming language with a moderate level of keywords and function.

What XSLT can do?

Most of the time we use XSLT to covert XML files to some other format:

  • XML to XML
  • XML to HTML
  • XML to PDF

This post will discuss about converting XSLT using ASP.net.

Steps:

1)      Create a VS C# web project.

2)      Add a XML document.

3)      Add a XSLT document

VS Solution Structure:

XSLT

Figure 1: VS Solution Structure

Now Let us see some code parts:

The ASPX Page: We will show converted HTML (form XML) as this page data.

Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Customer.aspx.cs" Inherits="XsltSolutions._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns=”http://www.w3.org/1999/xhtml” >

<head runat=”server”>

<title></title>

</head>

<body>

<form id=”form1″ runat=”server”>

<div>

</div>

</form>

</body>

</html>

Code Behind:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Xml;//need to add

using System.Xml.Xsl;//need to add

namespace XsltSolutions

{

public partial class _Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

ConvertCustomerXml();

}

private void ConvertCustomerXml()

{

XmlDocument xmlDoc = new XmlDocument();

xmlDoc.Load(MapPath(“Customer.xml”));

string xslPath = Server.MapPath(“Customer.xslt”);

XslCompiledTransform transform = new XslCompiledTransform();

transform.Load(xslPath);

transform.Transform(xmlDoc, null, Response.Output);

}

}

}

Here the ConvertCustomerXml() function is responsible for conversion. Please notice that we are loading a Customer.xml as xml input and also showing the Customer.xslt file.  The Transform function is primarily responsible for XML to XSLT transformation. It takes three parameters (the XML, the Output method, and xslt arguments.

XML used in this Example: Customer.XML

<?xml version="1.0" encoding="utf-8" ?>

<!– This is list of employees –>

<employees>

<employee employeeid=”1″>

<firstname>Nancy</firstname>

<lastname>Davolio</lastname>

<homephone>(206) 555-9857</homephone>

<notes>

<![CDATA[includes a BA in psychology from Colorado State University in 1970.

She also completed "The Art of the Cold Call." Nancy is a member of Toastmasters

International.]]>

</notes>

</employee>

<employee employeeid=”2″>

<firstname>Andrew</firstname>

<lastname>Fuller</lastname>

<homephone>(206) 555-9482</homephone>

<notes>

<![CDATA[Andrew received his BTS commercial in 1974 and a Ph.D. in international

marketing from the University of Dallas in 1981. He is fluent in French and Italian

and reads German. He joined the company as a sales representative, was promoted

to sales manager in January 1992 and to vice president of sales in March 1993.

Andrew is a member of the Sales Management Roundtable, the Seattle Chamber of

Commerce, and the Pacific Rim Importers Association.]]>

</notes>

</employee>

<employee employeeid=”3″>

<firstname>Janet</firstname>

<lastname>Leverling</lastname>

<homephone>(206) 555-3412</homephone>

<notes>

<![CDATA[Janet has a BS degree in chemistry from Boston College (1984).

She has also completed a certificate program in food retailing management.

Janet was hired as a sales associate in 1991 and promoted to sales representative

in February 1992.]]>

</notes>

</employee>

</employees>

XSLT used in this Example: Customer.xslt

<?xml version="1.0" encoding="iso-8859-1"?>

</xsl:stylesheet>

<xsl:stylesheet version=”1.0″ xmlns:xsl=”http://www.w3.org/1999/XSL/Transform”>

<xsl:template match=”/”>

<html>

<body>

<h2>Customer Information</h2>

<table style=”background-color:#97DDFF”>

<tr>

<td>

<table cellspacing =”1px” cellpadding =”2″ style=”background-color:transparent; border:2px solid #00CCFF; font-family:calibri”>

<tr>

<th style=”background-color:#C1FFFF”>

Employee Id

</th>

<xsl:for-each select=”/employees/employee[1]/*”>

<th style=”background-color:#C1FFFF”>

<xsl:value-of select=”name()”/>

</th>

</xsl:for-each>

</tr>

<xsl:for-each select=”/employees/employee”>

<tr>

<td style=”background-color:white”>

<xsl:value-of select=”@employeeid”/>

</td>

<xsl:for-each select=”node()”>

<td style=”background-color:white”>

<xsl:value-of select=”.”/>

</td>

</xsl:for-each>

</tr>

</xsl:for-each>

</table>

</td>

</tr>

</table>

</body>

</html>

</xsl:template>

Output:XSLTOutput

Figure 2: XSLT Html Output

Solution Logical Coverage:

1)      Naming the Table header using Loop:

Here I placed the table header dynamically form the XML using <xsl:for-each>. Here I have to be concerned about the face that, the table header must be appears only for the first time. Here name() function is returning all the elements names. So, I used the XPATH expression:

<xsl:for-each select="/employees/employee[1]/*">

Here:  //employee[1] making sure we are taking the first employee so that the table header elements are only traversing once. So we are getting the following output:

Header

2)      Getting row using loop depending on elements:

<xsl:for-each select="/employees/employee">

Here I am traversing all the employee elements and creating a row for each employee elements.

3)      Getting field value using loop:

<xsl:for-each select="node()">

<td style=”background-color:white”>

<xsl:value-of select=”.”/>

</td>

</xsl:for-each>

Here I am getting all the value of node/elements and resulting in a table data (column).

4)      Getting all the Node and Attributes:

<xsl:for-each select="@*|node()">

<td style=”background-color:white”>

<xsl:value-of select=”.”/>

</td>

</xsl:for-each>

This will get all the nodes an attributes. No need to get the attributes in a different way than getting all the nodes. In this example we are getting the attributes differently. But there we could use lines this also.

Follow

Get every new post delivered to your Inbox.

Join 54 other followers