Cutting Edge:为ASP.NET控件加入快捷菜单(2)

英文原文：Adding a Context Menu to ASP.NET Controls
作者：Dino Esposito
翻译：刘瑞才
源码：CuttingEdge0502.exe
  • 编程接口

    我们的ContextMenu控件从WebControl继承并执行INamingContainer接口

    public class ContextMenu : WebControl, INamingContainer

    图一控件的成员细节,如下：

    属性 描述
    AutoHide 标志当用户鼠标移出控件区域时，是否自动隐藏快捷菜单
    BoundControls 返回使用快捷菜单的控件集合
    CellPadding 返回或配置每个菜单项周围的空间的象素数
    ContextMenuItems 返回菜单项的集合
    RolloverColor 返回或配置当鼠标划过菜单项时突显的颜色
    方法 描述
    GetEscReference 返回当用户按下Esc键时用于隐藏页面中的快捷菜单的JavaScrip代码
    GetMenuReference 返回一段JavaScript代码，这段代码将关联到快捷菜单所对应的HTML元素上．
    GetOnClickReference 返回当用户在菜单区域外点击时隐藏快捷菜单的代码．
    事件 描述
    ItemCommand 当用户点击一个快捷菜单项进激发．

    关键属性是ContextMenuItmes集合属性，他包含了ContextMenuItem类型的对象集合，每一个对象表示一个菜单项。ContextMenuItem类的源码如下：

    [TypeConverter(typeof(ExpandableObjectConverter))]
    public class ContextMenuItem
    {
    public ContextMenuItem() {}
    public ContextMenuItem(string text, string commandName)
    {
    _text = text;
    _commandName = commandName;
    }
    private string _text;
    private string _commandName;
    private string _tooltip;
    public string Text
    {
    get {return _text;}
    set {_text = value;}
    }
    public string CommandName
    {
    get {return _commandName;}
    set {_commandName = value;}
    }
    public String Tooltip
    {
    get {return _tooltip;}
    set {_tooltip = value;}
    }
    }

    每个菜单项具备显示文本，命令名(command name)，提示文本(tooltip)。您能够通过各方法扩展这个类，例如添加一个图片URL，一个不可用状态，或一个目标URL等。显示文本被显示于菜单项上；命令名是个唯一标识字符串，用于指定或确定和菜单项关联的命令。tooltip获取或配置当鼠标指针停留在菜单项上时显示的工具提示文本

    当用户点击菜单项时，页面回传并激发一个服务器端的ItemCommand事件。控制页通过操作这一事件来执行一些代码来响应用户对菜单项的点击。图3是个使用快捷菜单的示例工程的截图：

    要使用快捷菜单，您需要使用menu item对象填充ContextMenuItems集合，调整一些可视化样式，至少添加一个控件到BoundControls集合中。然后在浏览器中打开示例页，在任意绑定快捷菜单的控件上右击。效果如图：

    每个菜单项包含一个LinkButton控件，这个LinkButton控件有一个内部绑定的点击事件处理程式。当检测到点击时，页面回传并激发这个点击事件。接着，预定义的处理程式将事件冒泡到上一级，并改名为ItemCommand。

    控件还定义了一些可视化的属性，象CellPadding,RolloverColor和AutoHide。重申一下，在Windows中快捷菜单能够在按下Esc键或在菜单区域外点击时取消。对于基于Web的快捷菜单来说，AutoHide属性为快捷菜单的根标签添加OnMouseLeave脚本，所以当用户的鼠标离开菜单区域时，这个根标签的子树将隐藏。把AutoHide作为一个可配置的属性，用户能够在需要的时候配置是否在鼠标离开时自动隐藏快捷菜单。

    要使菜单能够在点击或按Esc键时隐藏，需要添加如下处理程式：< br><bodyonkeypress="..."onclick="...">

    处理程式脚本能够被程式化的添加到每一个页面元素，只要这个元素被标记为runat=server。这样实际上就是在ContextMenu快捷菜单控件和页面之间创建了一个逻辑信赖。另外，您必须在页面上定义一个额外的服务器控件。当然，在运行时实例化一个额外的控件并不会严重的影响执行效果，但是为什么仅仅因为想容易的consume其他的控件而实例化一个无用的控件呢。作为选择下面这个方法也能够达到同样的效果：用body获取按Esc键和鼠标点击，并且您节省了服务器控件的开支

    <body onkeypress="<% = ContextMenu1.GetEscReference() %>" onclick="<% = ContextMenu1.GetOnClickReference() %>">

    让我们更周详的说一下控件的实现

  • 控件的实现

    ContextMenu控件的核心在于重写CreatechildControls方法。在这个方法中控件创建界面并在页面中写入所需的脚本。我们说过，ContexMenu控件的用户界面分为两部分——图像和脚本。我们先说图像。

    文章整理：西部数码--专业提供域名注册、虚拟主机服务
    http://www.west263.com
    以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!