In this article I will explain with example, how to use XmlDataSource control to populate ASP.Net Menu control from XML file using C# and VB.Net.
This article also explains to highlight selected menu item of current page in ASP.Net Menu control.
The XML File
You will need to add a new XML file using Add New Item Dialog of Visual Studio as shown below.
![ASP.Net Menu XmlDataSource Example: Populate ASP.Net Menu control from XML file using C# and VB.Net]()
Once the file is added you need to structure it based on the Level 1 Pages and the Child Pages.
Note: You can have as many child levels as you want, here I am using 2 Level Menu structure
Below are the contents of the XML file.
<?xml version="1.0" encoding="utf-8" ?>
<Menus>
<Menu Url="~/Home.aspx" Text="Home" Value="Home Page" />
<Menu Url="javascript:;" Text="Services" Value="Services Page">
<SubMenu Url ="~/Consulting.aspx" Text="Consulting" Value="Consulting Page"></SubMenu>
<SubMenu Url ="~/Outsourcing.aspx" Text="Outsourcing" Value="Outsourcing Page"></SubMenu>
</Menu>
<Menu Url="~/About.aspx" Text="About" Value="About Us Page" />
<Menu Url="~/Contact.aspx" Text="Contact" Value="Contact Us Page" />
</Menus>
Home => Home.aspx
Services
Consulting => Consulting.aspx
Outsourcing => Outsourcing.aspx
About => About.aspx
Contact => Contact.aspx
HTML Markup
Below is the HTML Markup of the Master Page Main.Master that contains the Menu control as well as the XmlDataSource control.
The ASP.Net Menu control is specified with OnMenuItemDataBound event handler for highlighting the selected Menu item.
The XPath property of the XmlDataSource control is set to select the Menu nodes at the root level from the Xml file.
<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" DataSourceID="XmlDataSource1"
OnMenuItemDataBound="OnMenuItemDataBound">
<LevelMenuItemStyles>
<asp:MenuItemStyle CssClass="main_menu" />
<asp:MenuItemStyle CssClass="level_menu" />
</LevelMenuItemStyles>
<StaticSelectedStyle CssClass="selected" />
<DataBindings>
<asp:MenuItemBinding DataMember="Menu" TextField="Text" ValueField="Value"
NavigateUrlField="Url" />
<asp:MenuItemBinding DataMember="SubMenu" TextField="Text" ValueField="Value"
NavigateUrlField="Url" />
</DataBindings>
</asp:Menu>
<asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/Menus.xml" XPath="/Menus/Menu">
</asp:XmlDataSource>
Styling the ASP.Net Menu Control
The following CSS style is placed in the Head section of the Master Page. You can also make use of an external CSS class file.
In the HTML Markup, the LevelMenuItemStyles property consists of two MenuItemStyle nodes. The first one is for the CSS Class of the top level or main menu and the second one is for the child or sub menu.
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
color: #444;
}
.main_menu, .main_menu:hover
{
width: 100px;
background-color: #fff;
color: #333;
text-align: center;
height: 30px;
line-height: 30px;
margin-right: 5px;
display: inline-block;
}
.main_menu:hover
{
background-color: #ccc;
}
.level_menu, .level_menu:hover
{
width: 110px;
background-color: #fff;
color: #333;
text-align: center;
height: 30px;
line-height: 30px;
margin-top: 5px;
}
.level_menu:hover
{
background-color: #ccc;
}
.selected, .selected:hover
{
background-color: #A6A6A6 !important;
color: #fff;
}
.level2
{
background-color: #fff;
}
</style>
Highlight Selected Menu Item of Current Page in ASP.Net Menu Control
The following event handler is triggered for each Menu item and the Text of each Menu Item is matched with the current page and if a match is found then the Menu item is set as Selected.
Note: When a Child or Submenu is selected then I am selecting its corresponding Parent Menu.
C#
protected void OnMenuItemDataBound(object sender, MenuEventArgs e)
{
string currentPage = Request.Url.Segments[Request.Url.Segments.Length - 1].Split('.')[0];
if (e.Item.Text.Equals(currentPage, StringComparison.InvariantCultureIgnoreCase))
{
if (e.Item.Parent != null)
{
e.Item.Parent.Selected = true;
}
else
{
e.Item.Selected = true;
}
}
}
VB.Net
Protected Sub OnMenuItemDataBound(sender As Object, e As MenuEventArgs)
Dim currentPage As String = Request.Url.Segments(Request.Url.Segments.Length - 1).Split(".")(0)
If e.Item.Text.Equals(currentPage, StringComparison.InvariantCultureIgnoreCase) Then
If e.Item.Parent IsNot Nothing Then
e.Item.Parent.Selected = True
Else
e.Item.Selected = True
End If
End If
End Sub
Screenshot
![ASP.Net Menu XmlDataSource Example: Populate ASP.Net Menu control from XML file using C# and VB.Net]()
Demo
Downloads
