ASP.NET Menu Control - .NET 4 Improvements

Menus are mostly mandatory in the web applications to allow the user to select their choices. There were so many menu controls available in this web world. Javascript Menus, Asp.Net In Built menu, Customized Menu & etc are available. Each one has some drawbacks in it. For example in Javascript menu it will be difficult to load the menus from the database. Because mostly menu items are stored in the table to maintain the parent child hierarchy and to apply the roles based menus.

In ASP.NET menu control, it will be difficult to apply the styles, since the control will be rendered as HTML tables. There were other issues like losing the focus in asp.net menus.
What enhancement are done in ASP.NET 4.0 Menu Control?

In single word we can say it as a Table Less Menu Control. In .NET 4, menu control can be rendered as Unordered List and List Items instead of HTML table. So what is the advantage of rendering the menu control into unordered list and list items?

• Applying CSS styles will be pretty much easier
• Number of lines will get reduced, surely that will decrease the page content and its size
• Rendering will be very much faster when compared with HTML tables
• Menu controls render markup will be semantically correct and compliant with accessibility guidelines

Example:

1. Just drag and drop the menu control from the tool box, it will be generated like this in the aspx page.

<asp:Menu ID="Menu1" runat="server" RenderingMode="List">
<Items> <asp:MenuItem Text="Home" Value="Home" />
<asp:MenuItem Text="About" Value="About" />
</Items>
</asp:Menu>

2. When you execute the page by hitting F5, this control will be rendered as below. Like Unordered list and the list items.

<div id="Menu1">
<ul>
<li><a href="#" onclick="...">Home</a></li>
<li><a href="#" onclick="...">About</a></li>
</ul>
</div>

There will be a property called RenderingMode, it can be set to either a Table or List, that will make the control to render it as HTML table or UnOrderedList.