{infiniteZest}
// Articles. Tutorials. Utilities.
Home  |   Search  |   Login  
Categories Skip Navigation Links
New / All
AJAX
Apple
ASP.NET
.NET
Git
Google / Android
Python / IronPython
Miscellaneous
SQL Server
Using multiple menus on a given page
Summary
This article shows different ways of adding/showing individual menu items to a menu. Also looks at separating menus by the role of the user.
 
Table of Contents

The Scenario

The Menu

Code Listing 1. The declarative syntax of a common menu

The Menu Class

The Menu Manipulation

Multiple Menus

Code Listing 2. Showing the Administrator Menu when an administrator is logged in

Code Listing 3. Placing several controls inside a panel

Code Listing 4. Show/Hide the panel depending on the user

Adding Menu Items

Code Listing 5. Adding individual menu items to a menu

Admin Menu Image

Figure 1. Two separate menus shown when a administrator logged in

 

The Scenario

Apart from displaying individual menus and menu items on a given page, we would typically want to do the following:

  • Have a set of menus that are to be shown according to the context or the user; for example, show the admin menu if the person currently logged on is an administrator.
  • Similarly you may want to add individual menu ITEMS according to the context or role of the user; for example, just as above, show the admin-related menu items in a given menu if the person currently logged on is an administrator.

The Menu

Typically you will place the menu(s) in the master pages. These menu(s) will, typically, be placed on the left side (or on the top bar). When you drag-drop the “Menu” control from the Toolbox and add menu items and format it to your interest, you will see something like the following:

Code Listing 1. The declarative syntax of a common menu

<asp:Menu ID="mnuCommon" runat="server" >
  
  <Items>
    <asp:MenuItem NavigateUrl="…" ></asp:MenuItem>
    <asp:MenuItem NavigateUrl="…"></asp:MenuItem>
    <asp:MenuItem NavigateUrl="…" ></asp:MenuItem>
    <asp:MenuItem NavigateUrl="…"></asp:MenuItem>
  </Items>

  <StaticMenuItemStyle … />
  <DynamicHoverStyle … />
  <DynamicMenuStyle … />
  <StaticSelectedStyle … />
  <DynamicSelectedStyle … />
  <DynamicMenuItemStyle … />
  <StaticHoverStyle … />

</asp:Menu>

In Listing 1, stripped-down version of a common menu is shown. As the declarative syntax shows, the whole menu object is held in the asp:Menu tags. Under the Items collection, the individual MenuItem declarations are stored.

The Menu Class

Once you have drag-dropped the menu from the toolbox (or declaratively added a menu with the appropriate attributes and child elements in the .aspx source file), you will have an object of class Menu available to you from the code window (.cs or .vb).

In the above listing we have created a menu with ID mnuCommon; so, we will have an object of Menu class like this:

System.Web.UI.WebControls.Menu mnuCommon;

Menu is new class in .Net Framework 2.0 and as you can expect comes with a lot of properties and methods.

The Menu Manipulation

Now let’s get back to our scenarios.

Multiple Menus

If you want different menus shown in different contexts, first create those different menus: perhaps one menu contains a set of menu items that are to be shown all the time. And another menu contains only admin-related items and are to be shown only when an administrator has logged in.

Code Listing 2. Showing the Administrator Menu when an administrator is logged in

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
        UpdateMenu();
}

/// <summary>
/// Updates the menu
/// </summary>
private void UpdateMenu()
{
    // Menu for administrators
    if (Roles.IsUserInRole("admin"))
        mnuAdmin.Visible = true;

    else
        mnuAdmin.Visible = false;
}

Sometimes you want to show/hide a whole bunch of things in addition to the appropriate menu. In this case, you can put all of them inside a panel and then show/hide that panel according to the user.

Code Listing 3. Placing several controls inside a panel

<asp:Panel ID="pnlAdminMenu" runat="server" >

    <asp:Label ID="lblAdmin" runat="server" Text=’Admin’></asp:Label>
    
    <asp:Menu ID="mnuAdmin" runat="server" >
        <Items>
            <asp:MenuItem ></asp:MenuItem>
   …
        </Items>
        <StaticMenuItemStyle />
    </asp:Menu>

</asp:Panel>

Code Listing 4. Show/Hide the panel depending on the user

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
        UpdateMenu();
}

/// <summary>
/// Updates the menu
/// </summary>
private void UpdateMenu()
{
    // Menu for administrators
    if (Roles.IsUserInRole("admin"))
        pnlAdminMenu.Visible = true;

    else
        pnlAdminMenu.Visible = false;
}

Adding Menu Items

The second scenario is to add additional menu items if the administrator has logged in. Here, we are creating new MenuItem objects dynamically and using Items.Add on the menu of our choice, we are adding the menu items.

Code Listing 5. Adding individual menu items to a menu

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
        UpdateMenu();
}

/// <summary>
/// Updates the menu
/// </summary>
private void UpdateMenu()
{
    // Menu items for administrators
    if (Roles.IsUserInRole("admin"))
    {
        MenuItem miAdminItem1 = new MenuItem("AdminItem1", "AdminItem1", "", "~/AdminItem1.aspx");
        mnuMain.Items.Add(miAdminItem1);

        MenuItem miAdminItem2 = new MenuItem("AdminItem2", "AdminItem2", "", "~/AdminItem2.aspx");
        mnuMain.Items.Add(miAdminItem2);

        MenuItem miAdminItem3 = new MenuItem("AdminItem3", "AdminItem3", "", "~/AdminItem3.aspx");
        mnuMain.Items.Add(miAdminItem3);

    }
}

Admin Menu Image

The following figure shows an example of two separate menus shown when an administrator logged into the system. Only the bottom one will be shown by default.

Figure 1. Two separate menus shown when a administrator logged in

Figure 1. Two separate menus shown when a administrator logged in
Bookmark and Share This

More Articles With Similar Tags
Top Tags in Related Articles
menu menu item
About  Contact  Privacy Policy  Site Map