ASP.NET控件之Menu控件

周易&玄学&武术&气功   2008-07-30 18:12   阅读16   评论0  
字号： 大  中  小

利用 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 属性：

[C#]

Menu.Orientation = Orientation.Vertical;

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

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

样式

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

  1. 控件

  2. SubMenuStyles

  3. MenuItemStyles

  4. SelectedItemStyles

  5. HoverMenuItemStyles

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

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

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

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

动态外观计时

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

[C#]

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

控件的主类。

MenuEventArgs

为 Menu 控件的 MenuItemClick 和 MenuItemDataBound 事件提供数据。

MenuEventHander

表示处理 Menu 控件的 MenuItemClick 事件或 MenuItemDataBound 事件的方法。

MenuItem

表示一个在 Menu 控件中显示的菜单项。

MenuItemBinding

定义一个数据项与 Menu 控件中该数据项绑定到的菜单项之间的关系。

MenuItemBindingCollection

表示 MenuItemBinding 对象的集合。

MenuItemCollection

表示 Menu 控件中菜单项的集合。

MenuItemStyle

表示 Menu 控件中菜单项的样式。

MenuItemStyleCollection

表示 Menu 控件中 MenuItemStyle 对象的集合。

 

前台：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="FMenu.aspx.cs" Inherits="Web_FMenu" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

     <title>横向菜单</title>

</head>

<body>

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

     <div>

         <asp:Menu ID="Menu1" runat="server" BackColor="#B5C7DE" DynamicHorizontalOffset="2"

             ForeColor="#284E98" Height="15" Orientation="Horizontal" StaticSubMenuIndent="10px"

             Style="font-size: 8pt; font-family: Verdana">

             <StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />

             <DynamicHoverStyle BackColor="#284E98" ForeColor="White" />

             <DynamicMenuStyle BackColor="#B5C7DE" BorderColor="#ffffff" BorderStyle="Solid" BorderWidth="1px" />

             <StaticSelectedStyle BackColor="#507CD1" />

             <DynamicSelectedStyle BackColor="#507CD1" />

             <DynamicMenuItemStyle BorderColor="#ffffff" BorderStyle="Solid" BorderWidth="1px"

                 HorizontalPadding="5px" VerticalPadding="2px" />

             <StaticHoverStyle BackColor="#284E98" ForeColor="White" />

             <DynamicMenuItemStyle BackColor="#B5C7DE" Font-Names="Verdana" Font-Size="8pt" />

         </asp:Menu>

    

     </div>

     </form>

</body>

</html>

后台代码：

using System;

using System.Data;

using System.Configuration;

using System.Collections;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

public partial class Web_FMenu : System.Web.UI.Page

{

     #region 页面初始化

     protected void Page_Load(object sender, EventArgs e)

     {

         if (!Page.IsPostBack)

         {

             FirstMenu fm = new FirstMenu();

             DataSet ds = fm.SelectAllFirstMenu();

             CreateMenu(1, (MenuItem)null, ds);

         }

     }

     #endregion

     #region 递归生成横向菜单

     public void CreateMenu(int ParentID, MenuItem tempItem, DataSet ds)

     {

         DataView dvMenu = new DataView(ds.Tables[0]);

         //过滤ParentID,得到当前的所有子节点

         //dvMenu.RowFilter = "[MenuParentId] = " + ParentID;

         foreach (DataRowView Row in dvMenu)

         {

             if (tempItem == null)

             {     //添加根节点

                 MenuItem Node = new MenuItem();

                 Node.Text = Row["FMenuName"].ToString();

                 //Node.ImageUrl = "Image/" + Row["MenuImage"].ToString();

                 //Node.PopOutImageUrl = "Image/middle.gif";

                 this.Menu1.Items.Add(Node);

                // CreateMenu(Int32.Parse(Row["Fid"].ToString()), Node, ds);     //再次递归

             }

             else

             {    //添加当前节点的子节点

                 MenuItem Node = new MenuItem();

                 Node.Text = Row["FMenuName"].ToString();

                 Node.NavigateUrl = Row["Url"].ToString();

                 //Node.ImageUrl = "Image/" + Row["MenuImage"].ToString();

                 //Node.Target = Row["left"].ToString();

                 tempItem.ChildItems.Add(Node);

                 //CreateMenu(Int32.Parse(Row["Fid"].ToString()), Node, ds); //再次递归

             }

         }

     }

     #endregion

}

 

而在开发桌面程序的时候，IDE提供了成熟的菜单控件，进行菜单设计尤为方便。幸运的是在ASP.NET中，也提供了一个Menu控件！。这个控件在设计Web应用程序是，直接将Menu控件拖到.aspx页面中，然后就像开发桌面应用程序时使用菜单工具的那种简便快捷。

下面的实例中，我们模拟设计一家企业的部门组织架构菜单，它的HTML代码如下，注意Menu控件中的Item项。 

 

        <asp:Menu ID="Menu1" runat="server" OnMenuItemClick="Menu1_MenuItemClick" Width="187px">

 

            <Items>

                <asp:MenuItem Text="XX集团" Value="001">

                    <asp:MenuItem Text="北京分公司" Value="010">

                        <asp:MenuItem Text="市场部" Value="001"></asp:MenuItem>

                        <asp:MenuItem Text="客服部" Value="002"></asp:MenuItem>

                    </asp:MenuItem>

                    <asp:MenuItem Text="上海分公司" Value="020"></asp:MenuItem>

                    <asp:MenuItem Text="深圳分公司" Value="0755"></asp:MenuItem>

                    <asp:MenuItem Text="郑州分公司" Value="0371">

                        <asp:MenuItem Text="采购部" Value="001"></asp:MenuItem>

                        <asp:MenuItem Text="基建部" Value="002"></asp:MenuItem>

                    </asp:MenuItem>

                </asp:MenuItem>

            </Items>

        </asp:Menu>

  

当然，Menu控件中的MenuItem可以直接编写代码，但是，VS.NET 2005提供了更为直观的菜单设计工具：在.aspx页面的设计视图中，右击Menu控件，然后选择【编辑菜单项…】，就可以直接输入菜单的每个栏目，并且栏目之间的级别关系也可以直接通过单击移动控制按钮实现，如图2.14所示。

 public partial class MenuPage: System.Web.UI.Page

    {

        protected void Page_Load(object sender, EventArgs e)

        {

        }

 

        protected void Menu1_MenuItemClick(object sender, MenuEventArgs e)

        {

 

            string js = "<script>  alert(\"您选择的是" + e.Item.Parent.Text + "->" + e.Item.Text + ",其值为" + e.Item.Value + " \");</script>";

 

           Page.ClientScript.RegisterStartupScript(Page.GetType(), "msg", js);

 

        }

    }

 

运行效果如图

 

做过网站或Web应用程序的人，大部分都遇到过菜单设计的问题。以前的方法就是手工编写JavaScript代码，来模拟和相应菜单中的事件。效果是可以实现的，但是编写和维护这些JavaScript代码却无疑是很痛苦的， 尤其是当菜单结构发生变化时。

举报
评论(?)
阅读(?)
 
搜 索
 
 
首页
日志
相册
音乐
收藏
博友
关于我
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
公司简介- 联系方法- 招聘信息- 客户服务- 相关法律- 互动营销-  
网易公司版权所有 ©1997-2009