Transforming Xml Data Into Html
Download as PPT, PDF0 likes1,020 views
The document discusses transforming XML data into HTML using XSLT. It provides steps to create an XML file with sample link data, add an XSL stylesheet to select and display the XML elements as HTML, and create an ASP.NET page with an XML control to render the transformed XML using the XSLT stylesheet. Styles are also added to format the displayed HTML.
Transforming Xml Data Into Html
- 1. Transforming XML data into HTML http://www.livetolearn.in
- 2. XSL An Extensible stylesheet Language (XSL) transformation pulls data from XML nodes and renders the content according to given instructions We can render the raw data as attractive HTML on an ASP.NET page. http://www.livetolearn.in
- 3. Add a new XML file named links.xml to the App_Data folder Enter the following sample data: <? xml version = " 1.0 " encoding = " utf-8 " ?> < links > < link > < title > Microsoft Official ASP.NET site </ title > < url > http://www.asp.net </ url > < description > The primary site for ASP.NET developers. </ description > </ link > < link > < title > Collection of Tutorials, Ebooks, Videos </ title > < url > http://www.livetolearn.in </ url > < description > Computer Programming Tutorials, Tutorial Sites, E-books, Videos, Powerpoint Presentations </ description > </ link > </ links > http://www.livetolearn.in
- 4. Add xslt stylesheet file in root folder and replace with the following content <? xml version ="1.0" encoding ="utf-8"?> < xsl:stylesheet version ="1.0" xmlns:xsl ="http://www.w3.org/1999/XSL/Transform"> < xsl:template match ="/links"> < xsl:for-each select ="link" > < p class ="headingtitle"> < xsl:value-of select ="title"/> </ p > < div class ="content"> URL: < xsl:value-of select ="url"/> </ div > Description: < xsl:value-of select ="description"/> < hr /> </ xsl:for-each > </ xsl:template > </ xsl:stylesheet > http://www.livetolearn.in
- 5. Add a asp.net page xmltohtml.aspx Add a Xml Control from Toolbox On the Xml control’s property window set the following properties http://www.livetolearn.in
- 6. Now, add styles as you want with in <head> tag in the aspx file For example add the following code or define it by clicking New Style in the sidebar < style type ="text/css"> .headingtitle { font-weight: bold; background-color: #FFFF00; border-style: ridge; } .content { background-color: #99CCFF; font-weight: bold; border-style: outset; } </ style > http://www.livetolearn.in
- 7. Now, browse it (F5 / Ctrl+F5) http://www.livetolearn.in