Browse DevX
Sign up for e-mail newsletters from DevX


A La Carte: Make Highly Customized Menus with Ease in ASP.NET 2.0 : Page 4

In ASP.NET 2.0, Microsoft has added a full-featured Menu control that you can use to display menus statically or dynamically, vertically or horizontally, containing either text or images. Finally, you can stop maintaining your JavaScript-based menus by hand.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

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.

Changing Orientation
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.

myMenu.Orientation = Orientation.Horizontal;

The DisappearAfter Property
DisappearAfter 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;

Listing 1 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 to 0, 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 method.

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 request—even 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 URL—for example, UserLevel=1. The code below shows how to use the Web User Control in Listing 3 (the MenuControl.ascx file) in an .aspx page.

<%@ Page Language="C#" %> <%@ Register TagPrefix="uc1" TagName="MenuControl" Src="MenuControl.ascx" %> <head runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <div> &nbsp;<uc1:MenuControl ID="MenuControl1" Runat="server" /> </div> </form> </body> </html>

All in all, I highly recommend using the new Menu control in your applications over third party or custom menu-generating JavaScript. You should regard this article as an introduction to the Menu control rather than as a complete exploration, and start exploring its internals on your own. Remember to place your menus in user controls and enable caching. If you do that, I'm confidant you'll find the Menu control useful in your Web applications.

Sreedhar Koganti has several years' experience in developing, architecting, and implementing applications using Microsoft technologies, with expertise in leading and managing development teams. He also teaches Microsoft technologies and maintains a free .NET educational site ( http://www.w3coder.com ). As an author he contributed to the ASP.NET Developers' Cook Book (http://www.aspalliance.com/cookbook) and writes articles on architecting applications using .NET for magazines and Web sites. In his spare time he moderates and answers forum questions at http://www.asp.net/forums. You can reach him through his blog at http://weblogs.asp.net/skoganti.
Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date