How to use the Menu navigation control in ASP.NET in C#

This ASP.NET tutorial explains how to use the Menu navigation control in ASP.NET in C#.

The Menu control like the TreeView control supports hierarchical data. You can bind the Menu to a data source, or you can fill it by hand (declaratively or programmatically) using MenuItem objects. The MenuItem objects don’t support check boxes and you can’t set programmatically their expanded/collapsed state. The next table lists MenuItem properties you can use:

 

Property

Description

Text The text displayed in the menu for this item (when displayed).
ToolTip The tooltip text that appears when you hover over the menu item.
Value

You can use it to keep a value with additional data about the menu item. For example you can use it to store a unique ID, which you are planning to use when handling click events to identify the menu item or to look up more information. This value is not displayed.

NavigateUrl

You can use it to forward automatically the user to the corresponding URL when clicks this item. If you don’t set it you should write a code which will react to the Menu.MenuItemClick event to decide what action you want to perform.

Target

If the NavigateUrl property is set, this sets the target window or frame for the link. If Target isn’t set, the new page is opened in the current browser window. The Menu also exposes a Target property, which you can set to apply a default target for all MenuItem instances.

Selectable

If false, this item can’t be selected. Usually you’ll set this to false only if the item is a subheading that contains selectable child items.

ImageUrl The image that’s displayed next to this node.
PopOutImageUrl

The image that’s displayed next to the menu item (on the right) if it contains subitems. By default, this is a small solid arrow.

SeparatorImageUrl

The image that’s displayed immediately underneath this menu item, to separate it from the following item.

 

The Menu contains a collection of MenuItem objects in the Items property, and each MenuItem has a ChildItems collection that contains nested items. The next example is taken from the article: How to use the TreeNode object in selection mode in ASP.NET in C#, but:

1. The file TreeViewTest.aspx is replaced with MenuTest.aspx.

2. The code behind file MenuTest.aspx.cs is used code from the TreeViewTest.aspx.cs where: MenuItem replaced TreeNode, ChildItems replaced ChildNodes, Items replaced Nodes.

 

File MenuTest.aspx

 

<body>

<form id=”form1″ runat=”server”>

<div>

<asp:Label ID=”LblInfo” runat=”server” Text=”"></asp:Label>

<br />

<asp:Menu ID=”Menu” runat=”server” onmenuitemclick=”Menu_MenuItemClick” ></asp:Menu>

</div>

</form>

</body>

 

File MenuTest.aspx.cs

 

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data;

using System.IO;

 

namespace MenuVC

{

public partial class MenuTest : System.Web.UI.Page

{

protected static DataSet ds = null;

protected static DataTable dtBook = null;

protected bool InitData()

{

if (ds == null)

{

string file = Path.Combine(Request.PhysicalApplicationPath, “App_Data\\BooksList.xml”);

FileStream fs = new FileStream(file, FileMode.Open);

ds = new DataSet();

ds.ReadXml(fs);

dtBook = ds.Tables["Book"];

return true;

}

return false;

}

protected void Page_Load(object sender, EventArgs e)

{

if (!Page.IsPostBack)

{

InitData();

// Loop through the books records.

foreach (DataRow row in ds.Tables["Book"].Rows)

{

// Use the constructor that requires just text

// and a nondisplayed value.

 

// Create the menu item for this category.

MenuItem itemISBN = new MenuItem(

“ISBN-13:” + row["ISBN-13"].ToString(),

row["ISBN-13"].ToString());

Menu.Items.Add(itemISBN);

 

MenuItem itemTitle = new MenuItem(

“Title: ” + row["Title"].ToString());

MenuItem itemAutor = new MenuItem(

“Author: ” + row["Author"].ToString());

MenuItem itemAddInfo = new MenuItem(

“Additional info”);

itemISBN.ChildItems.Add(itemTitle);

itemISBN.ChildItems.Add(itemAutor);

itemISBN.ChildItems.Add(itemAddInfo);

 

// Get the children (additional information) for this parent (book).

DataRow[] childRows = row.GetChildRows(ds.Relations[0]);

foreach (DataRow childRow in childRows)

{

MenuItem nodePublisher = new MenuItem(

“Publisher: ” + childRow["Publisher"].ToString());

MenuItem nodePages = new MenuItem(

“Pages: ” + childRow["Pages"].ToString());

itemAddInfo.ChildItems.Add(nodePublisher);

itemAddInfo.ChildItems.Add(nodePages);

}

}

}

}

 

protected void Menu_MenuItemClick(object sender, MenuEventArgs e)

{

if (Menu.SelectedItem == null) return;

if (Menu.SelectedItem.Depth == 0)

{

LblInfo.Text = “You selected Book ID: “;

}

else if (Menu.SelectedItem.Depth == 1)

{

LblInfo.Text = “You selected Additional info ID: “;

}

LblInfo.Text += Menu.SelectedItem.Value;

}

}

}

The next picture shows the result:

 

Displaying a menu with information from a XML file in C#

Displaying a menu with information from a XML file in C#

The used example shows that the Menu and TreeView controls expose similar programming models. They also have a similar style-based formatting model. But a few differences exist which are listed in the next table:

 

Menu

TreeView

Displays a single submenu

Can expand an arbitrary number of node branches at a time.

Displays a root level of links in the page. All other items are displayed using fly-out menus that appear over any other content on the page

Shows all its items inline in the page.
Does not support this functionality. Supports on-demand filling and client callbacks.
Supports templates. Does not support this functionality.

Supports horizontal and vertical layouts, depending on the Orientation property.

Supports only vertical layouts.