How to Bind Asp.Net Menu Control with XML file in C# VB.Net

Now a days developers uses Asp.Net Menu Control as a navigational control. Using this control one can buil the navigation system of a website very dynamically. Simply by using this menu control you can create even complex navigation system. It gives us a lot of inbuilt feature like collapse completely or expanded completely etc. You can also make a navigation down to any level. This Menu Control is very useful when you need to develop dynamic menus. One can also customize the look and feel by defining the properties of the control as well as by CSS.

You can bind the menu control with datasources like SiteMapDataSource and XMLDataSource. Here in this C# VB.Net article or tutorial I will explain how to bind menu control with a xml file. Its a very useful feature specially for complex dynamic links because you can manage a XML file to organize links easily by the help of XMLDataSource.

To start this code example please follow the below steps:
1. Add an XML file named it “MenuXMLFile.xml”. Copy and paste the below code into the XML file:

<?xml version="1.0" encoding="utf-8" ?>
  <Menu text="Asp.Net" url="asparticles.aspx">
    <SubMenu text="GridView" url="GridView.aspx">
      <SubMenu text="GridView Article 1" url="Gv1.aspx"></SubMenu>
      <SubMenu text="GridView Article 2" url="Gv2.aspx"></SubMenu>
      <SubMenu text="GridView Article 3" url="Gv3.aspx"></SubMenu>
      <SubMenu text="GridView Article 4" url="Gv4.aspx"></SubMenu>
      <SubMenu text="GridView Article 5" url="Gv5.aspx"></SubMenu>
    <SubMenu text="Ajax" url="Ajax.aspx">
      <SubMenu text="Ajax Article 1" url="Ajax1.aspx"></SubMenu>
      <SubMenu text="Ajax Article 2" url="Ajax2.aspx"></SubMenu>
    <SubMenu text="TreeView" url="GridView.aspx">
      <SubMenu text="Getting Started" url="Started.aspx">
        <SubMenu text="TreeView Article 1" url="TV1.aspx"></SubMenu>
        <SubMenu text="TreeView Article 2" url="TV2.aspx"></SubMenu>
        <SubMenu text="TreeView Article 3" url="TV3.aspx"></SubMenu>
        <SubMenu text="TreeView Article 4" url="TV4.aspx"></SubMenu>
        <SubMenu text="TreeView Article 5" url="TV5.aspx"></SubMenu>
      <SubMenu text="Complex" url="Complex.aspx"></SubMenu>
    <SubMenu text="Menu Control" url="GridView.aspx">
      <SubMenu text="Menu 1" url="M1.aspx"></SubMenu>
      <SubMenu text="Menu 2" url="M2.aspx"></SubMenu>
      <SubMenu text="Menu 3" url="M3.aspx"></SubMenu>
      <SubMenu text="Menu 4" url="M4.aspx"></SubMenu>
      <SubMenu text="Menu 5" url="M5.aspx"></SubMenu>
  <Menu text="Javascript" url="Javascript.aspx">
    <SubMenu text="Javascript Article 1" url="java1.aspx"></SubMenu>
    <SubMenu text="Javascript Article 2" url="java2.aspx"></SubMenu>
  <Menu text="Sql Server" url="sqlserver.aspx">
    <SubMenu text="Sql Server Article 1" url="SQ1.aspx"></SubMenu>
    <SubMenu text="Sql Server Article 2" url="SQ2.aspx"></SubMenu>

2. Place an XMLDataSource on to the page from toolbox.
3. From XMLDataSource smart menu click on Configure Datasource.
4. From here click on browse button & select the XML file that you have created earlier. Sample screenshot is given below:
5. Now add a Menu Control into the page.
6. Right click on menu control & go to the properties.
7. From properties set the DataSourceID to the XMLDataSource like below:
8. Again from properties menu click on DataBindings collection & set the navigateurlfield as well as textfield for both Menu & Submenu like below:

Now your HTML markup code should be:

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <asp:XmlDataSource ID="XmlDataSource1" runat="server" 
    <asp:Menu ID="Menu1" runat="server" DataSourceID="XmlDataSource1" MaximumDynamicDisplayLevels="4">
            <asp:MenuItemBinding DataMember="Menu" NavigateUrlField="url" 
                TextField="text" />
            <asp:MenuItemBinding DataMember="SubMenu" NavigateUrlField="url" 
                TextField="text" />

Note: Adjust MaximumDynamicDisplayLevels properties as per your XML propagation level.

Now run the project, hope you will get below output:

Download Code Example C#        Download Code Example VB.Net

Leave a Reply

Your email address will not be published. Required fields are marked *

AlphaOmega Captcha Classica  –  Enter Security Code