Click here to Skip to main content
11,429,777 members (72,628 online)
Click here to Skip to main content

XML/XSLT Dynamic Menu with ASP.NET

, 17 Mar 2004
Rate this:
Please Sign up or sign in to vote.
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 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.

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

Share

About the Author

alex1033
Web Developer
Belgium Belgium
No Biography provided

Comments and Discussions

 
GeneralCombo box get disappear when the menu gets focus Pin
Bhuvaneswari R13-Mar-06 1:54
memberBhuvaneswari R13-Mar-06 1:54 
Generaltree menu Pin
Aubyone13-Oct-04 20:31
memberAubyone13-Oct-04 20:31 
GeneralTrying to recreate your example... Pin
snoman229-Aug-04 6:24
membersnoman229-Aug-04 6:24 
GeneralRe: Trying to recreate your example... Pin
alex103330-Aug-04 3:07
memberalex103330-Aug-04 3:07 
GeneralCooolll! Pin
vasacheh18-May-04 9:38
membervasacheh18-May-04 9:38 
GeneralNice Pin
30-Mar-04 6:22
member30-Mar-04 6:22 
Questionpics? Pin
Anonymous27-Mar-04 4:52
sussAnonymous27-Mar-04 4:52 
AnswerRe: pics? Pin
alex103327-Mar-04 5:19
memberalex103327-Mar-04 5:19 
GeneralRe: pics? Pin
Anonymous13-Jun-04 2:09
sussAnonymous13-Jun-04 2:09 
GeneralRe: pics? Pin
alex103313-Jun-04 2:52
memberalex103313-Jun-04 2:52 
GeneralRe: pics? Pin
Sahikon13-Jun-04 8:59
sussSahikon13-Jun-04 8:59 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.150428.2 | Last Updated 18 Mar 2004
Article Copyright 2004 by alex1033
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid