XML/XSLT Dynamic Menu with ASP.NET

• Download source files - 32.5 Kb

Introduction

In this example, I will show how to integrate XML, Cascading Style Sheets (CSS), XSLT and a C#.NET user control to create a menu which shows which page a user is looking at.

Background

The example is based on the code from an excellent book “ASP.NET Website Programming” by Marco Bellinaso and Kevin Hoffman. I have added an additional functionality so the menu shows the current page automatically.

Using the code

First, we need to define the menu items in XML file.

<?xml version="1.0" encoding="utf-8"?>
  <NavMenu>
  <MenuItem title="Page 1" link="/Page1.aspx"/>
  <MenuItem title="Page 2" link="/Page2.aspx"/>
  <MenuItem title="Page 3" link="/Page3.aspx"/>
  </NavMenu>

Second, we need to create a Cascading Style Sheet file with classes for formatting menu items.

.Navigator_Item_Cell {
  PADDING-RIGHT: 1px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; COLOR: #000099; 
  FONT-STYLE: normal; FONT-FAMILY: Arial
  }

.Navigator_Item_Cell_Selected {
  PADDING-RIGHT: 1px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; COLOR: #FFffff; 
  FONT-STYLE: normal; FONT-FAMILY: Arial; BACKGROUND-COLOR: #FF3333
  }

.Navigator_Item_Cell_Selected is used to show the current page.

XSLT takes CurrentPage parameter. It will verify which menu item link contains this page and format this differently from all other menu items. BaseRef parameter is used to provide valid hyperlinks to the menu items based on the application name. The main piece of code here is: <xsl:when test="contains(@link, $CurrentPage)">. It verifies if the item menu is selected to assign Navigator_Item_Cell_Selected CSS class to it. For all other items, Navigator_Item_Cell and Navigator_Item_Link CSS classes are assigned.

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:param name="BaseRef">/EDynamicMenu</xsl:param>
  <xsl:param name="CurrentPage">Page1</xsl:param>
  <xsl:template match="NavMenu">
  <table width="110px" border="0" cellpadding="3px" 
               cellspacing="3px" class="Navigator_Table">
   <xsl:for-each select="MenuItem">
      <tr>
       <xsl:choose>
       <xsl:when test="contains(@link, $CurrentPage)">
     <td class="Navigator_Item_Cell_Selected">
      <xsl:value-of select="@title"/>
    </td>
  </xsl:when>

 <xsl:otherwise>
  <td class="Navigator_Item_Cell">
    <a class="Navigator_Item_Link">
      <xsl:attribute name="href"><xsl:value-of select="concat($BaseRef, 
        @link)"/></xsl:attribute>
      <xsl:value-of select="@title"/>
   </a>
  </td>
  </xsl:otherwise>
  </xsl:choose>

In the User Custom Control, “CurrentPage” information is sent to XSLT file.

protected override void Render( HtmlTextWriter writer )
{
   string baseRef ="";
   currentPage =rex.Replace(Context.Request.Path, ""); 
   //it removes a part of URL till
   // the last "/" to get the page name 

   if(Context.Request.ApplicationPath.Length >1)
     baseRef = Context.Request.ApplicationPath; 
     //to ensure proper hyperlinks. 

   XPathDocument xdoc = 
      new XPathDocument( Context.Server.MapPath( sourceFilePath ) );
   XslTransform xslt = new XslTransform();
   XsltArgumentList xsltArg = new XsltArgumentList();
   xsltArg.AddParam("CurrentPage", "", currentPage);
   xsltArg.AddParam("BaseRef", "", baseRef);
   xslt.Load( Context.Server.MapPath( transformFilePath ) );
   xslt.Transform( xdoc, xsltArg, writer ); 
}

Points of Interest

I believe that this is a powerful way to create flexible navigation menus which automatically show current web page.