Part 157 - SiteMapPath control in asp.net

Suggested Videos
Part 154 - Using styles with asp.net menu control
Part 155 - Binding menu control to xml file
Part 156 - Binding asp.net menu control to database table



In this video, we will discuss SiteMapPath control. This is continuation to Part 156, please watch Part 156 before proceeding.

SiteMapPath control displays navigation path. This navigation path is often called as breadcrumb. Using SiteMapPath control is straight forward. 



Here are the steps
1. Drag and drop SiteMapPath control onto the master page.
<asp:SiteMapPath ID="SiteMapPath1" runat="server">
</asp:SiteMapPath>

2. Right click on the project name in solution explorer and add a SiteMap file. Copy and paste the following content.
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0">
  <siteMapNode title="DummyRoot">
    <siteMapNode url="~/Home.aspx" title="Home"/>
    <siteMapNode url="~/Employee.aspx" title="Employee">
      <siteMapNode url="~/UploadResume.aspx" title="Upload Resume"/>
      <siteMapNode url="~/EditResume.aspx" title="Edit Resume"/>
      <siteMapNode url="~/ViewResume.aspx" title="View Resume"/>
    </siteMapNode>
    <siteMapNode url="~/Employer.aspx" title="Employer">
      <siteMapNode url="~/UploadJob.aspx" title="Upload Job"/>
      <siteMapNode url="~/EditJob.aspx" title="Edit Job"/>
      <siteMapNode url="~/ViewJob.aspx" title="View Job"/>
    </siteMapNode>
    <siteMapNode url="~/Admin.aspx" title="Admin">
      <siteMapNode url="~/AddUser.aspx" title="Add User"/>
      <siteMapNode url="~/EditUser.aspx" title="Edit User"/>
      <siteMapNode url="~/ViewUser.aspx" title="View User"/>
    </siteMapNode>
  </siteMapNode>
</siteMap>

That's it we are done. Run the application and notice that SiteMapPath control displays the navigation path. The SiteMapPath control automatically reads data from Web.sitemap file.

At the moment, the only problem is that it is displaying DummyRoot node as well. Here are the steps to hide the Root node in SiteMapPath control in asp.net.
1. Specify OnItemCreated attribute for the SiteMapPath control on the master page.
2. Copy and paste the following code in the code-behind file of the master page
protected void SiteMapPath1_ItemCreated(object sender, SiteMapNodeItemEventArgs e)
{
    if (e.Item.ItemType == SiteMapNodeItemType.Root ||
      (e.Item.ItemType == SiteMapNodeItemType.PathSeparator && e.Item.ItemIndex == 1))
    {
        e.Item.Visible = false;
    }
}