Web Development & Execution
David Addison
by David Addison
share this
?fl
« Back to the Blog

Your first XSL transformation in ASP.NET 4.0

06/19/2010
Your first XSL transformation in ASP.NET 4.0

Scenario: You are developing Server Controls in ASP.NET (possibly a shopping cart) and you want all of your clients to use the same code base, but every site will have a differnt layout and design.  Well my friend welcome to the world of XSLT.  Using XSLT you will be able to introduce site specific html structural changes.  Your design layer (fonts, colors etc) will of course be CSS based.  This post will demonstrate how to implement a very simple link list in ASP.NET 4.0 using XML and XSLT to generate custom HTML structure.

There are three pieces to this puzzle.  Your data is in an XML file, your XSLT file tells the XSLT parser how to apply the data.  The XSLT file contains a mix of HTML and references the data points in your XML file.  The third part is the code behind.  For this example I used files named "Test.xml", "Test.xslt", and "Test.aspx, Test.aspx.cs".

 

Contents of Test.xml

<?xml version="1.0" encoding="utf-8" ?>
<nav>
  <hyperlink>
    <url>http://www.google.com</url>
    <title>Google</title>       
  </hyperlink>
  <hyperlink>
    <url>http://www.dirigodev.com</url>
    <title>Dirigo</title>   
  </hyperlink>
  <hyperlink>
    <url>http://www.paysonwelch.com</url>
    <title>Payson Welch</title>
  </hyperlink>
</nav>

 

Contents of Test.xslt - I have bolded the parts to pay attention to.  Specifically "match" tells the parser which node to apply the following transformation to.  So in this case we match the root node.  xsl:for-each is a programmatic loop, the select attribute tells the parser which node to select.  {url} and the xsl:value-of statement are nodes inside of /nav/hyperlink.  When you transform your xml document these parts will be replaced with the values of these nodes.

<?xml version="1.0" encoding="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="html" indent="yes"/>
  <xsl:template match="/">
    <ul>
      <xsl:for-each select="nav/hyperlink">
        <li>
          <a href=" {url} ">
            <xsl:value-of select="title" />
          </a>
        </li>
      </xsl:for-each>
    </ul>
  </xsl:template>
</xsl:stylesheet>

 

C# Code for transforming the XML document

using System.Xml.Xsl;
using System.IO;

........

XslCompiledTransform xslTransformer = new XslCompiledTransform();
xslTransformer.Load(Server.MapPath("Test.xslt"));

MemoryStream ms = new MemoryStream();
xslTransformer.Transform(Server.MapPath("Test.xml"), null, ms);

ms.Seek(0, SeekOrigin.Begin);
StreamReader sr = new StreamReader(ms);
string output = sr.ReadToEnd();
ms.Close();

Response.Write(output);            

 

Thats all she wrote.

When you put these ingredients all together and execute, the result will be:

<ul>
  <li><a href="http://www.google.com">Google</a></li>
  <li><a href="http://www.dirigodev.com">Dirigo</a></li>
  <li><a href="http://www.paysonwelch.com">Payson Welch</a></li>
</ul>

Of course you are not limited to a simple un-ordered list.  You could use the same technique to render a table, a new html5 navigation element, or whatever you would like.  According to the opening scenario each individual website would have its own XSLT file specific to the html and structure required for the design implementation.  You would then have portability of code and functionality while maximizing design and presentation potential.

 

Thanks!

Thank you for contacting us!

We'll be in touch!

Back Home ×