|
|
|
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 :
78283 |
|
Adding to your Favorites....
|
|
|
 |
|
|
|
|
|
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. |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|