Recipe 21.9. Dynamic Menus

Problem

You want to use a dynamic menu in your application to provide a compact means for a user to navigate within your application, and you want to accomplish this without using a third-party control.

Solution

Create a Web.sitemap file to define the pages and navigation in your application. Create a .master file containing a SiteMapDataSource control and a Menu control with the DataSourceID set to the ID of the SiteMapDataSource control and other HTML common to all pages in your application. Use the .master file as the master page for all pages in your application that require the dynamic menu.

In the Web.sitemap file:

Add a siteMapNode element for each section of your application.
Add a siteMapNode element for each page in the sections.

In the .master file:

Add a SiteMapDataSource control.
Add a Menu control.
Set the DataSourceID attribute of the Menu control to the value of the ID attribute of the SiteMapDataSource control.

In the .aspx files that require the dynamic menu, set the MasterPageFile attribute of the @ Page directive to the name of the .master file.

Example 21-21 shows the Web.sitemap file, Example 21-22 shows the .master file, and Example 21-23 shows the .aspx file for this example. Figure 21-7 shows the output of the test page with the dynamic menu in the static state. Figure 21-8 shows the output with the dynamic menu expanded.

Figure 21-7. Dynamic menu in static state

Discussion

Dynamic menus are common in applications. They provide an excellent means of navigating complex applications while minimizing the page real estate that must be dedicated to the menu. In ASP.NET 1.x, no support for dynamic menus was provided. You had to use a third-party control or take on the daunting task of creating your own using JavaScript and DHTML. ASP.NET 2.0 provides a site navigation infrastructure that can be used to create dynamic menus, as well as breadcrumb trails (see Recipe 21.9), without writing any code.

Figure 21-8. Dynamic menu expanded

The first step to creating a dynamic menu is to create a Web.sitemap file. The Web.sitemap file is an XML file that provides the definition of the page structure of your application and the navigation to the pages within your application. The file consists of a hierarchical structure of siteMapNode elements that define the levels for the dynamic menu:

 <?xml version="1.0" encoding="utf-8" ?> <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" > <siteMapNode> <siteMapNode title="Online Examples" description="Run the examples on-line"> <siteMapNode title="1. Master Pages" description="Master Page Recipes">   <siteMapNode url="CH01QuickContentPageVB.aspx" title="Quick Master Page" description="Quick Master Page" />   <siteMapNode url="CH01NestedMasterContentPageVB.aspx" title="Nested Master Pages" description="Nested Master Pages" />   <siteMapNode url="CH01SetMasterPageAtRuntimeVB.aspx" title="Set Master Page At Runtime" description="Set Master Page At Runtime" /> </siteMapNode> … </siteMapNode> </siteMap>

The url attribute defines the URL of the page that will be displayed when the menu item is selected. The title attribute provides the text that will be displayed in the menu and the description attribute provides the text for the tool tip that will be displayed when the user hovers over the menu item.

The url attribute can be omitted for menu items that are used to group child items but have no page associated with them.

The value of the url attribute must be unique for every siteMapNode element in the Web.sitemap file. If the file contains duplicate urls, an exception will be thrown the first time the file is read.

The next step is to create .master file with a SiteMapDataSource control and a Menu control with the DataSourceID attribute of the Menu control set to the ID of the SiteMapDataSource control. By default, the SiteMapDataSource uses the XmlSiteMapProvider supplied with ASP.NET 2.0 to provide a data source that can be used by the Menu control to render the dynamic menu.

Dynamic menus are generally used on many pages within an application. To support the reuse, place the menu in a user control or a master page.

The Menu control has many attributes that can be used to define the look and feel of the dynamic menu. The menu can be displayed horizontally or vertically by setting the Orientation attribute to the desired orientation. The number of menu levels displayed all of the time is controlled by the StaticDisplayLevels attribute. Other attributes are available to define nearly every aspect of the menu. Refer to the Menu control documentation in the MSDN Library for information on all of the available attributes.

The Web.sitemap file requires a single siteMapNode element as a child of the siteMap root element. To display a menu that has multiple items at the top level, leave all attributes of the first siteMapNode element undefined and set the StaticDisplayLevels attribute of the Menu control to 2.

The final step is to use the .master file you created to display the dynamic menu throughout your application. Refer to the recipes in Chapter 1 for more information on using master pages.

The site navigation infrastructure provides an excellent means to define the structure of your application and the navigation within it. By using the Web.sitemap file, any changes to the navigation can be made in a single place with no code changes or recompilation required. The site navigation infrastructure can be used to generate the breadcrumb trail used in many applications to display the current location within the application and to provide an easy way to navigate back to a previous location. Refer to Recipe 21.9 for an example of using the infrastructure to display a breadcrumb trail.

 <?xml version="1.0" encoding="utf-8" ?> <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" > <siteMapNode> <siteMapNode title="Online Examples" description="Run the examples on-line">   <siteMapNode title="1. Master Pages" description="Master Page Recipes"> <siteMapNode url="CH01QuickContentPageVB.aspx" title="Quick Master Page" description="Quick Master Page" /> <siteMapNode url="CH01NestedMasterContentPageVB.aspx" title="Nested Master Pages" description="Nested Master Pages" / <siteMapNode url="CH01SetMasterPageAtRuntimeVB.aspx" title="Set Master Page At Runtime" description="Set Master Page At Runtime" /> </siteMapNode> <siteMapNode title="2. Tabular Data" description="Tabular Data Recipes"> <siteMapNode url="CH02QuickAndDirtyGridViewVB.aspx" title="Quick Tabular Display" description="Quick Tabular Display" /> <siteMapNode url="CH02TemplatesWithRepeaterVB.aspx" title="Templates With Repeater" description="Templates With Repeater" /> <siteMapNode url="CH02DatagridAscDescSortingVB.aspx" title="DataGrid With Sorting" description="DataGrid With Sorting" /> <siteMapNode url="CH02GridViewWithTotalsRowVB.aspx" title="GridView With Totals Row" description="GridView With Totals Row" /> </siteMapNode> <siteMapNode title="3. Validation" description="Validation Recipes"> <siteMapNode url="CH03RequiredFieldValidationVB.aspx" title="Required Field Validation" description="Required Field Validation" /> <siteMapNode url="CH03RangeValidationVB.aspx" title="Range Validation" description="Range Validation" /> </siteMapNode> <siteMapNode title="4. Forms" description="Form Recipes">   <siteMapNode url="CH04SettingDefaultSubmitButtonCS.aspx" title="Default Submit Button" description="Default Submit Button" />   <siteMapNode url="CH04SurveyDataCS1.aspx" title="Using Wizard Control" description="Using Wizard Control" />   <siteMapNode url="CH04SetFocusCS1.aspx" title="Setting Initial Focus" description="Setting Initial Focus" /> </siteMapNode> <siteMapNode title="5. User Controls" description="User Control Recipes">   <siteMapNode url="CH05DisplayHeaderCS.aspx" title="Page Header" description="Page Header" />   <siteMapNode url="CH05UserControlCommTestCS.aspx" title="User Control Communication" description="User Control Communication" /> </siteMapNode> <siteMapNode title="6. Custom Controls" description="Custom Control Recipes">   <siteMapNode url="CH06DisplayQuickAndDirtyControlCS1.aspx"   title="Quick and Dirty Custom Control"   description="Quick and Dirty Custom Control" />   <siteMapNode url="CH06DisplayControlWithStateCS1.aspx"   title="Custom Control With State"    description="Custom Control With State" />  </siteMapNode>  <siteMapNode title="7. Maintaining State"  description="Maintaining State Recipes" /> <siteMapNode title="8. Error Handling" description="Error Handling Recipes" /> <siteMapNode title="9. Security" description="Security Recipes" /> <siteMapNode title="10. Personalization" description="Personalization Recipes" /> <siteMapNode title="11. Web Parts" description="Web Parts Recipes" /> <siteMapNode title="12. Configuration" description="Configuration Recipes" /> <siteMapNode title="13. Tracing and Debugging" description="Tracing and Debugging Recipes" /> <siteMapNode title="13. Web Services" description="Web Services Recipes" /> <siteMapNode title="14. Web Services" description="Web Services Recipes" /> <siteMapNode title="15. Dynamic Images" description="Dynamic Image Recipes" /> <siteMapNode title="16. Caching" description="Caching Recipes" /> <siteMapNode title="17. Internationalization" description="Internationalization Recipes" /> <siteMapNode title="18. File Operations" description="File Operation Recipes" /> <siteMapNode title="19. Performance" description="Performance Recipes" /> <siteMapNode title="20. Http Handlers"  description="Http Handler Recipes" /> <siteMapNode title="21. Assorted Tips" description="Assorted Tips Recipes"> <siteMapNode url="CH21TestDynamicMenuVB.aspx" title="Dynamic Menus" description="Dynamic Menus" /> <siteMapNode url="CH21TestBreadcrumbsVB.aspx" title="Dynamic Menus with Breadcrumbs" description="Dynamic Menus with Breadcrumbs" /> </siteMapNode> </siteMapNode> <siteMapNode url="CodeDownload.aspx" title="Downloads" description="Download the code and database for the book"> <siteMapNode url="ASPNetCookbook2VB.zip" title="VB Code" description="Download the VB.NET Code" /> <siteMapNode url="ASPNetCookbook2CS.zip" title="C# Code" description="Download the C# Code" /> <siteMapNode url="ASPNetCookbookDB.zip" title="Database" description="Download the database" /> </siteMapNode> <siteMapNode url="Feedback.aspx" title="Feedback" description="Send us feedback on the book" /> <siteMapNode url="Errata.aspx" title="Errata" description="Submit errata" />   </siteMapNode> </siteMap>

Example 21-22. Dynamic menu master page (.master)

 <%@ Master Language="VB"   AutoEventWireup="false" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head  runat="server"> <title>Dynamic Menu Master Page</title> <link rel="Stylesheet" href="css/ASPNetCookbook.css" /> </head> <body> <form  runat="server"> <div > <div > <img src="/books/1/505/1/html/2/images/ASPNETCookbookHeading_blue.gif" alt="book"/> </div> <div > <asp:SiteMapDataSource  runat="server" /> <asp:menu  runat="server" DataSource Orientation="Horizontal" StaticDisplayLevels="2" BackColor="#f0f0f0" ForeColor="#6B0808" Font-Size="8pt" Font-Bold="true" StaticMenuItemStyle-HorizontalPadding="5" StaticMenuItemStyle-VerticalPadding="0" StaticHoverStyle-BackColor="#6B0808" StaticHoverStyle-ForeColor="#FFFFFF" DynamicMenuItemStyle-BackColor="#f0f0f0" DynamicMenuItemStyle-ForeColor="#0000A0" DynamicMenuItemStyle-BorderStyle="Solid" DynamicMenuItemStyle-BorderColor="#c0c0c0" DynamicMenuItemStyle-HorizontalPadding="5" DynamicMenuItemStyle-BorderWidth="1" DynamicHoverStyle-BackColor="#6B0808" DynamicHoverStyle-ForeColor="#FFFFFF" width="100%" Height="35" > </asp:menu> </div> </div> <div> <asp:ContentPlaceHolder  Runat="server" > <div align="center"> <br /> <br /> <h4>Default Content Displayed When No Content Is Provided In Content Pages</h4> </div> </asp:ContentPlaceHolder> </div>   </form> </body> </html>

Example 21-23. Test page for dynamic menu (.aspx)

 <%@ Page Language="VB" MasterPageFile="~/CH21DynamicMenu.master" AutoEventWireup="false" CodeFile="CH21TestDynamicMenuVB.aspx.vb" Inherits="ASPNetCookbook.VBExamples.CH21TestDynamicMenuVB" title="Test Dynamic Menu" %> <asp:Content  runat="server" ContentPlaceHolder> <div align="center" > Test Dynamic Menu (VB) </div> </asp:Content>