- Menu Web Server Control
in ASP.NET environment,This article describes you how to work with Menu Web Control.The
primary mechanism of the Menu control is to create a navigation within our application.In
other words, The ASP.NET Menu control enables you to add navigational functionality
to your Web pages. The Menu control supports a main menu and submenus, and allows
you to define dynamic menus (sometimes called "fly-out" menus).
In ASP.NET environment, Using the ASP.NET Menu control to develop both statically
and dynamically displayed menus for your ASP.NET Web pages. You can configure the
contents of the Menu control directly in the control, or you can specify the contents
by binding the control to a data source.
Static Display
By using the StaticDisplayLevels property, we are able to control static display
in the Menu control. The StaticDisplayLevels property indicates how many levels
to display statically from the root of the menu. For example, menu can be expanded
upto first three levels when StaticDisplayLevels is set to 3, The minimum static
display level is 1, and the control will throw an exception if the value is set
to 0 or a negative number.
Dynamic Display
The MaximumDynamicDisplayLevels property specifies how many levels of dynamically
appearing menu nodes should be displayed after the static display level. For example,
if your menu has a static level of 3 and a dynamic level of 2, the first three levels
of your menu would be statically displayed, while the next two levels would be dynamic.
To Adding Menu Items
The following example shows the declarative markup for a Menu control with three
items, each of which has two child items:
-
<asp:Menu ID="Menu1" runat="server" StaticDisplayLevels="3">
<Items>
<asp:MenuItem Text="File" Value="File">
<asp:MenuItem Text="Menu1" Value="New"></asp:MenuItem>
<asp:MenuItem Text="Menu2" Value="Open"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="Edit" Value="Edit">
<asp:MenuItem Text="Menu3" Value="Copy"></asp:MenuItem>
<asp:MenuItem Text="Menu4" Value="Paste"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="View" Value="View">
<asp:MenuItem Text="Menu5" Value="Normal"></asp:MenuItem>
<asp:MenuItem Text="Menu6" Value="Preview"></asp:MenuItem>
</asp:MenuItem>
</Items>
</asp:Menu>
-
- Appearance
Along the properties of the Menu Control, We can adjust the behavior of the Menu
control. Additionally, you can control the behavior of dynamic display, including
the amount of time a menu node remains visible once it is displayed. For example,
to change the Menu orientation from horizontal to vertical, Use the folloing,
Menu.Orientation = Orientation.Vertical;
-
- Style
The following styles can be used under the Menu Control:
- Control
- SubMenuStyles
- MenuItemStyles
- SelectedItemStyles
- HoverMenuItemStyles
Using Menus through Programmatically
Normally, The ASP.NET Menu control can be used to create navigational menus for
your Web site.here,using the programmatic aspects of the ASP.NET Menu control and
create two menus bound to the same Web.sitemap file that work together.statically,
The first menu is displaying the menu of categories such as computer,supercomputer,mainframe.
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.
To create the Web.sitemap file
- Solution Explorer --> right-click --> Add New Item.
- choose Site Map and then click Add.
- Add the following XML code to the new file. The XML represents a hierarchy of menu
choices.
-
<?xml version="1.0" encoding="utf-8" ?>
<siteMap>
<siteMapNode title="Home">
<siteMapNode title="Computer">
<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>
<siteMapNode title="">
<siteMapNode title="supercomputer" url="Default.aspx?node=consulting">
<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="Support">
<siteMapNode title="mainframe" url="Default.aspx?node=drivers">
<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>
</siteMap>
-
- To create the first menu
- in Design View, Include a Menu Control into the Page
- In the Properties window, set the Orientation property to Horizontal.
- Set MaximumDynamicDisplayLevels to 0.
- Be sure that StaticDisplayLevels is set to 1.
- Click the smart tag on the Menu control.
- 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.
To configure the first data source
- In Design view, and then click the smart tag on the Menu control.
- 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.
To create the second menu
- 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.
- 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.
To configure the second data source's starting point
- Select SiteMapDataSource2 and set its StartingNodeURL property to "Home.aspx?node=hardware".
- Set StartingNodeOffset to -1.
- Set ShowStartingNode to False.
To coordinate the menus in code
- In Design View, and select Menu1.
- In Properties, set the MenuItemClick event to Menu1_MenuItemClick.
- Copy and paste the following code to the method.
-
protected void Menu1_MenuItemClick(Object sender,
System.Web.UI.WebControls.MenuEventArgs e)
{
switch(e.Item.Value)
{
case "Computer":
SiteMapDataSource2.StartingNodeUrl = "Default.aspx?node=hardware";
return;
case "suptercomputer":
SiteMapDataSource2.StartingNodeUrl = "Default.aspx?node=software";
return;
case "mainframe":
SiteMapDataSource2.StartingNodeUrl = "Default.aspx?node=hardware";
return;
}
}
-
-
- Save and run the Application.
-
- Related Links
-