Click here to Skip to main content
15,867,141 members
Articles / Web Development / ASP.NET
Article

XML/XSLT Dynamic Menu with ASP.NET

Rate me:
Please Sign up or sign in to vote.
3.10/5 (19 votes)
17 Mar 20041 min read 160.2K   3.8K   57   11
How to create a web menu which shows the current page.

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
<?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.

CSS
.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.

XML
<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.

C#
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.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Web Developer
Belgium Belgium
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralCombo box get disappear when the menu gets focus Pin
Bhuvaneswari R13-Mar-06 0:54
Bhuvaneswari R13-Mar-06 0:54 
Generaltree menu Pin
Aubyone13-Oct-04 19:31
Aubyone13-Oct-04 19:31 
GeneralTrying to recreate your example... Pin
Jayman91129-Aug-04 5:24
Jayman91129-Aug-04 5:24 
I'm trying to recreate it but i'm having problems...

Did you create this project as a "new CS Web Application"? Or is it a "Web Control Library", etc.?

Also, I'm trying to create a new ".xsl" file like in your example but i don't find that in the visual studio. I'm sure i can just 'fudge' it by changing the extension of another file and copying the code but i'd rather know what i'm doing wrong. How do i properly create an xsl file in Visual Studio??

SN
GeneralRe: Trying to recreate your example... Pin
alex103330-Aug-04 2:07
alex103330-Aug-04 2:07 
GeneralCooolll! Pin
vasacheh18-May-04 8:38
vasacheh18-May-04 8:38 
GeneralNice Pin
Member 70245530-Mar-04 5:22
Member 70245530-Mar-04 5:22 
Questionpics? Pin
Anonymous27-Mar-04 3:52
Anonymous27-Mar-04 3:52 
AnswerRe: pics? Pin
alex103327-Mar-04 4:19
alex103327-Mar-04 4:19 
GeneralRe: pics? Pin
Anonymous13-Jun-04 1:09
Anonymous13-Jun-04 1:09 
GeneralRe: pics? Pin
alex103313-Jun-04 1:52
alex103313-Jun-04 1:52 
GeneralRe: pics? Pin
Sahikon13-Jun-04 7:59
Sahikon13-Jun-04 7:59 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.