Dynamic Menu using XML DataSource ASP.NET ,VB.NET

Building Dynamic Menus from XMLDataSource

The ASP.NET Menu Control can have the datasource controls such as SiteMapDataSource and XMLDataSource.

Managing dynamic links,queries and controls are quite tedious  in web applications . This article expalins the way to bind the XMLDatasource control with a Menu Control.

Here I am going to describe a menu about the process in a Recruitment company  like above picture. There are two Issues in the home page.

1. Issue1
2. Issue2

Lets create this menu in few steps.

1. In web application  add a XML file named menu.xml. The Xml Code as follow as

<?xml version="1.0" encoding="utf-8" ?>
<HomePage>
  <Menu text="Issue1" url="Issue1.aspx">
    <SubMenu text="Concept1" url="Concept1.aspx"></SubMenu>
    <SubMenu text="Concept2" url="Concept2.aspx"></SubMenu>
    <SubMenu text="Concept3" url="Concept3.aspx"></SubMenu>
  </Menu>
  <Menu text="Issue2" url="Issue2.aspx">
    <SubMenu text="Problem1" url="Problem1.aspx"></SubMenu>
    <SubMenu text="Problem2" url="Problem2.aspx"></SubMenu>
    <SubMenu text="Problem3" url="Problem3.aspx"></SubMenu>
  </Menu>
</HomePage>

2. Add the XMLDataSource Control to the page from the Data tab of the Toolbox.

3. Link the DataSourceID as XmlDataSource1 for the Menu control and the menu.xml as DataFile of XmlDataSource control and bind the menu control. 

The code for menu control is

<asp:Menu ID="dymenu1" runat="server" DataSourceID="xmlsource1" Orientation="Horizontal">
<DynamicMenuStyle BackColor="#228B22" />
<StaticSelectedStyle BackColor="#FFBB77" />
<DynamicSelectedStyle BackColor="#FFAA99" />
<DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<StaticHoverStyle BackColor="#abcdaa" Font-Bold="False" ForeColor="White" />
</asp:Menu> 

The code for XmlDataSource is

<asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/menu.xml"></asp:XmlDataSource>

Cheers !!!

RSS Feed