SharePoint 2010 AspMenu using custom XML file

The Sharepoint Menu control in Sharepoint 2010 is used to display a menu on page and is often used in combination with a SiteMapDataSource control for navigating a Web site. The Menu control supports the following features:

• Data binding that allows the control's menu items to be bound to hierarchal data sources.
• Site navigation through integration with the SiteMapDataSource control.
• Programmatic access to the Menu object model to dynamically create menus, populate menu items, set properties, and so on.
• Customizable appearance through themes, user-defined images, styles, and user-defined templates. 

Most of the blogs i read explains the SharePoint:asp Menu using only SiteMapDataSource But most of the time based on client requirement we need to add our own custom menus and sub menus. Here i made an attempt to create Sharepoint ASPMenu using xml file without SiteMapDataSource.

Requirement:

• ContactUs XML : .xml file which will contain the menu structure. savethis file as ContactUs.xml. this need not to be same as below you can have your own structure of xml. here i am using following xml structure for my example. you need to take care the xmlpath which you will set for the DataSource Control in code behind hignhlighted in third point by Pink

<MenuItems>
<MenuItem MenuText="Contact Us" tooltip="Click here to go to contact us" desturl="#">
<MenuItem MenuText="The Site" tooltip="The Site" desturl="javascript:alert('The Site');">
</MenuItem>
<MenuItem MenuText="Portal Site" tooltip="Portal Site" desturl="javascript:alert('Portal Site');">
</MenuItem>
<MenuItem MenuText="EHD" tooltip="EHD" desturl="javascript:alert('Portal Site');">
</MenuItem>
</MenuItem>
</MenuItems>

• WebPart / Control : copy the below code and past in html part of webpart. the most important thing here is the DataBinding which you can customize as per your requirement

<SharePoint:AspMenu ID="Contactmenu" runat="server" Orientation="Horizontal" >
<DataBindings>
<asp:MenuItemBinding TextField="MenuText" NavigateUrlField="destUrl" ToolTipField="tooltip" />
</DataBindings>
<LevelMenuItemStyles>
<asp:MenuItemStyle CssClass="ms-navheader" />
<asp:MenuItemStyle CssClass="ms-navitem" />
</LevelMenuItemStyles>
<LevelSubMenuStyles>
<asp:SubMenuStyle CssClass="ms-navSubMenu1" />
<asp:SubMenuStyle CssClass="ms-navSubMenu2" />
</LevelSubMenuStyles>
<LevelSelectedStyles>
<asp:MenuItemStyle CssClass="ms-selectednavheader" />
<asp:MenuItemStyle CssClass="ms-selectednav" />
</LevelSelectedStyles>
</SharePoint:AspMenu>

• Web Part Code Behind: copy the following code and overwrite in page_load method of the control. This will render the XML.

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        XmlDataSource xmlDataSource = new XmlDataSource();
        xmlDataSource.ID = "ContactUsXML";
        xmlDataSource.EnableCaching = false;
   
        // read the xml from file
        FileStream fs = new FileStream(@"D:\ContactUs.xml", FileMode.Open);
        StreamReader reader = new StreamReader(fs);
        xmlDataSource.Data = reader.ReadToEnd();
   
        fs.Close();
        fs.Dispose();
   
        //assigning the path to start read all MenuItem under MenuItems
        xmlDataSource.XPath = "MenuItems/MenuItem";
       
        //Finally, bind the source to the Menu1 control
        Contactmenu.DataSource = xmlDataSource;
        Contactmenu.DataBind();
    }
}


Following will be the o/p once you render the Web Part on page