Other Interesting Menu Control Features
You've seen the basics of creating static and dynamic menus, but to use them efficiently and effectively, you need to explore a couple more properties, see how to populate menus by binding them to data, and see how to cache your menus in Web User Controls.
The code you've seen so far displays menu controls vertically; but by changing the Orientation
property value to Horizontal,
you can display a menu horizontally as shown in Figure 6
|Figure 6. Horizontal Menu Control: The figure shows how the dynamic menu control example in Listing 2 looks when displayed with the Orientation property set to Horizontal.|
You can change the orientation either at design time or dynamically at run time using the code below.
The DisappearAfter Property
myMenu.Orientation = Orientation.Horizontal;
is an interesting property that controls the amount of time it takes for the dynamically appearing portion of a menu to disappear after the user's moves the mouse out of that portion of the menu. The property takes an integer representing the number of milliseconds that the dynamic portion of the control should remain visible after a user moves the cursor out of the dynamic menu area. You can set DisappearAfter
dynamically as show below.
myMenu.DisappearAfter = 2000;
and Listing 2
set the DisappearAfter
property value to 2000
, or two seconds. The default value is 500
, or one-half second. If you set the value of DisappearAfter
, moving the cursor outside of the Menu control causes it to disappear immediately. Setting the value to -1
essentially causes the pause time to be infinite; the dynamic portion will vanish only when a users clicks somewhere outside of the dynamic portion.
Binding a Menu Control to Data
You can use either of two methods to bind the Menu control to an appropriate data source type. You can bind the Menu control to any data source control, such as a SqlDataSource control, an XmlDataSource control, or a SiteMapDataSource control. To bind to a data source control, set the DataSourceID
property of the Menu control to the ID value of the data source control. The Menu control automatically binds to the specified data source control. This is the preferred method to bind to data. However, you can also bind the Menu control to an XmlDocument object or a DataSet containing table relations. To bind to one of these data sources, set the DataSource
property of the Menu control to the data source and then call the DataBind
Caching a Menu in a Web User Control
While the Menu control works well and is quite flexible, it's not at all efficient out-of-the-box. If you explore how it works, you'll find that whenever a client requests a page containing a Menu control, the control converts all the menu item information into meaningful data and sends that to the client for each requesteven though the menu may not ever change. For large menus, that processing requires significant server resources for every request. Because most menus remain constant for a Web site, you can avoid the overhead of processing the menu for every request by creating a Web User Control (.ascx
) page containing the menu. Doing that lets you cache the .ascx
Web User Control file and still use it in your .aspx
pages. Caching the page causes ASP.NET to process the menu only the first time it's requested, or when the cache expires; subsequent requests return the cached content, so your Web application will scale better. Listing 3
shows a Web user control (.ascx
) file that caches a Menu control.
The menu defined in Listing 3
is similar to the menu in Listing 2
; however note that this version uses places the menu in a Web User Control rather than directly on an .aspx
page, and that the page contains an OutPutCache
directive for better scalability. This version caches the menu (Duration="10"
) for ten seconds (it will recreate the cached version every ten seconds). If your application needs to change the menu based on user level or some other condition, you can take advantage of the VaryByParam
property, which can maintain several versions of a page based on the value of a parameter sent in the request URLfor example, UserLevel=1.
The code below shows how to use the Web User Control in Listing 3
file) in an .aspx
<%@ Page Language="C#" %>
<%@ Register TagPrefix="uc1" TagName="MenuControl"
<form id="form1" runat="server">