Walkthrough: Controlling ASP.NET Menus Programmatically

Walkthrough: Controlling ASP.NET Menus Programm...

Visual Web Developer

This walkthrough illustrates how to work with the ASP.NET Menu control programmatically by coordinating two menus on the same page using code.

You can create navigational menus for your Web site using the ASP.NET Menu control. In this walkthrough, you explore the programmatic aspects of the ASP.NET Menu control and create two menus bound to the same Web.sitemap file that work together. The first menu is a statically displayed menu of categories such as products, services, and support. It will appear horizontally across the top of the page. The second menu is displayed horizontally below the first menu. The content of the second menu is determined by which menu item is selected in the first. Based on the current selection of the first menu, you programmatically adjust the site map data source of the second menu to show only that portion of the Web.sitemap file that is relevant to the selected category.

Prerequisites

To complete this walkthrough, you will need:

Microsoft Visual Web Developer (Visual Studio).
The .NET Framework.

Creating the Web Site

If you have already created a Web site in Visual Web Developer (for example, by following the steps in Walkthrough: Creating a Basic Web Page in Visual Web Developer), you can use that Web site and skip to "Making the Site Map File" later in this walkthrough. Otherwise, create a new Web site and page by following these steps.

To create a file system Web site

Open Visual Web Developer.
On the File menu, click New Web Site.
The New Web Site dialog box appears.
Under Visual Studio installed templates, click ASP.NET Web Site.
In the Location box, enter the name of the folder where you want to keep the pages of your Web site.
For example, type the folder name C:\WebSites.
In the Language list, click the programming language you prefer to work in.
Click OK.
Visual Web Developer creates the folder and a new page named Default.aspx.

Making the Site Map File

Both menus derive their content from the site's Web.sitemap file. The SiteMapDataSource objects you create are used by both menus to ensure that each displays the appropriate portion of the site map.

To create the Web.sitemap file

In Solution Explorer, right-click the name of your Web site, and then click Add New Item.
In the Add New Item dialog box, choose Site Map and then click Add.

Add the following XML code to the new file. The XML represents a hierarchy of menu choices. The <siteMapNode> elements are nested. Each node is a menu item that contains subitems, and some subitems have subitems of their own. There are three second-level nodes below the Home node: Hardware, Software, and Support. Beneath them are various subcategories.

<?xml version="1.0" encoding="utf-8" ?>
<siteMap>
  <siteMapNode title="Home">
    <siteMapNode title="Products">
      <siteMapNode title="Hardware" url="Default.aspx?node=hardware">
        <siteMapNode title="Mouse"/>
        <siteMapNode title="Keyboard"/>
        <siteMapNode title="NetCard"/>
        <siteMapNode title="Monitor"/>
        <siteMapNode title="PC"/>
      </siteMapNode>
      <siteMapNode title="Software" url="Default.aspx?node=software">
        <siteMapNode title="Spreadsheet"/>
        <siteMapNode title="Word Processor"/>
        <siteMapNode title="Presentation"/>
        <siteMapNode title="Mail"/>
        <siteMapNode title="Games"/>
      </siteMapNode>
      <siteMapNode title="Books" url="Default.aspx?node=books">
        <siteMapNode title="Programming"/>
        <siteMapNode title="Debugging"/>
        <siteMapNode title="Testing"/>
        <siteMapNode title="Web Apps"/>
        <siteMapNode title="WinForm Apps"/>
      </siteMapNode>
    </siteMapNode>
    <siteMapNode title="Services">
      <siteMapNode title="Consulting" url="Default.aspx?node=consulting">
        <siteMapNode title="Processes"/>
        <siteMapNode title="Management"/>
        <siteMapNode title="Recruiting"/>
      </siteMapNode>
      <siteMapNode title="Development" url="Default.aspx?node=development">
        <siteMapNode title="Web Apps"/>
        <siteMapNode title="Enterprise Apps"/>
        <siteMapNode title="Database"/>
      </siteMapNode>
    </siteMapNode>
    <siteMapNode title="Support">
      <siteMapNode title="Drivers" url="Default.aspx?node=drivers">
        <siteMapNode title="Audio"/>
        <siteMapNode title="Network"/>
        <siteMapNode title="Printer"/>
        <siteMapNode title="Modem"/>
      </siteMapNode>
      <siteMapNode title="Manuals" url="Default.aspx?node=manuals">
        <siteMapNode title="Applications"/>
        <siteMapNode title="Troubleshooting"/>
        <siteMapNode title="Installation"/>
        <siteMapNode title="Internet"/>
      </siteMapNode>
      <siteMapNode title="Updates" url="Default.aspx?node=updates">
        <siteMapNode title="Release 1"/>
        <siteMapNode title="Game Package"/>
      </siteMapNode>
    </siteMapNode>
  </siteMapNode>
</siteMap>

Save the file.

Making the First Menu

The first menu displays a single level of static menu items. It is displayed horizontally at the top of the page.

To create the first menu

In Solution Explorer, double-click the Default.aspx page to open it.
Switch to Design view.
From the Navigation control group in the Toolbox, drag a Menu control onto the page.
In the Properties window, set the Orientation property to Horizontal.
Set MaximumDynamicDisplayLevels to 0.
This ensures that no portions of the menu will appear in a dynamic, fly-out fashion.
Be sure that StaticDisplayLevels is set to 1.
This allows only one level to appear in the menu.
Click the smart tag on the Menu control.
The Menu Tasks dialog box appears.
Choose New Data Source in the Choose Data Source drop-down list.
In the Data Source Configuration Wizard, choose Site Map.
Accept the default name of SiteMapDataSource1 and click OK.

Configuring the First Data Source

Because the first menu displays only a single level of static menu items, you need to configure its data source to display the appropriate portion of the Web.sitemap file. In this case, it is the second-level elements: Products, Services, and Support.

The default bindings of the Menu control to a SiteMapDataSource control make each menu item a navigation link. Because you want to programmatically control the behavior of another menu, you use custom bindings so these menu items do not act as navigation links but instead cause a postback to occur so the second menu can be updated.

To configure the first data source

View the Default.aspx page in Design view, and then click the smart tag on the Menu control.
The Menu Tasks dialog box appears.
Click Edit MenuItem Databindings.
In the Menu DataBindings Editor, in the Available data bindings drop-down list, select SiteMapNode and click Add.
Select TextField in the Data binding properties drop-down list and select Title from the drop-down menu. Click OK.
Select the SiteMapDataSource control.
In Properties, set ShowStartingNode to False.

Creating the Second Menu

The second menu is dynamic, and its data source uses only a portion of the site map file that is determined programmatically by what has been selected on the first menu. Like before, you want the menu to display its first level statically; however, you now want the rest of the Web.sitemap file to appear dynamically.

To create the second menu

View the Default.aspx page in Design view, and then drag a second Menu control onto the page below the first Menu control.
In Properties, set Orientation to Horizontal.
Click the smart tag on the second Menu control.
The Menu Tasks dialog box appears.
Choose New Data Source in the Choose Data Source drop-down list.
In the Data Source Configuration Wizard, choose Site Map.
Accept the default name of SiteMapDataSource2 and click OK.

Configuring the Second Data Source

In this section, you configure the data source to select only a particular section of the Web.sitemap file. To do this, you start with the default first category in the first menu, which is the Products section of the Web.sitemap file. You then use the StartingNodeURL property to indicate a specific URL attribute within the file.

To configure the second data source's starting point

Select SiteMapDataSource2 and set its StartingNodeURL property to "Default.aspx?node=hardware".
Set StartingNodeOffset to -1.
Set ShowStartingNode to False.

Adding Code to Coordinate the Menus

To control the second menu based on the state of the first menu, catch the MenuItemClick event of the first menu, and indicate the second menu's view of the site map file in code.

To coordinate the menus in code

View the Default.aspx page in Design view and select Menu1.
In Properties, set the MenuItemClick event to Menu1_MenuItemClick.
A method named Menu1_MenuItemClick will be created for you in the code-behind file for the Default.aspx page, or inside the <script> tags of the .aspx page if you are using the single-file page model.

Add the following highlighted code to the method.

Visual Basic

Protected Sub Menu1_MenuItemClick(ByVal sender As Object, _
  ByVal e As System.Web.UI.WebControls.MenuEventArgs) _
  Handles Menu1.MenuItemClick
  Select Case e.Item.Value
    Case "Products"
      SiteMapDataSource2.StartingNodeUrl = "Default.aspx?node=hardware"
    Case "Services"
      SiteMapDataSource2.StartingNodeUrl = "Default.aspx?node=consulting"
    Case "Support"
      SiteMapDataSource2.StartingNodeUrl = "Default.aspx?node=drivers"
  End Select
End Sub

protected void Menu1_MenuItemClick(Object sender,    
      System.Web.UI.WebControls.MenuEventArgs e)
{
  switch(e.Item.Value)
  {
    case "Products":
      SiteMapDataSource2.StartingNodeUrl = "Default.aspx?node=hardware";
      return;
    case "Services":
      SiteMapDataSource2.StartingNodeUrl = "Default.aspx?node=consulting";
      return;
    case "Support":
      SiteMapDataSource2.StartingNodeUrl = "Default.aspx?node=drivers";
      return;
  }
}

The preceding code catches the click event of Menu1. Instead of navigating to any location, you use the value to determine what the second Menu control displays. You accomplish that by adjusting the StartingNodeUrl property of the second Menu control's SiteMapDataSource control.

Save the file.

Testing the Menus

To test the interaction between the two menus, click items on the first menu, and watch the second menu change accordingly. The second menu is dynamic, and features the third level of the Web.sitemap file.

To test the menu

Press CTRL+F5 to run the page.
The first menu appears, with the secondary menu featuring the menu items beneath Products in the Web.sitemap file.
Click Services in the first menu.
The second menu now displays Consulting and Development dynamic menus.
Click Support.
The second menu displays the Drivers, Manuals, and Updates dynamic menu items.

Next Steps

The Menu control allows you to create navigation menus easily, and offers programmatic support for more complex scenarios. You might also want to experiment with the following options:

Apply a theme or skin to the Menu control. For more information, see Walkthrough: Customizing a Web Site Using Themes in Visual Studio
Learn more about site navigation. For more information, see ASP.NET Site Navigation Overview
Use a Menu control on a master page to provide side-wide navigation defined on a single page. For more information, see Walkthrough: Creating and Using ASP.NET Master Pages in Visual Web Developer.

Tasks

Walkthrough: Displaying a Menu on Web Pages

Concepts

Menu Control Overview

Tags

: Add a tag

Community Content

Add new content

Annotations

Lost Focus

Mariah Hill ... Thomas Lee | Edit | Show History

This is a good example but there is something I don't like.

When I click on Services I get consulting and Development in the sub-menu. So far so good. However when I click on either Consulting or Development the sub-menu reverts back to Hardware, software and books which should only be visible if you click on products.

Anyone know how to solve this problem?

Brent

Tags

: contentbug (x) Add a tag

To fix the focus issue

Adamx97 ... Thomas Lee | Edit | Show History

There are a number of missing pieces in this example:

The chosen option on the first menu does not remain chosen.
The second menu does not retain state due to a post back when one of its options are chosen.

You will need to save the chosen first menu choice in the session or something similar. jleviaguirre has an example here: http://forums.asp.net/p/1080909/1860938.aspx#1860938 (I modified a line in setRef to
set the Session item to mnuSiteNav.SelectedItem.Value rather than Menu1.SelectedItem.DataPath. YMMV.)

Also you will need to reset the second menu to the proper StartingNodeUrl when the postback happens. I am doing this on the databound event. Once the menu is set to the proper StartingNodeUrl, the control is able to use ViewState to highlight the selected item.

Here's my OnDataBound procedure:

protected void Menu2_DataBound(object sender, EventArgs e)
{
if ((!IsPostBack) && (Session["lastTopMenuItemDataPath"] != null ))
{
switch (Session["lastTopMenuItemDataPath"].ToString())
{
case "Farm Inspection":
SiteMapDataSource2.StartingNodeUrl = "~/FarmMain.aspx";
return;
case "Administration":
SiteMapDataSource2.StartingNodeUrl = "~/AdminMenu.aspx";
return;
case "Reports":
SiteMapDataSource2.StartingNodeUrl = "~/Reports/Metadata.aspx";
return;
}
}
}

Tags

: code (x) fix (x) sample (x) Add a tag

Flag as ContentBug

Not seeing "MenuItemClick" in a Menu?

Howard Lynch | Edit | Show History

I'm trying to follow the above instructions ... and I'm not seeing the "MenuItemClick" property in the Menu1 object???

Here's the section of the instructions I'm talking about ...

Adding Code to Coordinate the Menus

To control the second menu based on the state of the state of the first menu, catch the MenuItemClick event of the first menu, and indicate the second menu's view of the site map file in code.

To coordinate the menus in code

View the Default.aspx page in Design view and select Menu1.
In Properties, set the MenuItemClick event to Menu1_MenuItemClick.

... and when I look at the property list (it's a long list), not only do I not see a "MenuItemClick", I don't see any properties with the word "Click" in it???

I'm pretty new at this ... which is why I thought I'd benefit from just doing this example ... but now I'm stuck half-way thru it :-(

Thanks for any suggestions ...

Tags

: Add a tag

Flag as ContentBug