email article printer friendly get the code more resources

Separate Form, Function, and Style
Take advantage of VS.NET's support for XML technologies to make your Web apps more versatile and easier to modify.
by Don Kiely

February 2003 Issue

Technology Toolbox: VB.NET, C#, ASP.NET, XML

Web developers now have the tools to separate Web pages' content, structure, and formatting, letting you use each one more effectively and plug in new features and changes easily. XML holds the content and provides the means to transform it into various forms of HTML with Extensible Stylesheet Language Transformations (XSLT). Cascading Style Sheets (CSS) make it pretty.

Figure 1. Transform XML Into Formatted XHTML.

The Visual Studio .NET IDE includes built-in support for creating and modifying content using these technologies, and it gets them to work together well. I'll explore this support and show how you can integrate styles into your applications. I assume you know each technology's basics—which aren't difficult to learn—and how to apply them (see the sidebar, "Reduce Separation Anxiety With XML"). I'll focus on the tools for using CSS to display XML after XSLT transforms it.

I'll use a simple transformation of XML content from two sources to demonstrate working with CSS in an ASP.NET app. The first source is a disk file with a pizzeria's customer information (see Listing 1). The second is a historical record of each customer's pizza orders (see Listing 2). An important technique XSLT provides for flexible Web applications is the ability to combine multiple sources of XML data into a single output stream. XSLT uses the XSLT document() function to combine the two files (see Listing 3).

The document() function returns the contents of the second set of XML data as a node set—essentially, as a branch of the XML data hierarchy. The <xsl:variable> element's select attribute loads the XML data and applies an XPath query to filter the node set:

<xsl:variable name="CustomerLookup"
   select="document('Pizza 
      Customers.xml')
      /Customers/Customer[@CustomerID=
      current()/@CustomerID]"/>

Internet Explorer displays the transformation's results (see Figure 1).