XSL Transform : Rendering XML Data using as HTML In Web Page

No.of Views1944
Bookmarked0 times
Downloads 
Votes0
By  Jana   On  15 Feb 2010 23:02:44
Tag : ASP.NET , How to
XSL Transform : Rendering XML Data using as HTML In Web Page
emailbookmarkadd commentsprint

Images in this article missing? We recently lost them in a site migration. We're working to restore these as you read this. Should you need an image in an emergency, please contact us at info@codegain.com

 

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.

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

xsl

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

File

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

{codecitation class="brush: xml; gutter: true;" width="650px"}
RollNameAddress
{/codecitation}

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.

{codecitation class="brush: csharp; gutter: true;" width="650px"}

//Get the XML From DataSet
string strXML = ds.GetXml();

{/codecitation}

Below code is used to read data from database

{codecitation class="brush: csharp; gutter: true;" width="650px"}

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

{/codecitation}

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

{codecitation class="brush: csharp; gutter: true;" width="650px"}

///


/// Get HTML From XML and XSL
///

/// XSL File Path
/// XML String
/// HTML Output
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();
}

{/codecitation}



Now for displaying the result, we have to put following line in the aspx page,

{codecitation class="brush: html; gutter: true;" width="650px"} Student Page

Student Info : Displying using XSL Rendering

{/codecitation}

and the output like,

Output123

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

Download source code

Thankyou

Abhijit


 
Sign Up to vote for this article
 
About Author
 
Jana
Occupation-Not Provided
Company-Not Provided
Member Type-Fresh
Location- Not Provided
Joined date-19 Jun 2009
Home Page-Not Provided
Blog Page-Not Provided
 
 
Other popularSectionarticles
Comments
There is no comments for this articles.
Leave a Reply
Title:
Display Name:
Email:
(not display in page for the security purphase)
Website:
Message:
Please refresh your screen using Ctrl+F5
If you can't read this number refresh your screen
Please input the anti-spam code that you can read in the image.
^ Scroll to Top