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.
- Issue1
- 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>
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 !!!
If you like this article, subscribe to our
RSS Feed. You can also
subscribe via email to our Interview Questions, Codes and Forums section.