Asp.net| Menu | Control cutting Edge: Add shortcut menu for ASP.net control (2) original text: Adding a context menu to ASP.net Controls
Author: Dino Esposito
Translation: Liu Ruicai
Source code: CuttingEdge0502.exe Programming Interface
Our ContextMenu control inherits from WebControl and executes the INamingContainer interface
public class Contextmenu:webcontrol, INamingContainer
Figure A control's member details, as follows:
Property Description AutoHide Flag automatically hides shortcut menus when a user moves the mouse out of the control area Boundcontrols returns a collection of controls that use the shortcut menu cellpadding Returns or sets the number of pixels around each menu item Contextmenuitems Returns a collection of menu items Rollovercolor Returns or sets the Color method description that is highlighted when the mouse crosses the menu item getescreference returns the Javascrip code used to hide the shortcut menu in the page when the user presses the ESC key Getmenureference Returns a section of JavaScript code that is associated with the HTML element corresponding to the shortcut menu. Getonclickreference returns the code that hides the shortcut menu when the user clicks outside the menu area. Event description ItemCommand When the user clicks on a shortcut menu item into the excitation.
The key property is the Contextmenuitmes collection property, which contains a collection of objects of the Contextmenuitem type, each representing a menu item. The source code of the Contextmenuitem class is as follows:
[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;}
}
}
Each menu item has display text, a command name, and a hint text (tooltip). You can extend this class in various ways, such as adding a picture URL, an unavailable state, or a target URL. The display text is displayed on the menu item; The command name is a unique identification string that specifies or determines the command associated with the menu item. ToolTip Gets or sets the ToolTip text that appears when the mouse pointer rests on a menu item
When the user clicks on the menu item, the page ItemCommand and fires a server-side event. The control page executes some code to respond to a user's click on a menu item by manipulating the event. Figure 3 is a screenshot of a sample project using the shortcut menu:
To use the shortcut menu, you need to populate the Contextmenuitems collection with the menu item object, adjust some of the visual styles, and add at least one control to the Boundcontrols collection. Then open the sample page in the browser and right-click on the control on any bound shortcut menu. Effect as shown:
Each menu item contains a LinkButton control that has an internally bound click event handler for the LinkButton control. When a click is detected, the page is returned and the click event is triggered. The predefined handler then bubbles the event to the previous level and is renamed ItemCommand.
The control also defines some visual properties, such as Cellpadding,rollovercolor and AutoHide. Again, the shortcut menu in Windows can be canceled when you press the ESC key or click outside the menu area. For a web-based shortcut menu, the AutoHide property adds OnMouseLeave script to the root tag of the shortcut menu, so when the user's mouse leaves the menu area, the subtree of the root tag is hidden. With AutoHide as a configurable property, the user can set whether or not to automatically hide the shortcut menu when the mouse is left.
To enable the menu to be hidden when you click or press ESC, you need to add the following handler:< br><bodyonkeypress= "..." >
Handler scripts can be programmed to be added to each page element, as long as the element is marked as Runat=server. This actually creates a logical trust between the ContextMenu shortcut menu control and the page. In addition, you must define an additional server control on the page. Of course, instantiating an extra control at run time does not seriously affect the execution effect, but why not instantiate a useless control simply because you want to easily consume other controls? As a choice the following method can also achieve the same effect: use the body to get the ESC key and mouse click, and you save the server control expenses
<body onkeypress= "<% = contextmenu1.getescreference ()%>" >
Let's say a little bit more about the implementation of the control
Implementation of the control
The core of the ContextMenu control is rewriting the CreateChildControls method. In this method, the control creates an interface and writes the required script to the page. As we said, the user interface of the Contexmenu control is divided into two parts-graphics and scripts. Let's talk about graphics first.
The CreateChildControls method produces an HTML block that can be moved on the page, which is the desired pop-up menu. As it turns out, the shortcut menu is the <DIV> of a table Form, and each menu item is a row in this table Form. The use of a table is determined by a series of development points (like borders and floating layers) and the ease with which it can be extended (for example, by adding side images).
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 '";
We use cascading style sheets (CSS) to hide the outermost <DIV> tag and mark this <DIV> in absolute position. If automatic hiding is available, then <DIV> has to handle mouse-leave (mouse away) events to hide itself. So what's the difference between onmouseout and OnMouseLeave events? The former occurs when the mouse moves over a new element, which occurs when the mouse moves out of the bound object. For example: Your mouse moves on a form (table) with two rows. When you move between the two rows of a table, the onMouseOut event occurs, and the OnMouseLeave event occurs only if your mouse moves outside the table Form.
table contains rows with the same number of menu items to display, one cell per row, and one LinkButton object in each cell. Menus are created by a loop:
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);
...
}
The cell of the row has a set of script operations--onmouseover and onmouseout--to complete the mouse across the effect. Change the background color when the mouse is across. Restores the original color when the mouse leaves. The default background color is specified by the Background property inherited from WebControl. The highlight color is specified by the new property Rollovercolor.
String color = String.Format (Contextmenu.onmouseover, colortranslator.tohtml (Rollovercolor));
Container. attributes["onmouseover"] = color;
color = String.Format (Contextmenu.onmouseout, colortranslator.tohtml (BackColor));
Container. attributes["onmouseout"] = color;
You need to put. NET to convert the System.Drawing.Color value to available HTML colors. Interestingly, whether the ToString method of a color class or its Name property cannot return the corresponding HTML color string in all cases, I do not know if it is intentional: (. The Name property can basically implement this functionality, except in the case of the exception. This property returns the RGB group of the color, plus the alpha channel value, when the color cannot match a known color. To get the current HTML color, you must remove the alpha channel value (usually the initial hexadecimal FF string) and replace it with the # number. Fortunately, the System.Drawing.ColorTranslator class can do this automatically:.
adjourned
