Merging dynamically created data with an HTML template

Question

I have a C# application where I'd like to present information that is accumulated in memory from an embedded system in the form of an HTML page in a near real-time manner. As a proof of concept I've implemented an HttpListener within the application and that works well for serving the data but at the moment for testing I've hard-coded a simple HTML table within the code.

What I'd like to do instead is serve the content based on merging the data with an HTML template that can be modified by the end user. To give an example the columns would be something fairly simple such as the following:

Race: 1
Position     Rider           Horse         Time
   1         Jon Skeet       Fast runner   1:20:10
   2         Joe Bloggs      Not so fast   1:25:20
   ...
   10        PeterJ          Bit slow      2:30:01

I could come up with my own scheme such as the following:

<h1>Race: {f:RaceNum}</h1>
{MaxRows=10}
<table>
    <tr><td>{r:Position}</td><td>{r:Rider}</td><td>{r:Horse}</td><td>{r:Time}</td></tr>
</table>

Which would work fine but it struck me maybe I'm re-inventing the wheel and there is a more standard and extensible way to approach it?

Answer 1

You might consider using XSL for this. Have your program gather data into an XML document and transform it to HTML with XSL. It's a pretty simple structure

<xml>
    <race nbr='1'>
        <racer name='Jon Skeet' horse='Fast Runner' time='1:20'/>
        <racer name='Joe Blogs' horse='Not So Fast' time='1:25'/>
    </race>
    <race nbr='2'>
        <racer name='Jackie Redmond' horse='Ford Prefect' time='1:20'/>
        <racer name='Evanka Osmak' horse='Heart of Gold' time='1:25'/>
    </race>
</xml>

Within your XSL, you'd have a list of variables that include the list of racers, race #, etc.

<?xml version='1.0'?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="xml" indent="no" omit-xml-declaration="yes"/>

<xsl:variable name='race' select='/xml/race'/>

<xsl:template match='/'>
    <xsl:for-each select='$race'>
        <h1>Race <xsl:value-of select='@nbr'/></h1>
        <table>
            <tr>
                <th>Name</th>
                <th>Horse</th>
                <th>Time</th>
            </tr>
            <xsl:for-each select='racer'>
            <tr>
                <td><xsl:value-of select='@name'/></td>
                <td><xsl:value-of select='@horse'/></td>
                <td><xsl:value-of select='@time'/></td>
            </tr>
            </xsl:for-each>
        </table>
    </xsl:for-each>
</xsl:template>

</xsl:stylesheet>

Provide 1 or 2 copies of the XSL as samples for various formatting styles, and allow your end users to provide their own XSL transformation.