Introduction
I have been learning how to mess around with XML in the .NET Framework. I came across the XSLT formatting of the XML to an HTML table. When I first had a go at this, I found the HTML was rather bland and I wanted to add some formatting to the XSLT. I have done this by placing my styling in the head of the HTML. My styling is a little OTT, but it is merely that was just to give an example.
Background
I am a new to programming and enjoy making different languages and concepts work together so here is a bit of C#, XML, XSLT and HTML for good measure. I have done most of my Data handling Learning via making sports related Data programs, so here is one of a list of players who can play Midfield in Soccer.
Using the Code
If you ever need to make some XML into a webpage or a web table, here is a very basic way to do this.
The C# is a very basic Console Application of four lines using the namespaces below.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Xml.Xsl;
using System.Xml.XPath;
using System.Xml.Serialization;
using System.Diagnostics;
namespace xmlWebsite
{
class Program
{
static void Main(string[] args)
{
XslCompiledTransform xslt = new XslCompiledTransform();
String outputFile = @"..\players.html";
xslt.Load(@"..\XSLTFile1.xslt");
xslt.Transform(@"..\xmlexcelthing.xml", outputFile);
Process.Start(outputFile);
Console.ReadLine();
}
}
}
The majority of this code runs off the System.Xml.Xsl Namespace. The XSLT file and the XML files are placed in the Programs Bin folder. The XSLT class and methods are called at first plus the string which will be the HTML file. The XSLT is loaded, then the XML file is looped through the XSL to make the HTML. The XSLT code is beneath, the most important part of the XSLT code at the foreach loop which reads each node and uses the formatting in the style sheet to place the XML into the Table. Please note that this program was written in Visual Studio 12.
="1.0" ="utf-8"
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:msxsl="urn:schemas-microsoft-com:xslt" exclude-result-prefixes="msxsl">
<xsl:output method="xml" indent"yes">
<xsl:template match="/">
<html>
<head>
<style>
h1{font-size:60 px; color: #445fff; font-family: garamond;}
#mcsc {background-color: #aabeee;border: 1px solid black;}
body {background-color: #ffe3eb;}
tr{font-family:Trajan;font-size:18pt; color: #e5e500}
</style>
</head>
<body >
<center>
<h1>The Players</h1>
</center>
<center>
<xsl:comment>
-->
</xsl:comment>
<table id ="mcsc" >
<tr>
<th>
<b>Last Name</b>
</th>
<th>
<b>First Name</b>
</th>
<th>
<b>Position</b>
</th>
</tr>
<xsl:comment>
-->
</xsl:comment>
<xsl:for-each select="/Players/Table">
<tr >
<td>
<xsl:value-of select="LName" />
</td>
<td>
<xsl:value-of select="FName" />
</td>
<td>
<xsl:value-of select="Position" />
</td>
</tr>
</xsl:for-each>
</table>
</center>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Below is an example of how the nodes look in the XML. This XML document was made from an Excel Spreadsheet.
<Players>
<Table>
<LName>Fellani</LName>
<FName>Morouanne</FName>
<Position>Center Midfield</Position>
</Table>
<Table>
<LName>Arteta</LName>
<FName>Mickel</FName>
<Position>Center Midfield</Position>
</Table>
<Table>
<LName>Oscar</LName>
<FName />
<Position>Center Midfield</Position>
</Table>
<Table>
<LName>Ramires</LName>
<FName />
<Position>Center Midfield</Position>
</Table>
</Players>
Points of Interest
I was actually quite surprised how easy it was to make an HTML table out of some XML. It might be a useful report for a table of an online report.
History
- 23rd June, 2015: Initial version
