Cutting Edge:为ASP.NET控件加入快捷菜单(2)
日期：2012-02-07 浏览次数：20538 次
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="...">
处理程序脚本可以被程序化的添加到每一个页面元素，只要这个元素被标记为runat=server。这样实际上就是在ContextMenu快捷菜单控件和页面之间创建了一个逻辑信赖。另外，你必须在页面上定义一个额外的服务器控件。当然，在运行时实例化一个额外的控件并不会严重的影响执行效果，但是为什么仅仅因为想容易的consume其它的控件而实例化一个无用的控件呢。作为选择下面这个方法也可以达到同样的效果：用body获取按Esc键和鼠标点击，并且你节省了服务器控件的开支
<body onkeypress="<% = ContextMenu1.GetEscReference() %>" >
让我们更详细的说一下控件的实现
控件的实现
ContextMenu控件的核心在于重写CreatechildControls方法。在这个方法中控件创建界面并在页面中写入所需的脚本。我们说过，ContexMenu控件的用户界面分为两部分——图形和脚本。我们先说图形。
CreateChildControls方法产生一个可以在页面移动的HTML块，它就是所需的弹出菜单。照这样看来，快捷菜单就是包含一个table表单的<DIV> ，每一个菜单项就是这个table表单中的一行。使用table是由于一系列的开发点（象边框和浮动层）和它能很容易的扩展（例如添加侧边图象）所决定的。
HtmlGenericControl div = new HtmlGenericControl("div");
div.ID = "Root";
div.Style["Display"] = "none";
div.Style["position"] = "absolute";
if (AutoHide)
div.Attributes["onmouseleave"] = "this.style.display='none'";
我们使用层叠样式表(CSS)来隐藏最外层的<DIV>标签，并且用绝对位置标记这个<DIV>。如果自动隐藏可用，那么<DIV> 还得处理 mouse-leave(鼠标离开)事件来隐藏本身。那么 onmouseout和onmouseleave事件有什么不同呢？前者是当鼠标移动到一个新的元素上时发生，而后者是当鼠标移出绑定对象时发生。举例说明：你的鼠标在一个有两行的表单（table）上移动。当你在table的两行之间移动时，onmouseout事件就会发生；只有你的鼠标移动到table表单之外时onmouseleave事件才发生。
Table包含和要显示的菜单项个数相同的行，每一行有一个单元格，每个单元格里放一个LinkButton对象。菜单通过一个循环创建：
foreach(ContextMenuItem item in ContextMenuItems)
{
TableRow menuItem = new TableRow();
menuTable.Rows.Add(menuItem);
TableCell container = new TableCell();
menuItem.Cells.Add(container);
LinkButton button = new LinkButton();
container.Controls.Add(button);
...
}
行的单元格有一组脚本操作——onmouseover和onmouseout——完成鼠标划过的效果。当鼠标划过时改变背景颜色。鼠标离开时恢复初始颜色。默认的背景色由从WebControl继承的background属性指定。高
作者：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="...">
处理程序脚本可以被程序化的添加到每一个页面元素，只要这个元素被标记为runat=server。这样实际上就是在ContextMenu快捷菜单控件和页面之间创建了一个逻辑信赖。另外，你必须在页面上定义一个额外的服务器控件。当然，在运行时实例化一个额外的控件并不会严重的影响执行效果，但是为什么仅仅因为想容易的consume其它的控件而实例化一个无用的控件呢。作为选择下面这个方法也可以达到同样的效果：用body获取按Esc键和鼠标点击，并且你节省了服务器控件的开支
<body onkeypress="<% = ContextMenu1.GetEscReference() %>" >
让我们更详细的说一下控件的实现
控件的实现
ContextMenu控件的核心在于重写CreatechildControls方法。在这个方法中控件创建界面并在页面中写入所需的脚本。我们说过，ContexMenu控件的用户界面分为两部分——图形和脚本。我们先说图形。
CreateChildControls方法产生一个可以在页面移动的HTML块，它就是所需的弹出菜单。照这样看来，快捷菜单就是包含一个table表单的<DIV> ，每一个菜单项就是这个table表单中的一行。使用table是由于一系列的开发点（象边框和浮动层）和它能很容易的扩展（例如添加侧边图象）所决定的。
HtmlGenericControl div = new HtmlGenericControl("div");
div.ID = "Root";
div.Style["Display"] = "none";
div.Style["position"] = "absolute";
if (AutoHide)
div.Attributes["onmouseleave"] = "this.style.display='none'";
我们使用层叠样式表(CSS)来隐藏最外层的<DIV>标签，并且用绝对位置标记这个<DIV>。如果自动隐藏可用，那么<DIV> 还得处理 mouse-leave(鼠标离开)事件来隐藏本身。那么 onmouseout和onmouseleave事件有什么不同呢？前者是当鼠标移动到一个新的元素上时发生，而后者是当鼠标移出绑定对象时发生。举例说明：你的鼠标在一个有两行的表单（table）上移动。当你在table的两行之间移动时，onmouseout事件就会发生；只有你的鼠标移动到table表单之外时onmouseleave事件才发生。
Table包含和要显示的菜单项个数相同的行，每一行有一个单元格，每个单元格里放一个LinkButton对象。菜单通过一个循环创建：
foreach(ContextMenuItem item in ContextMenuItems)
{
TableRow menuItem = new TableRow();
menuTable.Rows.Add(menuItem);
TableCell container = new TableCell();
menuItem.Cells.Add(container);
LinkButton button = new LinkButton();
container.Controls.Add(button);
...
}
行的单元格有一组脚本操作——onmouseover和onmouseout——完成鼠标划过的效果。当鼠标划过时改变背景颜色。鼠标离开时恢复初始颜色。默认的背景色由从WebControl继承的background属性指定。高
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
