Menus in ASP.NET applications

ASP.NET 2.0 provides us with a standard Menu control with witch you can deal like any other standard control. Still the Menu control has it's own specifics which we are going to stress in this tutorial.

Two major issues are to be noted in the Menu control: The dynamic / static layout and the ability to dynamically bind and populate your Menu control from a data source so you need not to change your code every time you want to add an item (e.g., a product name) to your menu items.

We are going now to discuss these two issues in details. Let's start with the layout issue first.

What we mean by the words static and dynamic here is whether the items of the menu are displayed all the time or displayed only at end user request. A static menu will have all it's items visible all the time without need to click the menu to display the items inside it. A dynamic menu on the other hand, will display it's items only when it's clicked. Of course, it's evident that dynamic menus preserves screen area much more than static menus. Static menus are still a good option for a developer intending to provide an easily / quickly accessible and simple user interface.

Let's demonstrate this by an example:

In the following example we are going to show you how to make the best use of dynamic and static menus:

In Microsoft Visual Studio 2005, create a new website and add the Menu control to your page. This control can be found in your tool box under the Navigation section.

The Menu control in ASP.NET 2.0 has (like many other standard ASP.NET controls) an items property by which you can set the items tree to be displayed by the menu. So, Locate the items property of your Menu control and click it and set your items tree as in figure 1. You typically add  new items using the two ' Add a root item ', and ' Add a child item ' buttons in the top left corner of the ' Menu Item Editor ' and then set the item text via it's Text property to the right.

Figure 1: Menu Item Editor

Now run your webpage and see how the menu will be displayed in figure 2. As you can see this is a dynamic menu (not all items are displayed all the time). It's obvious that you will need to put your mouse cursor on this menu to open it before you can click any of it's items (figure 3).

Figure 2: Simple menu

Figure 3: Menu with sub menus

Having learned  how to produce a dynamic menu you are now ready to explore the other side of the story: the static menus. You need to know nothing new to achieve this behavior except for the use of the StaticDisplayLevels property. Using this property you can simply set how much levels of your menu you want to be displayed as static. For example if we to set this property to 3 then all of our levels will be displayed as static and the menu will appear as depicted in figure 4. It's worth noting here that we never positioned our mouse pointer on figure 4 to produce this effect, that was totally done by default.

one last property is worth mentioning here. It's the NavigateUrl property by which you can define what will be the URL (i.e., the web page) to which the end user browser will be directed when a given menu item is clicked. You will find this property among the menu items properties in the ' Menu Item Editor ' window.

It's typically desirable to be able to alter your menu items without altering your code at all. As an example for this case is when every menu item represents a product for example and that you need the flexibility of adding a new product to your website without need to alter of even see your the underlying source code at all.

Let's take as an example, binding our Menu to an XML data source. 

In the following example we are going to show you how to have your menu items stored in an external file (XML file) such that the changes you perform in this file are automatically reflected on your menu without need to alter your source code at all.

First of all let's illustrate how to create the data file that will hold your menu items information:

1. Display your Solution Explorer window
2. Right click the name of your website
3. Select ' Add New Item '
4. Add a ' Site Map '

A new file will be created with the contents depicted in figure 5.

Figure 5: Creating XML file

As you can see from figure 5, this is a ready to use template for defining the information needed about your menu items. Let's change the contents of this file as depicted in figure 6 to represent a menu of some products . Please examin these changes in figure 6.

Figure 6: Menu item "Products" with sub menu items

Now we need to bind this XML file to our menu. To do so, get a Menu control from the toolbox and place it on your webpage then click it's ' Smart Tag ' to reveal the available actions. From the list of exposed actions select ' Chose Data Source / New data source ' then click the ' Site Map ' icon and press OK.

Now having our binding established we are ready to view the data from the XML file when displayed inside our menu. Run your web page and see the result in figure 7.

Figure 7: XML Menu sample

The really nice achievement here is that when the contents of the XML file (in figure 5 and 6) is changed again, then these changes will be automatically reflected in our webpage without any need to alter the source code or even to recompile it.

For more information about standard ASP.NET Menu Control refer to the online copy of Microsoft Developers Network at http://msdn.microsoft.com or use you own local copy of MSDN.

If you want more than standard ASP.NET Menu Control can give you, or you simply don't have time to reinvent the wheel and add fancy features like animated menus, keyboard shortcuts, skins, drag & drop of menu items, cross browser support, role based access etc., you can try more professional solution like some of commercial ASP.NET Menu Controls. Depending of your web application demands, this control can save you a lot of programming (and debugging) hours. Check Design, Advanced, Programming and Look-Like menu items on ExpertMenu page to get closer picture.