XML Pitstop : My favorite links on XMLPitstop.com

[ASP.NET 2.0] Building a Menu with the Menu and XmlDataSource control.

This example will show you how you can easily create an menu with the Menu control. The menu data will be simply stored in a XML file. We are simply using a XmlDataSource control which will load the XML automatically via the DataFile property. The first thing you need to do is to drag/drop one menu control into the designer and one XmlDataSouce control. Define a XML file which looks like the below one:

<?xml version="1.0" encoding="utf-8" ?>
<menuitems>
<userprofile>
 <menuitem title="Home" path="~/default.aspx" />
 <menuitem title="Blog" path="~/blog/default.aspx" />
 <menuitem title="Articles" path="~/articles.aspx" />
 <menuitem title="Contact" path="~/contact.aspx" />
</userprofile>
<adminprofile>
 <menuitem title="Edit Article" path="~/admin/editarticle.aspx" />
 <menuitem title="Edit User" path="~/admin/edituser.aspx" />
 <menuitem title="Stats" path="~/admin/stats.aspx" />
</adminprofile>
</menuitems>

Now go back to the designer of your aspx page and define your Menu control and XmlDataSource controls like this:

<asp:Menu ID="Menu1" runat="server" BackColor="#B5C7DE" DataSourceID="XmlDataSource1" DynamicHorizontalOffset="2" Font-Names="Verdana" Font-Size="0.8em" ForeColor="#284E98" StaticSubMenuIndent="10px">
<StaticSelectedStyle BackColor="#507CD1" />
<StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<DynamicHoverStyle BackColor="#284E98" Font-Bold="False" ForeColor="White" />
<DynamicMenuStyle BackColor="#B5C7DE" />
<DynamicSelectedStyle BackColor="#507CD1" />
<DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<StaticHoverStyle BackColor="#284E98" Font-Bold="False" ForeColor="White" />
<DataBindings>
<asp:MenuItemBinding DataMember="menuitem" NavigateUrlField="path" TextField="title" ValueField="title" />
</DataBindings>
</asp:Menu>

<asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/xmldatasource.xml" xpath="/menuitems/userprofile/menuitem"></asp:XmlDataSource>

Admin Section<asp:Menu ID="Menu2" runat="server" BackColor="#B5C7DE" DataSourceID="XmlDataSource2" DynamicHorizontalOffset="2" Font-Names="Verdana" Font-Size="0.8em" ForeColor="#284E98" StaticSubMenuIndent="10px">
<StaticSelectedStyle BackColor="#507CD1" />
<StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<DynamicHoverStyle BackColor="#284E98" Font-Bold="False" ForeColor="White" />
<DynamicMenuStyle BackColor="#B5C7DE" />
<DynamicSelectedStyle BackColor="#507CD1" />
<DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<StaticHoverStyle BackColor="#284E98" Font-Bold="False" ForeColor="White" />
<DataBindings>
<asp:MenuItemBinding DataMember="menuitem" NavigateUrlField="path" TextField="title" ValueField="title" />
</DataBindings>
</asp:Menu>

<asp:XmlDataSource ID="XmlDataSource2" runat="server" DataFile="~/xmldatasource.xml" xpath="/menuitems/adminprofile/menuitem">
</asp:XmlDataSource>

Thats all you need to create a menu based on XML. As you can see we didn't write one line of code. All properties can be set via the designer. Thats one of the major changes in asp.net 2.0.