Menu Control of ASP. NET Control

 

Using the ASP. NET menu control, you can develop static and dynamic display menus for ASP. NET web pages.

The Menu Control has two display modes: static mode and dynamic mode. Static display means that the menu control is always fully expanded. The entire structure is visible. You can click any part. In the dynamically displayed menu, only the specified part is static, and its sub-menu items are displayed only when you place the mouse pointer on the parent node.

You can configure its content directly in the menu control, or specify its content by binding the control to the data source. No need to writeCodeTo control the appearance, direction, and content of the ASP. NET Menu Control. In addition to the visual attributes exposed by the control, the control also supports the appearance and topic of the ASP. NET control.

Static display behavior

Use the staticdisplaylevels attribute of the menu control to control static display behaviors. The staticdisplaylevels attribute indicates the number of layers of the statically displayed menu from the root menu. For example, if staticdisplaylevels is set to 3, the menu will expand the first three layers in static display mode. The minimum number of static display layers is 1. If you set this value to 0 or a negative number, this control will cause an exception.

Dynamic Display Behavior

The maximumdynamicdisplaylevels attribute specifies the number of layers of dynamic display menu nodes that should be displayed after the static display layer. For example, if a menu has three static layers and two dynamic layers, the first three layers of the menu are displayed statically, and the last two layers are displayed dynamically.

If you set maximumdynamicdisplaylevels to 0, no menu node is displayed dynamically. If you set maximumdynamicdisplaylevels to a negative number, an exception is thrown.

Define menu content

You can define the content of the menu control in two ways: add a single menuitem object (in declaration or programming mode); bind the control to the XML data source using data binding method.

Manually add menu items

You can add a single menu item to the control by specifying a menu item in the items attribute. The items attribute is a collection of menuitem objects. The following example demonstrates the declarative flag of the menu control. The control has three menu items, each of which has two sub-items:

    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>
 

Bind the control to the XML data source using the data binding method.

By binding the control to an XML file, you can edit the file to control the menu content without using the designer. In this way, you can update the navigation content of the site without re-accessing the menu control or editing any code. If the site content changes, you can use an XML file to organize the content, and then provide the menu control to ensure that the website users can access the content.

Appearance and Behavior

You can adjust the behavior of the menu control through its properties. In addition, you can also control the dynamic display behavior, including the duration of the menu node's continuous display. For example, to change the direction of the menu from horizontal to vertical, you can set the orientation attribute as follows:

[C #]

Menu. Orientation = orientation. vertical;

Set this attribute to orientation. Horizontal to restore the menu direction to a level.

You can set the properties of the menu control one by one to specify the appearance size, color, Font, and other features. In addition, you can apply the appearance and topic to the menu control.

Style

Each menu layer supports style attributes. If no dynamic style attribute is set, the static style attribute is used. If dynamic style attributes are set but static style attributes are not set, the default static style attributes are used for rendering. The hierarchical structure of the menu control style is as follows:

1. Widget

2. Submenustyles

3. Menuitemstyles

4. Selecteditemstyles

5. Hovermenuitemstyles

Use the following logic to merge these styles across Dynamic and Static menus:

• Various styles are applied to appropriate operations or item types respectively.

• All styles are merged into the styles that are superior to those in the hierarchy, and the last style is overwritten.

Static menus are never merged. If no static style is defined, dynamic styles are applied.

Dynamic appearance timing

When designing a dynamic menu, you must pay attention to the length of time required for the dynamic display part of the menu from display to disappearance. Adjust the disappearafter attribute in the following way. You can set this value in milliseconds:

[C #]

Menu. disappearafter = 1000;

The default value is 500 milliseconds. If you set the value of disappearafter to 0, pausing the menu control will immediately disappear. Setting this value to-1 indicates that the pause duration is infinite. Only clicking outside the menu control will make the dynamic part disappear.

 

Use the menu control with the updatepanel Control

The updatepanel control is used to update the selected area of the page by sending an update request, instead of updating the entire page. The menu control can be used in the updatepanel control. The restriction is that the style must be applied by referencing the Cascading Style Sheet (CSS) class. For example, you can use Attribute-cssclass to set a style, instead of using attribute-Sub-attribute (Property Attribute) set the dynamichoverstyle attribute (property ). Similarly, when using the dynamichoverstyle template to set a style, use the cssclass attribute of the template ).

The following lists the classes related to the menu control.

Menu

The main class of the control.

Menueventargs

Provides data for the menuitemclick and menuitemdatabound events of the menu control.

Menueventhander

The method used to process the menuitemclick event or menuitemdatabound event of the menu control.

Menuitem

Indicates a menu item displayed in the menu control.

Menuitembinding

Defines the relationship between a data item and the menu item bound to the data item in the menu control.

Menuitembindingcollection

Indicates the set of menuitembinding objects.

Menuitemcollection

Indicates the set of menu items in the menu control.

Menuitemstyle

The style of the menu item in the menu control.

Menuitemstylecollection

The set of menuitemstyle objects in the menu control.