Click here to Skip to main content
Click here to Skip to main content

Tree style dynamic Navigation Menu

, 19 Oct 2004
Rate this:
Please Sign up or sign in to vote.
Custom control for Tree style navigation Menu for sites having static and dynamic contents

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.

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

I Piscean
Web Developer
United States United States
No Biography provided

Comments and Discussions

 
Generalimages and css not visible after click on any node in treeview control Pinmembermonu nair8-May-11 21:56 
Generalon perticular node click it does not redirect to specified page in master page PinmembersumB8-May-11 17:47 
Generalhow to Specify the Navigation Url in masterpage PinmemberMember 37997438-May-11 9:28 
QuestionLink to a doc or external url? Description? Pinmemberdanielbaker23-Jun-10 5:51 
Generalgenerate xml file dynamically PinmemberPersheng29-May-07 5:33 
GeneralError on compiling the treemenu sample PinmemberMessiaz4-May-07 3:08 
GeneralQuery Pinmemberhemandra9-Apr-07 5:00 
QuestionDynamic menu in Web form using ASP.NET PinmemberTungND0508G22-Mar-07 23:23 
Questionwhen i change the xml file to make my menu page goes blank Pinmembersweetshetan8-Sep-06 18:37 
GeneralError loading TreeMenu in WebForm Pinmembervladimirbc26-Jun-06 3:58 
GeneralQuery Parameter PinmemberDY_public29-Mar-06 4:27 
GeneralNavigation Pinmembert2design28-Nov-05 16:30 
GeneralRe: Navigation PinmemberDuncanF1-Dec-05 7:00 
Questionreuse of tree menu Pinmemberjoachim stephan9-Nov-05 2:52 
GeneralError during page loading Pinmembermaxluca30-Mar-05 0:42 
General.Error during page load Pinmembermaxluca30-Mar-05 0:34 
GeneralDinamic XML Source Pinmembersciamannikoo17-Jan-05 22:46 
Generaldynamic loading PinmemberMichael J. Collins14-Oct-04 3:34 
GeneralRe: dynamic loading PinmemberI Piscean19-Oct-04 7:10 
GeneralRe: dynamic loading PinmemberMichael J. Collins19-Oct-04 7:11 
GeneralRe: dynamic loading PinmemberI Piscean19-Oct-04 7:24 
GeneralRe: dynamic loading PinmemberMichael J. Collins19-Oct-04 7:28 
GeneralRe: dynamic loading PinmemberI Piscean20-Oct-04 8:34 
GeneralCustom Control PinmemberTBermudez11-Oct-04 8:08 
GeneralRe: Custom Control PinmemberI Piscean12-Oct-04 9:29 

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 | Mobile
Web04 | 2.8.140827.1 | Last Updated 20 Oct 2004
Article Copyright 2004 by I Piscean
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid