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

Posted by in ASP.NET category on for Intermediate level | Views : 69308 red flag

I am going to explain how to build dynamic menus using XMLDataSource 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" ?>
<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 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>

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" />

The code for XmlDataSource is

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

4. Add the different styles to the Menu Control and specify  the properties such as StaticMenuItemStyle, DynamicMenuItemStyle.

5. Just run your application and you should see the menu something like picture above. Finally you have created the Dynamic Menu from XMLDataSource.

Cheers !!!

Page copy protected against web site content infringement by Copyscape

About the Author

Full Name: Majith Basha
Member Level:
Member Status: Member
Member Since: 7/18/2008 11:49:59 PM

Login to vote for this post.

Comments or Responses

Posted by: Ervishalm on: 4/6/2015 | Points: 25
how to create multiple home(main menu) like home about contact???

Login to post response

Comment using Facebook(Author doesn't get notification)