Subscribe
Please visit my new Web Site https://coderstechzone.com
Now developers uses Asp.Net Menu Control as a navigation control. Using this control one can build the navigation system of a website very dynamically. Simply by using this menu control you can create Even complex navigation. It gives us a lot of inbuilt feature like collapse completely or expanded completely. 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 asp.net 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 Asp.net code example add an aspx page into your project and follow the below steps:
1. Add an XML file into project and give the name "MenuXMLFile.xml". Copy and paste the below code into the XML file:
<?xml version="1.0" encoding="utf-8" ?>
<Articles>
<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>
<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>
<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>
<SubMenu text="Complex" url="Complex.aspx"></SubMenu>
</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>
</SubMenu>
</Menu>
<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>
<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>
</Menu>
</Articles>
2. Place a 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 few minutes ago. 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:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Menu_XML.aspx.cs" Inherits="Menu_XML" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>An introduction on How to use Asp.net Menu Control</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label runat="server" ID="lbl" Font-Bold="true" Font-Underline="true">How to use Asp.net Menu Control</asp:Label>
<br />
<br />
<asp:Menu ID="Menu1" runat="server" DataSourceID="XmlDataSource1" MaximumDynamicDisplayLevels="4">
<DataBindings>
<asp:MenuItemBinding DataMember="Menu" TextField="text" ValueField="text" NavigateUrlField="url" />
<asp:MenuItemBinding DataMember="SubMenu" NavigateUrlField="url" TextField="text" ValueField="text" />
</DataBindings>
</asp:Menu>
<asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/MenuXMLFile.xml"></asp:XmlDataSource>
</div>
</form>
</body>
</html>
Now run the project, hope you will get below output:
4 comments:
Hi Shawpnendu.
Im Yuniar from Indonesia.
I want to ask, how to set a menu for different users.
So if user login as admin, all menu will show up, but if others, only certain menu that show up.
How to create menu like that
thanks
Thank you very.
You save me some minutes of work today.
how to make visible false to some menu... or How add multiple conditions to Show all menu to some selected users
Thanks for the post. But i noticed that, the whole menu item is not click-able but only the text in the menu item is. Is there a way to make the whole menu item click-able?
I WOULD BE DELIGHTED TO HEAR FROM YOU