AspdotnetCodes.com
Search
Articles
Books
Resources
Asp.Net News
Downloads
Free Tech Magazines
Asp.Net Web Hosting
Archives
Softwares
Newsletter
Suggest Us
Link to Us
Feeds Subscription
Articles
Questions & Answers
Tips & Tricks
 Asp.Net Menu Control Binding with XMLDataSource
Posted by Moderator1 on 6/21/2007 12:07:55 PM Category: Asp.Net 2.0
Total Views : 154849
Add to my favorites
Email to friend
  
Introduction
This article explains the concept of building dynamic navigation control in web applications using Asp.Net Menu Control binding with XMLDataSource.
Description

Asp.Net Menu Control is a new and coolest navigation control. By using this we can build the navigation system of a website very dynamically. Even complex navigation can be made simple by using this Menu Control. This Menu Control can be completely collapsed or completely expanded down to any level. This Menu Control is an ideal control when you have lots of options for the user to choose. You can customize the look and feel of the menu control as you like by defining the properties of the control.

The Menu Control can bind with the datasource controls such as SiteMapDataSource and XMLDataSource. When your web application contains many complex dynamic links, you can manage a XML file to organize the links and bind the XML file to the Menu control with the help of XMLDataSource. This article demonstrates the way to bind the XMLDatasource control with a Menu Control. For example, we are going to create a Menu Control for a Book Store with various levels of related items.
XML File

Open a web application in Visual Studio 2005, add a XML file, named it as MenuList.xml. By default the xml file will be placed as App_Data folder in your solution. You have to define the navigation structure of the xml clearly so that it will be easier for you or the user to navigate. For testing this article you can copy the xml structure given below.

<?xml version="1.0" encoding="utf-8" ?>
<Home>
  <Menu text="Books" url="MenuFromXml.aspx">
    <SubMenu text="Asp.Net" url="MenuFromXml.aspx"></SubMenu>
    <SubMenu text="Ajax" url="MenuFromXml.aspx"></SubMenu>
    <SubMenu text="MS SQL Server 2005" url="MenuFromXml.aspx"></SubMenu>
    <SubMenu text="JavaScript" url="MenuFromXml.aspx"></SubMenu>
  </Menu>
  <Menu text="Electronics"  url="MenuFromXml.aspx">
    <SubMenu text="Camera" url="MenuFromXml.aspx">
      <SubMenu text="Digital" url="MenuFromXml.aspx">
        <SubMenu text="Canon" url="MenuFromXml.aspx"></SubMenu>
        <SubMenu text="Kodak" url="MenuFromXml.aspx"></SubMenu>
        <SubMenu text="Sony" url="MenuFromXml.aspx"></SubMenu>
        <SubMenu text="Casio" url="MenuFromXml.aspx"></SubMenu>
        <SubMenu text="Fuji" url="MenuFromXml.aspx"></SubMenu>
      </SubMenu>
      <SubMenu text="Film Camera" url="MenuFromXml.aspx"></SubMenu>
    </SubMenu>
    <SubMenu text="DVDs" url="MenuFromXml.aspx">
      <SubMenu text="Comedy" url="MenuFromXml.aspx">
        <SubMenu text="English" url="MenuFromXml.aspx"></SubMenu>
        <SubMenu text="French" url="MenuFromXml.aspx"></SubMenu>
        <SubMenu text="German" url="MenuFromXml.aspx"></SubMenu>
        <SubMenu text="Spanish" url="MenuFromXml.aspx"></SubMenu>
      </SubMenu>
      <SubMenu text="Kids Movies" url="MenuFromXml.aspx"></SubMenu>
      <SubMenu text="Romance Movies" url="MenuFromXml.aspx"></SubMenu>
      <SubMenu text="Action Movies" url="MenuFromXml.aspx"></SubMenu>
    </SubMenu>
  </Menu>
  <Menu text="Contact Us" url="MenuFromXml.aspx"></Menu>
</Home>

When you closely look at the xml structure above, the root element is 'Home', its child node is 'Menu' holds the attributes for Main Category and its child node is SubMenu, which contains the attibutes details for sub-categories. Each node contains value for attributes such as text and url. When you are creating your own xml file, atleast these two attributes are necessary, make sure that you have these attributes to bind with the Menu Control.

XMLDataSource

Drag and drop XMLDataSource Control to the page from the Toolbox's Data tab. Specify the DataFile property to the Xml file.

Asp.Net Menu Control

Drag and drop a Menu Control to your .aspx page from the Toolbox's Navigation tab. Specify the DataSourceID as XmlDataSource1. In the property tab of Menu Control, under Data, click on DataBindings. Here you can see all the available data bindings in your datasource (i.e. from your xml file). Click on Menu and add it down. Now set the TextField property as "text", ValueField property as "text" and NavigateUrlField as "url". Same way click on the SubMenu in available data bindings, and add it to the selected databindings section. Specify the TextField property as "text", ValueField property as "text" and NavigateUrlField as "url".
<asp:Menu ID="Menu1" runat="server" DataSourceID="XmlDataSource1" 
MaximumDynamicDisplayLevels="4" StaticDisplayLevels="1"
DynamicHorizontalOffset="1" DynamicVerticalOffset="1"> <StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" /> <DynamicHoverStyle BackColor="#990000" Font-Bold="False" ForeColor="White" /> <DynamicMenuStyle BackColor="#FFFBD6" /> <StaticSelectedStyle BackColor="#FFCC66" /> <DynamicSelectedStyle BackColor="#FFCC66" /> <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" /> <DataBindings> <asp:MenuItemBinding DataMember="Menu" TextField="text" ValueField="text"
NavigateUrlField="url" /> <asp:MenuItemBinding DataMember="SubMenu" NavigateUrlField="url" TextField="text" ValueField="text" /> </DataBindings> <StaticHoverStyle BackColor="#990000" Font-Bold="False" ForeColor="White" /> </asp:Menu> 
That's it. Save the changes and run the application. You can see the excellence of the Asp.Net Menu Control. Now you can make any attribute value changes in the xml file, which will immediately affect the Menu Control. In this way you can manage the complex navigation of your website in an easy way.

You can apply different styles to the Menu Control, by defining the properties such as StaticMenuItemStyle, DynamicMenuItemStyle, DynamicHoverStyle, StaticHoverStyle, etc., to your own desired layout. Come on, start to design your own menu now.


View our sample Menu Control.
Viewer's Comments
Posted by latha on 6/26/2007 5:31:29 AM
how to use xml data in asp.net with c#
 
Posted by Girish on 8/14/2007 12:24:59 AM
great help
 
Posted by Dinesh on 8/25/2007 8:44:26 AM
Nice , but no Idea about xml manipulation .
 
Posted by marcelo on 8/25/2007 12:47:16 PM
When I execute this teste, it is appearing only Home option in menu, and the others options are inside... What's happen?
 
Posted by Dinesh on 8/29/2007 4:11:28 AM
Root Tag is not suppose to display.It is usefull different file navigation but not enough for single file data retrieving....
 
Posted by Millstream on 9/17/2007 8:42:58 AM
How could I modify this code so that the root node "home" doesn't show?
 
Posted by Jose on 9/21/2007 3:41:49 PM
You can use XPath="/Home/Menu" to not sow the Home Item
 
Posted by Atul Chaudhari on 10/1/2007 2:11:21 AM
It is really a good article.
 
Posted by Lach on 12/18/2007 11:15:24 PM
This is how i implemented my menu a while back, now i want to add authorization for different users, i.e restrict some menu items to certain users, can i add another field to each page with an auth level and get the menu to restrict menu items depending on users level of auth ?
 
Posted by sds on 12/24/2007 6:29:28 AM
This example works fine. But it shows only Home as root menu and if we hover it shows others as submenus. I want to show the submenus mentioned here like Books, Electronics, DVDs etc., as main menu. If I do so it gives runtime error as cannot contain multiple root element. Please advise.
 
Posted by Shahid on 1/4/2008 1:20:31 AM
I'm also having the same problem i.e. The entire menu is represented by the Tag name instead of the "Text" attribute of Menu and Submenus. Anybody/Moderator can help in this regard??? Thanks in advance...
 
Posted by Shalini on 1/14/2008 12:01:55 AM
This example works fine & help me lot to create menu item as i m new in asp.net
 
Posted by Avinash Joshi on 1/22/2008 6:40:48 AM
Good Help Also Give it is with Coding like C#
 
Posted by abinash on 2/21/2008 9:02:00 AM
I want to have a Menu which will have nothing in UI when I open the Page it will dynamically creates the Menu and show in the Menubar in the application .can u provide me any source code . I will be thankful
 
Posted by Howzilla on 2/29/2008 1:55:21 PM
This does NOT work. 1) the menu items are stacked vertically. Every example I have found stacks vertically. NO ONE WANTS THAT. 2) The Sub-SubMenus DO NOT show. This is a flawed control from what I have seen.
 
Posted by ss on 3/7/2008 5:09:18 AM
poor
 
Posted by ss on 3/7/2008 5:10:54 AM
poor
 
Posted by tconn on 3/12/2008 11:59:04 AM
Why is it that when I try this all I see in my menu is the name of the XML node and not the attributes of the node which I've assigned to the TextField, ValueField, and NavigateUrlField? I also agree with the comment about the vertically stacking menu. That's not what I'm trying to get out of this. If there's some way to make the menu render horizontally, I'd appreciate the pointers.
 
Posted by scott on 3/20/2008 6:54:25 PM
Set Orientation on the menu control to Horizontal to make a Horizontal Menu
 
Posted by john on 3/24/2008 12:58:40 PM
RE: Rowzilla If you new how to use the control you wouldn't have said those things changing the orientation is simple, sub menus show just fine. Do it correctly and it works!
 
Posted by RascaL on 4/2/2008 3:48:24 AM
Hey guys Firstly, try this as mentioned throughly. It works fine and perfectly.
 
Posted by Mutt on 4/2/2008 2:39:30 PM
Like this. I'm using it to create a menu for my Admin pages (located in a sub-folder. What I can't work out is how to get the css class "Asp-NetMenu-Selected" which you get on the "current" page if you use a sitemap datasource.
 
Posted by sumesh on 5/5/2008 5:19:05 AM
how create xmldatasourse and how bind to menu
 
Posted by Lalitendu Dash on 5/9/2008 5:56:04 AM
It is supports custom label design. but to change the direction not support so. can you help us? no doubt it is a very valuable article which i include in my application to generate dynamic menu using dynamic XML data from the databse.
 
Posted by Sathish on 6/26/2008 6:19:00 AM
how can i display in Horizontal?
 
Posted by abdulquddusa on 7/1/2008 7:55:50 AM
This is working but before a submenu item i want to display an image also how this can be achieved
 
Posted by abdulquddusa on 7/1/2008 7:59:25 AM
To make display all other items select the properties and in it set the StaticDisplayLevels to 2
 
Posted by marcusdev on 7/24/2008 7:08:41 PM
solved my problem, always make sure a submenu/menu, has a blank url attribute, if it doesn't need to navigate anywhere
 
Posted by rajendra on 8/9/2008 2:16:09 AM
your .aspx page like <asp:XmlDataSource ID="XmlDataSource1" DataFile="/Menu_test.xml" runat="server" ></asp:XmlDataSource> <table> <tr> <td> <asp:Menu ID="Menu1" runat="server" DataSourceID="XmlDataSource1" MaximumDynamicDisplayLevels="4" StaticDisplayLevels="1" DynamicHorizontalOffset="1" DynamicVerticalOffset="1"> <StaticMenuItemStyle HorizontalPadding=&quo
 
Posted by fara on 8/19/2008 10:47:18 AM
was searching for this for dayz... thank u ... i was trying to make two different menus for two different kinds of admins... sitemap only makes one and cant be broken down into two... thank u
 
Posted by rampal singh on 9/2/2008 11:29:52 PM
rampal singh
 
Posted by romerio on 9/7/2008 1:12:42 PM
Great article. Thanks.
 
Posted by tsega on 10/2/2008 10:14:06 AM
its good but how can I modifiy this code the xml file like removing Home..
 
Posted by Rixter on 10/20/2008 11:07:59 AM
Excellent, works like a charm@
 
Posted by Mikol on 10/22/2008 2:39:11 PM
Hello... Some guys here are asking how to remove the "Home" item from the menu... Well here it is: Set the property XPath of the XmlDataSource object like this... XmlDataSource1.XPath = "/Home/Menu"; you can do it by code or in the designer, it doesn't matter! Hope it helps you guys!
 
Posted by kumaresh on 10/31/2008 7:28:28 AM
I have problem for distance between populate image and item text . Anyone help me?
 
Posted by vidya on 11/6/2008 3:27:22 AM
good stuff.
 
Posted by Patrick de Ruijter on 11/14/2008 6:54:53 AM
Great article, this is the first example i found that actually works.
 
Posted by mti on 11/26/2008 3:30:45 PM
I'm having trouble creating 2 different xml menus on the same page. The first is fine as illustrated here. The second should only show the second level of the xml nodes. I specify the xpath for this but the issue is that I want to only show the second level nodes under the currently selected page, not all second level nodes which is what I'm getting. Any thoughts?
 
Posted by saras on 12/8/2008 7:36:58 AM
How to asp.net menu control bind with xmldatasource by suing with vb.net code?
 
Posted by Muditha Madusanka Ediriweera on 1/13/2009 12:50:10 AM
To get a link for home page Change the xml file Home tag <Home text="Home" url="index.aspx?id=1" > And add a new line to master page as <asp:MenuItemBinding DataMember="Home" TextField="text" ValueField="text" NavigateUrlField="url" /> To show sub menus (Which are in the Menu tab) change the StaticDisplayLevels to 2 To get the menu Horizontally add Orientation="Horizontal" to <asp:Menu ... > tab
 
Posted by Suzette on 1/18/2009 2:09:43 PM
hi all. Is there life before death? I am from Japan and know bad English, give true I wrote the following sentence: "Be asked to write a short supplemental essay describing specific ksas that match those desired for the." Thanks 8-). Suzette.
 
Posted by RnH5 on 2/19/2009 9:39:27 PM
Great article, it helped me a lot. I have a question. Is it possible to add pictures to the options of the menu? and how you'd do it tnx again
 
Posted by rob on 3/4/2009 11:43:18 PM
I dont understand, what are the names of the files? how do I put the menu onto my site?
 
Posted by Mona on 3/10/2009 6:57:05 AM
my mouse hover is only showing white text area with no content.help me solve this prob
 
Posted by amol on 3/17/2009 11:16:04 AM
veryyyyyyyyyy bad code
 
Posted by samiran on 3/21/2009 6:29:56 AM
this works fine but cannot navigate to the particular file i have concatinated the filename in url.. :( helpppppp
 
Posted by Dilip on 4/2/2009 6:58:10 AM
This article is helpful for me to learn the basic idea about menu control Thanks.
 
Posted by cgcarter1 on 4/22/2009 9:37:53 AM
Maybe a little research will help... If you google "ASP MENU CONTROL" you'll hit the msdn site and it will tell you how to change it from horizontal to verticle (vice versa). With the "Orientation" parameter of the menu control... Thus, Make~ <asp:Menu ID="Menu1" runat="server" DataSourceID="XmlDataSource1" MaximumDynamicDisplayLevels="4" StaticDisplayLevels="1" DynamicHorizontalOffset="1" DynamicVerticalOffset
 
Posted by Madhan on 4/22/2009 11:11:52 AM
Very useful site.
 
Posted by Marc on 4/29/2009 12:54:04 PM
Very helpful thanks.
 
Posted by vijay on 6/24/2009 10:08:44 AM
thank you
 
Posted by aragorn on 6/24/2009 11:33:32 PM
excellent,thnks.
 
Posted by ddl on 7/15/2009 10:26:48 PM
Very Useful,thnks
 
Posted by srinivasm on 7/18/2009 4:58:32 AM
how to retrieve particular record from xml file like sql query(select * from emp where empno=10)
 
Posted by Prashant Jangir on 8/21/2009 9:59:15 AM
Dear Sir I want need menu control using C# in asp.net Prashant Jangir
 
Posted by kaushik on 9/20/2009 5:35:16 AM
useless info
 
Posted by krishna on 9/22/2009 12:15:35 PM
For me the submenu is not displaying. I am using IE for this. Pls help
 
Posted by Sathya on 9/25/2009 7:11:29 PM
Hey thanks for the code. It took a little looking especially the XPath trick to get rid of the 'Home' topmenu, but this is very helpful!
 
Posted by Clovis on 11/13/2009 8:53:45 AM
The best simple example I have found so far... Great help.
 
Posted by Frank Sheldon on 12/9/2009 12:25:37 PM
People using IE 8 and getting a white expansion of the menu (i.e. no flyout of the menu structure) please see a workaround on: http://blogs.msdn.com/giorgio/archive/2009/02/01/asp-net-menu-and-ie8-rendering-white-issue.aspx. I had this issue and this works.
 
Posted by test on 12/29/2009 2:05:12 AM
good
 
Posted by Robert Hayes on 2/19/2010 11:43:18 AM
Great read. Really However I want to change the default for the menu from align Right to drop down. so instead of the sub menu expanding to the right I want it to drop down. can this be done? Or will the IDE stop me? Thanks Rob
 
Posted by Edgardo on 3/9/2010 9:29:28 AM
Good article. Thanks to Frank Sheldon for IE8 url solution.
 
Posted by raja on 4/29/2010 4:42:56 AM
you can provide source code
 
Posted by Jane H on 5/26/2010 11:29:19 PM
The menu I created only show Home, Menu and Submenu, I need to do extra step to able to view the text defined in xml file. > Click on Edit MenuItem Databindings > Select Menu and Click Add > Go to TextField > select text from the dropdown do the same steps for submenu, then you will be able to view the text
 
Posted by ABHISHEK on 6/30/2010 2:02:45 AM
nice every i have learnt and now i can make my own application on menu thanks a lot ............................
 
Posted by ABHISHEK on 6/30/2010 2:04:58 AM
sir i woul like to know about cofiguration of web.config file and machine.config file please help me dear as last time you help me??????????????????????
 
Posted by rahul on 12/1/2010 5:23:00 AM
how to create a menu in asp.net
 
Posted by aman on 12/9/2010 11:48:48 AM
article contains basic content and is good. But the forum participators' disussion helped alot!
 
Posted by Jose Camaron on 3/2/2011 1:49:16 PM
The name of your site, "Aspdotnet codeS", with an "S" at the end, shows that English is not your primary language. In English, we say "code", a collective noun. Just as we refer to "water" not "waterS".
 
Posted by sxm on 5/3/2011 4:30:48 PM
Great article, thanks for posting it. And Jose, nobody cares about what you think, so shut the hell up.
 
Posted by Deepthi on 7/12/2011 4:24:06 AM
Thank you.. Its a good Article..
 
Posted by tarun on 9/28/2011 2:11:48 AM
Hi,This example not working,pls.check again, Thanks
 
Posted by niko on 1/12/2012 2:20:19 PM
its good i know a new thing about dynamic menu thankx
 
Posted by Rugved on 3/2/2012 10:57:53 AM
Thank you very much for sharing this. However, I still can't adjust the orientation of the menu to horizontal. Could you please help me how to achieve this as well? Thank you in advance.
 
Posted by deepthi on 7/4/2012 8:02:43 AM
nice article
 
Posted by vijay on 11/5/2012 4:52:53 AM
how to use this menu item into the code using c#
 
Posted by Nicky on 2/26/2013 2:06:23 AM
How to xml menu bind with sql server database in asp.net c#
 
Posted by kljkhl on 2/4/2014 6:47:49 AM
m.nj,k
 
 Rating & Comments
A word 'Excellent' means lot to the author of this article. You can give comments about this article but not the author.
Rate this Article:
Name:
Email Id:  
We never display your email id anywhere.
Comment/Question: Max. 500 letters
Fifteen plus fifty Equals To
 
Sponsored by
Programmers Heaven C# School Book - Free 338 Page eBook
SearchSAP
No Nonsense XML Web Development With PHP - Free 146 Page Preview!