ASP.NET - 菜单控件概述

利用 ASP.NET Menu 控件，可以开发 ASP.NET 网页的静态和动态显示菜单。

      Menu 控件具有两种显示模式：静态模式和动态模式。静态显示意味着 Menu 控件始终是完全展开的。整个结构都是可视的，用户可以单击任何部位。在动态显示的菜单中，只有指定的部分是静态的，而只有用户将鼠标指针放置在父节点上时才会显示其子菜单项。

您可以在 Menu 控件中直接配置其内容，也可通过将该控件绑定到数据源的方式来指定其内容。无需编写任何代码，便可控制 ASP.NET Menu 控件的外观、方向和内容。除该控件公开的可视属性外，该控件还支持 ASP.NET 控件外观和主题。

 

一、静态显示行为

使用 Menu 控件的 StaticDisplayLevels 属性可控制静态显示行为。StaticDisplayLevels 属性指示从根菜单算起，静态显示的菜单的层数。例如，如果将 StaticDisplayLevels 设置为 3，菜单将以静态显示的方式展开其前三层。静态显示的最小层数为 1，如果将该值设置为 0 或负数，该控件将会引发异常。

 

二、动态显示行为

MaximumDynamicDisplayLevels 属性指定在静态显示层后应显示的动态显示菜单节点层数。例如，如果菜单有 3 个静态层和 2 个动态层，则菜单的前三层静态显示，后两层动态显示。

如果将 MaximumDynamicDisplayLevels 设置为 0，则不会动态显示任何菜单节点。如果将 MaximumDynamicDisplayLevels 设置为负数，则会引发异常。

 

三、定义菜单内容

可以通过两种方式来定义 Menu 控件的内容：添加单个 MenuItem 对象（以声明方式或编程方式）；用数据绑定的方法将该控件绑定到 XML 数据源。

 

四、手动添加菜单项

可以通过在 Items 属性中指定菜单项的方式向控件添加单个菜单项。Items 属性是 MenuItem 对象的集合。下面的示例演示 Menu 控件的声明性标记，该控件有三个菜单项，每个菜单项有两个子项：

<asp:Menu ID="Menu1" runat="server" StaticDisplayLevels="3">

  <Items>

    <asp:MenuItem Text="File" Value="File">

      <asp:MenuItem Text="New" Value="New"></asp:MenuItem>

      <asp:MenuItem Text="Open" Value="Open"></asp:MenuItem>

    </asp:MenuItem>

    <asp:MenuItem Text="Edit" Value="Edit">

      <asp:MenuItem Text="Copy" Value="Copy"></asp:MenuItem>

      <asp:MenuItem Text="Paste" Value="Paste"></asp:MenuItem>

    </asp:MenuItem>

    <asp:MenuItem Text="View" Value="View">

      <asp:MenuItem Text="Normal" Value="Normal"></asp:MenuItem>

      <asp:MenuItem Text="Preview" Value="Preview"></asp:MenuItem>

    </asp:MenuItem>

  </Items>

</asp:Menu>

 

五、用数据绑定的方法将控件绑定到 XML 数据源

利用这种将控件绑定到 XML 文件的方法，可以通过编辑此文件来控制菜单的内容，而不需要使用设计器。这样就可以在不重新访问 Menu 控件或编辑任何代码的情况下，更新站点的导航内容。如果站点内容有变化，便可使用 XML 文件来组织内容，再提供给 Menu 控件，以确保网站用户可以访问这些内容。

 

六、外观和行为

可通过 Menu 控件的属性来调整该控件的行为。此外，您还可以控制动态显示行为，包括菜单节点持续显示的时间长度。例如，若要将 Menu 的方向从水平更改为垂直，则可按以下所述来设置 Orientation 属性：

Menu.Orientation = Orientation.Vertical;

      将该属性设置为 Orientation.Horizontal，便可将菜单方向恢复为水平。

可以逐个设置 Menu 控件的属性来指定其外观的大小、颜色、字体和其他特性。此外，还可以对 Menu 控件应用外观和主题。

 

七、样式

每个菜单层都支持样式属性。如果没有设置动态样式属性，则使用静态样式属性。如果设置了动态样式属性，而没有设置静态样式属性，则使用默认的静态样式属性进行呈现。Menu 控件样式的层次结构如下所示：

      1、控件

2、SubMenuStyles

3、MenuItemStyles

4、SelectedItemStyles

5、HoverMenuItemStyles

使用下面的逻辑可跨动态和静态菜单合并这些样式：

·各种样式分别被应用至适当的操作或项类型。

·所有样式都被合并到层次结构中优先于这些样式的样式中，并重写最后的样式。

 

说明： 永远不会合并静态菜单；如果没有定义静态样式，则应用动态样式。

 

八、动态外观计时

设计动态菜单时需要注意的一个方面便是菜单动态显示部分从显示到消失所需的时间长度。按以下方式调整 DisappearAfter 属性，可以按毫秒配置此值：

Menu.DisappearAfter = 1000;

默认值为 500 毫秒。如果将 DisappearAfter 的值设置为 0，在 Menu 控件之外暂停便会使其立即消失。将此值设置为 -1 指示暂停时间无限长，只有在 Menu 控件之外单击，才会使动态部分消失。

 

九、将 Menu 控件与 UpdatePanel 控件一起使用

UpdatePanel 控件用于通过回发更新页面的选定区域，而不是更新整个页面。Menu 控件可以在 UpdatePanel 控件内使用，限制条件是必须使用对级联样式表 (CSS) 类的引用来应用样式。例如，使用属性-CssClass（其中属性指 Property）属性 (Attribute) 来设置样式，而不是使用属性-子属性（其中属性指 Property）属性 (Attribute) 设置 DynamicHoverStyle 属性 (Property)。同样，在使用 DynamicHoverStyle 模板设置样式时，请使用该模板的 CssClass 属性 (Attribute)。

 

十、Menu 类

      Menu 控件用于显示 ASP.NET 网页中的菜单，并常与用于导航网站的 SiteMapDataSource 控件结合使用。Menu 控件支持下面的功能：

·数据绑定，将控件菜单项绑定到分层数据源。

·站点导航，通过与 SiteMapDataSource 控件集成实现。

·对 Menu 对象模型的编程访问，可动态创建菜单，填充菜单项，设置属性等。

·可自定义外观，通过主题、用户定义图像、样式和用户定义模板实现。

 

      用户单击菜单项时，Menu 控件可以导航到所链接的网页或直接回发到服务器。如果设置了菜单项的 NavigateUrl 属性，则 Menu 控件导航到所链接的页；否则，该控件将页回发到服务器进行处理。默认情况下，链接页与 Menu 控件显示在同一窗口或框架中。若要在另一个窗口或框架中显示链接内容，请使用 Menu 控件的 Target 属性。

说明： Target 属性影响控件中的所有菜单项。若要为单个菜单项指定一个窗口或框架，请直接设置 MenuItem 对象的 Target 属性。

Menu 控件显示两种类型的菜单：静态菜单和动态菜单。静态菜单始终显示在 Menu 控件中。默认情况下，根级（级别 0）菜单项显示在静态菜单中。通过设置 StaticDisplayLevels 属性，可以在静态菜单中显示更多菜单级别（静态子菜单）。级别高于 StaticDisplayLevels 属性所指定的值的菜单项（如果有）显示在动态菜单中。仅当用户将鼠标指针置于包含动态子菜单的父菜单项上时，才会显示动态菜单。一定的持续时间之后，动态菜单自动消失。使用 DisappearAfter 属性指定持续时间。

说明： 如果用户在菜单外部单击，动态菜单也会消失。

      还可以通过设置 MaximumDynamicDisplayLevels 属性，限制动态菜单的显示级别数。高于指定值的菜单级别则被丢弃。

说明： Menu 控件不应在 UpdatePanel 控件中使用。可仅将 Menu 控件添加到 UpdatePanel 控件以外的页面。UpdatePanel 控件用于更新页面的选定区域，而不会用回发更新整个页面。

 

10.1、菜单项

Menu 控件由菜单项（由 MenuItem 对象表示）树组成。顶级（级别 0）菜单项称为根菜单项。具有父菜单项的菜单项称为子菜单项。所有根菜单项都存储在 Items 集合中。子菜单项存储在父菜单项的 ChildItems 集合中。

每个菜单项都具有 Text 属性和 Value 属性。Text 属性的值显示在 Menu 控件中，而 Value 属性则用于存储菜单项的任何其他数据（如传递给与菜单项关联的回发事件的数据）。在单击时，菜单项可导航到 NavigateUrl 属性指示的另一个网页。

说明： 如果菜单项未设置 NavigateUrl 属性，则单击该菜单项时，Menu 控件只是将页提交给服务器进行处理。

通过设置 ImageUrl 属性，也可选择在菜单项中显示图像。

 

10.2、静态数据

最简单的 Menu 控件数据模型即是静态菜单项。若要使用声明性语法显示静态菜单项，请首先在 Menu 控件的开始和结束标记之间嵌套开始和结束标记 <Items>。然后，通过在开始和结束标记 <Items> 之间嵌套 <asp:MenuItem> 元素，创建菜单结构。每个 <asp:MenuItem> 元素都表示控件中的一个菜单项，并映射到一个 MenuItem 对象。通过设置菜单项的 <asp:MenuItem> 元素的属性 (Attribute)，可以设置其属性 (Property)。若要创建子菜单项，请在父菜单项的开始和结束标记 <asp:MenuItem> 之间嵌套更多 <asp:MenuItem> 元素。

 

10.3、绑定到数据

Menu 控件也可以绑定到数据。可以使用下面两种方法中的一种将 Menu 控件绑定到适当的数据源类型：

·Menu 控件可以使用任意分层数据源控件，如 XmlDataSource 控件或 SiteMapDataSource 控件。若要绑定到分层数据源控件，请将 Menu 控件的 DataSourceID 属性设置为数据源控件的 ID 值。Menu 控件自动绑定到指定的数据源控件。这是绑定到数据的首选方法。

·Menu 控件还可以绑定到 XmlDocument 对象。若要绑定到此数据源，请将 Menu 控件的 DataSource 属性设置为该数据源，然后调用 DataBind 方法。

在绑定到数据源时，如果数据源的每个数据项都包含多个属性 (Property)（例如具有多个属性 (Attribute) 的 XML 元素），则菜单项默认显示数据项的 ToString 方法返回的值。对于 XML 元素，菜单项显示其元素名称，这样可显示菜单树的基础结构，但除此之外并无用处。通过使用 DataBindings 集合指定菜单项绑定，可以将菜单项绑定到特定数据项属性。DataBindings 集合包含 MenuItemBinding 对象，这些对象定义数据项和它所绑定到的菜单项之间的关系。您可以指定要在节点中显示的绑定条件和数据项属性。

不能通过将 Text 或 TextField 属性设置为空字符串 ("") 在 Menu 控件中创建空节点。将这些属性设置为空字符串相当于未设置这些属性。在这种情况下，Menu 控件将使用 DataSource 属性创建默认绑定。

 

10.4、自定义用户界面

可以使用多种方法自定义 Menu 控件的外观。首先，可以通过设置 Orientation 属性，指定是水平还是垂直呈现 Menu 控件。还可以为每个菜单项类型指定不同的样式（如字体大小和颜色等）。

如果想使用级联样式表 (CSS) 自定义控件的外观，您既可以使用内联样式，也可以使用一个单独的 CSS 文件，但不能同时使用这两者。同时使用内联样式和一个单独的 CSS 文件，会导致意外的结果。有关将样式表与控件结合使用的更多信息，请参见 ASP.NET Web 服务器控件和 CSS 样式。

下表列出了可用的菜单项样式。

菜单项样式属性	说明
DynamicHoverStyle	动态菜单项在鼠标指针置于其上时的样式设置。
DynamicMenuItemStyle	单个动态菜单项的样式设置。
DynamicMenuStyle	动态菜单的样式设置。
DynamicSelectedStyle	当前选定的动态菜单项的样式设置。
StaticHoverStyle	静态菜单项在鼠标指针置于其上时的样式设置。
StaticMenuItemStyle	单个静态菜单项的样式设置。
StaticMenuStyle	静态菜单的样式设置。
StaticSelectedStyle	当前选定的静态菜单项的样式设置。

      除了设置各样式属性之外，还可以根据菜单项的级别，使用下列样式集合指定应用于菜单项的样式。

级别样式集合	说明
LevelMenuItemStyles	MenuItemStyle 对象的集合，这些对象根据级别控制菜单项的样式。
LevelSelectedStyles	MenuItemStyle 对象的集合，这些对象根据级别控制所选菜单项的样式。
LevelSubMenuStyles	MenuItemStyle 对象的集合，这些对象根据级别控制子菜单项的样式。

      集合的第一个样式对应于菜单树第一个深度级别的菜单项的样式。集合的第二个样式对应于菜单树第二个深度级别的菜单项的样式，依此类推。此集合最常用于生成目录风格的导航菜单；在这种导航菜单中，某个深度的菜单项不管是否具有子菜单，都有相同的外观。

说明： 如果使用上表列出的任何级别样式集合来定义 Menu 控件的样式，这些样式设置都会重写各菜单项的样式属性。

改变控件外观的另一种方法是自定义显示在 Menu 控件中的图像。通过设置下表所示的属性，可以为控件各部分指定自己的自定义图像。

图像属性	说明
DynamicBottomSeparatorImageUrl	显示在动态菜单项底部的可选图像，用于将菜单项与其他菜单项隔开。
DynamicPopOutImageUrl	显示在动态菜单项中的可选图像，用于指示菜单项具有子菜单。
DynamicTopSeparatorImageUrl	显示在动态菜单项顶部的可选图像，用于将菜单项与其他菜单项隔开。
ScrollDownImageUrl	显示在菜单项底部的图像，用于指示用户可以向下滚动查看其他菜单项。
ScrollUpImageUrl	显示在菜单项顶部的图像，用于指示用户可以向上滚动查看其他菜单项。
StaticBottomSeparatorImageUrl	显示在静态菜单项底部的可选图像，用于将菜单项与其他菜单项隔开。
StaticPopOutImageUrl	显示在静态菜单项中的可选图像，用于指示菜单项具有子菜单。
StaticTopSeparatorImageUrl	显示在静态菜单项顶部的可选图像，用于将菜单项与其他菜单项隔开。

      若要完全控制用户界面 (UI)，可以使用下列模板属性为 Menu 控件定义自己的自定义模板。

模板属性	说明
DynamicItemTemplate	包含动态菜单项的自定义呈现内容的模板。
StaticItemTemplate	包含静态菜单项的自定义呈现内容的模板。

      通过设置 DynamicVerticalOffset 和 DynamicHorizontalOffset 属性，可以控制动态菜单相对于其父菜单项的垂直和水平位置。若要控制静态子菜单在静态菜单中的缩进，请使用 StaticSubMenuIndent 属性。

 

10.5事件

Menu 控件提供多个可以对其进行编程的事件。这使您可以在每次发生事件时都运行一个自定义例程。下表列出了受支持的事件。

事件	说明
MenuItemClick	单击菜单项时发生。此事件通常用于将页上的一个 Menu 控件与另一个控件进行同步。
MenuItemDataBound	当菜单项绑定到数据时发生。此事件通常用来在菜单项呈现在 Menu 控件中之前对菜单项进行修改。

 

10.6、示例

下面的代码示例演示如何使用声明性语法创建具有静态菜单项的 Menu 控件。

<%@ Page Language="C#" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html  >

 

  <!-- For the hover styles of the Menu control to  -->

  <!-- work correctly, you must include this head   -->

  <!-- element.                                     -->

  <head runat="server">

    <title>Menu Declarative Example</title>

</head>

 

  <body>

    <form id="form1" runat="server">

 

      <h3>Menu Declarative Example</h3>

 

      <!-- Use declarative syntax to create the   -->

      <!-- menu structure. Submenu items are      -->

      <!-- created by nesting them in parent menu -->

      <!-- items.                                 -->

      <asp:menu id="NavigationMenu"

        disappearafter="2000"

        staticdisplaylevels="2"

        staticsubmenuindent="10"

        orientation="Vertical"

        font-names="Arial"

        target="_blank" 

        runat="server">

 

        <staticmenuitemstyle backcolor="LightSteelBlue"

          forecolor="Black"/>

        <statichoverstyle backcolor="LightSkyBlue"/>

        <dynamicmenuitemstyle backcolor="Black"

          forecolor="Silver"/>

        <dynamichoverstyle backcolor="LightSkyBlue"

          forecolor="Black"/>

 

        <items>

          <asp:menuitem navigateurl="Home.aspx"

            text="Home"

            tooltip="Home">

            <asp:menuitem navigateurl="Music.aspx"

              text="Music"

              tooltip="Music">

              <asp:menuitem navigateurl="Classical.aspx"

                text="Classical"

                tooltip="Classical"/>

              <asp:menuitem navigateurl="Rock.aspx"

                text="Rock"

                tooltip="Rock"/>

              <asp:menuitem navigateurl="Jazz.aspx"

                text="Jazz"

                tooltip="Jazz"/>

            </asp:menuitem>

            <asp:menuitem navigateurl="Movies.aspx"

              text="Movies"

              tooltip="Movies">

              <asp:menuitem navigateurl="Action.aspx"

                text="Action"

                tooltip="Action"/>

              <asp:menuitem navigateurl="Drama.aspx"

                text="Drama"

                tooltip="Drama"/>

              <asp:menuitem navigateurl="Musical.aspx"

                text="Musical"

                tooltip="Musical"/>

            </asp:menuitem>

          </asp:menuitem>

        </items>

 

      </asp:menu>

 

    </form>

  </body>

</html>

 

      下面的代码示例演示如何将 Menu 控件绑定到 SiteMapDataSource 控件。若要此示例正确运行，您必须将下面的示例站点地图数据复制到名为 Web.sitemap 的文件中。

<%@ Page Language="C#" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html  >

 

  <!-- For the hover styles of the Menu control to  -->

  <!-- work correctly, you must include this head   -->

  <!-- element.                                     -->

  <head runat="server">

    <title>Menu DataBinding Example</title>

</head>

 

  <body>

    <form id="form1" runat="server">

 

      <h3>Menu DataBinding Example</h3>

 

      <!-- Bind the Menu control to a SiteMapDataSource control.  -->

      <asp:menu id="NavigationMenu"

        disappearafter="2000"

        staticdisplaylevels="2"

        staticsubmenuindent="10"

        orientation="Vertical"

        font-names="Arial"

        target="_blank"

        datasourceid="MenuSource"  

        runat="server">

 

        <staticmenuitemstyle backcolor="LightSteelBlue"

          forecolor="Black"/>

        <statichoverstyle backcolor="LightSkyBlue"/>

        <dynamicmenuitemstyle backcolor="Black"

          forecolor="Silver"/>

        <dynamichoverstyle backcolor="LightSkyBlue"

          forecolor="Black"/>

 

      </asp:menu>

 

      <asp:SiteMapDataSource id="MenuSource"

        runat="server"/>       

 

    </form>

  </body>

</html>

 

      下面是前一示例的示例站点地图数据。

<siteMap>

  <siteMapNode url="~\Home.aspx"

    title="Home"

    description="Home">

    <siteMapNode url="~\Music.aspx"

      title="Music"

      description="Music">

      <siteMapNode url="~\Classical.aspx"

        title="Classical"

        description="Classical"/>

      <siteMapNode url="~\Rock.aspx"

        title="Rock"

        description="Rock"/>

      <siteMapNode url="~\Jazz.aspx"

        title="Jazz"

        description="Jazz"/>

    </siteMapNode>

    <siteMapNode url="~\Movies.aspx"

      title="Movies"

      description="Movies">

      <siteMapNode url="~\Action.aspx"

        title="Action"

        description="Action"/>

      <siteMapNode url="~\Drama.aspx"

        title="Drama"

        description="Drama"/>

      <siteMapNode url="~\Musical.aspx"

        title="Musical"

        description="Musical"/>

    </siteMapNode>

  </siteMapNode>

</siteMap>