Binding menu control to xml file

Suggested Videos
Part 152 - Master page content page user control life cycle
Part 153 - Menu control in asp.net
Part 154 - Using styles with asp.net menu control



In this video, we will discuss binding asp.net menu control to an xml file using xmldatasource control. This is continuation to Part 154, please watch Part 154 before proceeding.



1. Add an XML file and name it MenuData.xml. Copy and paste the following xml.
<?xml version="1.0" encoding="utf-8" ?>
<Items>
  <MenuItem NavigateUrl="~/Home.aspx" Text="Home"/>
  <MenuItem NavigateUrl="~/Employee.aspx" Text="Employee">
    <MenuItem NavigateUrl="~/UploadResume.aspx" Text="Upload Resume"/>
    <MenuItem NavigateUrl="~/EditResume.aspx" Text="Edit Resume"/>
    <MenuItem NavigateUrl="~/ViewResume.aspx" Text="View Resume"/>
  </MenuItem>
  <MenuItem NavigateUrl="~/Employer.aspx" Text="Employer">
    <MenuItem NavigateUrl="~/UploadJob.aspx" Text="Upload Job"/>
    <MenuItem NavigateUrl="~/EditJob.aspx" Text="Edit Job"/>
    <MenuItem NavigateUrl="~/ViewJob.aspx" Text="View Job"/>
  </MenuItem>
  <MenuItem NavigateUrl="~/Admin.aspx" Text="Admin">
    <MenuItem NavigateUrl="~/AddUser.aspx" Text="Add User"/>
    <MenuItem NavigateUrl="~/EditUser.aspx" Text="Edit User"/>
    <MenuItem NavigateUrl="~/ViewUser.aspx" Text="View User"/>
  </MenuItem>
</Items>

2. Drag and drop an XmlDataSource control on the webform. Set XPath and DataFile attributes as shown below. Notice that DataFile attribute points to the XML file that we added in Step 1.
<asp:XmlDataSource ID="XmlDataSource1" runat="server" 
    XPath="/Items/MenuItem" DataFile="~/MenuData.xml">
</asp:XmlDataSource>

3. Drag and drop a menu control and set DataSourceID attribute to the xmldatasource control we created in Step 2. Also, set DataBindings as shown below.
<asp:Menu ID="Menu1" runat="server" DataSourceID="XmlDataSource1"
                  OnPreRender="Menu1_PreRender">
    <DataBindings>
        <asp:MenuItemBinding DataMember="MenuItem" 
            NavigateUrlField="NavigateUrl" TextField="Text" />
    </DataBindings>
</asp:Menu>

4. To set the styles for the selected menu item, copy and paste the following code in the code-behind file.
private void Check(MenuItem item)
{
    if (item.NavigateUrl.Equals(Request.AppRelativeCurrentExecutionFilePath, 
        StringComparison.InvariantCultureIgnoreCase))
    {
        item.Selected = true;
    }
    else if (item.ChildItems.Count > 0)
    {
        foreach (MenuItem menuItem in item.ChildItems)
        {
            Check(menuItem);
        }
    }
}

protected void Menu1_PreRender(object sender, EventArgs e)
{
    foreach (MenuItem item in Menu1.Items)
    {
        Check(item);
    }
}

No comments