Tree style dynamic Navigation Menu

• TreeMenu sample - 60 Kb
• TreeMenu source - 31 Kb

Introduction

A Tree style Navigation Menu is one on the most common requirements of any Web Application. Presented here a XML/XSL driven TreeMenu control which provides navigation menu for static (static html pages based) and dynamic (data driven) applications.

Background

There are a lot of server controls provided by ASP.NET. But it is missing a Tree Menu control. A Tree View control is provided for Windows application in .NET but none for Web Applications. Lot of applications use IE WebControls provided by Microsoft for Navigation menu but it has its limitations and not a favorable choice for many applications. I have created a XML/XSL based Menu controls which provides the solution for both Static and Dynamic web applications.

I have worked with 2 typical kind of Web applications.

Static content based applications

The Static apps contain more of static html pages whose content does not change very often but the number of pages and links between pages do. All this content is divided into diffrent categories, sections and sub-sections. A typical example is MSDN site or any Help application which has a lot of html articles for each category. You can see a tree style menu on the left frame on MSDN.

Dyanmic content based applications

The Dynamic applications are more data driven and content rendered on the web pages is itself dynamic. In such a scenario the menu rendered on a screen is based on the data user is looking at.

For example consider a application that shows a list of all departments in a company. Web page contains a Grid to list all the departments for the company.

Menu on this screen in a tree manner: Company -> Departments

The navigation menu on this page does not show the link for Managers page becuase user has not selected a Department yet.

On select of a department, the next page shows list of all managers in that department.

Menu on this screen in a tree manner: Company -> Departments->Managers

The menu on this Web page cannot display the link for Employees page.

On select of a manager another page shows all employees reporting to the selected manager.

Menu on this screen in a tree manner: Company -> Departments->Managers -> Employees

Using the code

I have added a Readme file with the sample code on how to use the TreeMenu control in your application.

Adding the TreeMenu to your Web pages is like a breeze.

Here are the steps:

One time settings for the application

1. Add reference to the CustomControls.dll
2. Add images folder to the root of your Application.
3. Make sure the images folder contain the following images - collapse.gif, dot.gif and expand.gif. You can change the images to suit your application needs but keeping the image file names and locations same.
4. Add the provided css file to your project and to the web page. You can change the styles to suit your application but keeping the style names the same.
5. Add the XML file with the Menu and screen data in it. A sample XML file is provided. You can change the supplied XML file to add screens and menu entries for your application. Your XML file should have the same elements as the sample XML file (see details below).
6. Web.Config appsettings - Add the following key to the appSettings section of your Web.config file. The value should be the relative location (from the app root) of your Menu XML file.

<appSettings> 
  <add key="TreeMenu.XML.PathFromRoot" value="/AppNavigation.xml"/> 
</appSettings>    

Use the TreeMenu in Web Page

1. Register the following Tag in the aspx page -

<%@ Register TagPrefix="cc1" Namespace="CustomControls" 
  Assembly="CustomControls" %>

2. Add the tree menu control to your web page -

<cc1:TreeMenu id="TreeMenu1" runat="server" ScreenId="10" 
  MenuMode="Dynamic"></cc1:TreeMenu>

You can choose to specify the selected screen id for the menu as a design time property or it can be set dynamically in the code behind of the web page. Alternatively you can pass the screen id as a querystring parameter for the web page with parameter name as "screenid".

3. Specify the MenuMode property for the menu control. The menuMode (Static or Dynamic) is the mode of the menu depending on the behavior of the page.

4. Add the css file to the Web page.

XML file for Menu data

Create the XML file to store the data for Menu for your application. The details of menu and screen for each menu item is stored in a XML file. In the sample application, I have provided a XML file (AppNavigation.xml). The application also includes the XML schema file (AppNavigationSchema.xsd). You can create a similar XML file for your application.

Add a <AppScreen> element for each screen in your application.

Assign a unique <AppScreenId>

Give a name to the screen in <ScreenName>

Specify the relative URL from the app root in <NavigateUrl>

For pages with dynamic content add the required querystring in <QueryString>. The value of each Query string parameter (if it not constant) should be appended with "@" and a key. And a query string parameter should be present for that key to render the correct hyperlink.

<GroupId> is to divide screens in diffrent modules. Only the screens that belong to the same group will be shown in the menu. For example on a Intranet site of a company each department has some Web pages. So when user visits a Web page only the Web pages that belong to the same department will be shown in Menu tree. If you want to show all Web pages keep the same <GroupId> for all screens.

 <AppScreen>
  <AppScreenId>1</AppScreenId>
  <ScreenName>Book 1</ScreenName>
  <NavigateUrl>WebForm1.aspx</NavigateUrl>
  <QueryString>BookId=@BookId</QueryString>
  <GroupId>1</GroupId>
 </AppScreen> 

Add a <AppMenu> for each screen for which you want a Menu link.

Specify a Unique <AppMenuId>

Specify a name of the menu link in <MenuName>. This is text which appears on the menu

ScreenId to which this menu links to <ScreenId>

<ParentMenuId> - Specify a Id of the AppMenu to which this menu belongs to. For Top level menu you can make this as 0. This renders the Tree structure.

Specify a order in <SortOrder>

 <AppMenu>
  <AppMenuId>3</AppMenuId>
  <MenuName>Section 2</MenuName>
  <ScreenId>3</ScreenId>
  <ParentMenuId>1</ParentMenuId>
  <SortOrder>3</SortOrder>
 </AppMenu> 

History

• Version: 1.1 - I will be updating this article and code with improvements. Any suggestions, comments or questions are welcome.