SiteMapPath

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;
 }
}
Menu control in asp.net
As the name speaks for itself, Menu control in asp.net is used to display a menu in an asp.net web
application.
The content for the Menu control can be specified directly in the control or the menu control can be
bound to a data source.
A Menu control is a collection of MenuItem objects.
To get a menu as shown in the image below,

we would configure the menu control as shown below.

<asp:Menu ID="Menu1" runat="server">
<Items>
<asp:MenuItem NavigateUrl="~/Home.aspx" Text="Home" Value="Home">
</asp:MenuItem>
<asp:MenuItem NavigateUrl="~/Employee.aspx" Text="Employee" Value="Employee">
<asp:MenuItem NavigateUrl="~/UploadResume.aspx" Text="Upload Resume" Value="Upload Resume">
</asp:MenuItem>
<asp:MenuItem NavigateUrl="~/EditResume.aspx" Text="Edit Resume" Value="Edit Resume">
</asp:MenuItem>
<asp:MenuItem NavigateUrl="~/ViewResume.aspx" Text="View Resume" Value="View Resume">
</asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem NavigateUrl="~/Employer.aspx" Text="Employer" Value="Employer">
<asp:MenuItem NavigateUrl="~/UploadJob.aspx" Text="Upload Job" Value="Upload Job">
</asp:MenuItem>
<asp:MenuItem NavigateUrl="~/EditJob.aspx" Text="Edit Job" Value="Edit Job">
</asp:MenuItem>
<asp:MenuItem NavigateUrl="~/ViewJob.aspx" Text="View Job" Value="View Job">
</asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem NavigateUrl="~/Admin.aspx" Text="Admin" Value="Admin">
<asp:MenuItem NavigateUrl="~/AddUser.aspx" Text="Add User" Value="Add User">
</asp:MenuItem>
<asp:MenuItem NavigateUrl="~/EditUser.aspx" Text="Edit User" Value="Edit User">
</asp:MenuItem>
<asp:MenuItem NavigateUrl="~/ViewUser.aspx" Text="View User" Value="View User">
</asp:MenuItem>
</asp:MenuItem>
</Items>
</asp:Menu>

By default, the menu control is displayed using vertical orientation. If you want to change its orientation to
Horizontal, use Orientation property.

<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal">

By default, StaticDisplayLevels Property is set to 1. This means only the first level is statically displayed. If you
want 2 levels to be displayed statically, you would set this property to 2.

<asp:Menu ID="Menu1" runat="server" StaticDisplayLevels="2">

To control the amount of time it takes for the dynamically displayed portion of a menu to disappear,
use DisappearAfter property. This is in milliseconds. If you want the menu to disappear after 2 seconds, you
would set it to 2000 milliseconds as shown below.
<asp:Menu ID="Menu1" runat="server" DisappearAfter="2000">
To configure styles for the statically displayed portion of the menu, use
StaticMenuStyle - Applicable for the entire statically displayed portion of the menu
StaticMenuItemStyle - Applicable for the individual menu items in the statically displayed portion of the menu
StaticSelectedStyle - Applicable for the selected menu item in the statically displayed portion of the menu
StaticHoverStyle - Applicable for the statically displayed menu item over which mouse is hovered over
To configure styles for the dynamically displayed portion of the menu, use
DynamicMenuStyle - Applicable for the entire dynamically displayed portion of the menu
DynamicMenuItemStyle - Applicable for the individual menu items in the dynamically displayed portion of the
menu

DynamicSelectedStyle - Applicable for the selected menu item in the dynamically displayed portion of the menu
DynamicHoverStyle - Applicable for the dynamically displayed menu item over which mouse is hovered over

To configure styles for each level in the menu control, use

LevelMenuItemStyles - If the menu control has 2 levels, you will have the html as shown below. MenuLevel1 css
class will be applied for menu items at level 1. Along the same lines MenuLevel2 css class will be applied for
menu items at level 2.
<LevelMenuItemStyles>
<asp:MenuItemStyle CssClass="MenuLevel1" />
<asp:MenuItemStyle CssClass="MenuLevel2" />
</LevelMenuItemStyles>

LevelSelectedStyles - If the menu control has 2 levels, you will have the html as shown below. Yellow color will
be applied for the menu item selected at level 1. Maroon color will be applied for menu item selected at level 2.
<LevelSelectedStyles>
<asp:MenuItemStyle ForeColor="Yellow" />
<asp:MenuItemStyle ForeColor="Maroon" />
</LevelSelectedStyles>

If you are following along with the example in the demo, for LevelSelectedStyles, StaticSelectedStyle and
DynamicSelectedStyle to work, you need the following code in Page_Load of the master page.
protected void Page_Load(object sender, EventArgs e)
{
foreach (MenuItem item in Menu1.Items)
{
Check(item);
}
}

private void Check(MenuItem item)

{
if (item.NavigateUrl.Equals(Request.AppRelativeCurrentExecutionFilePath, StringComparison.InvariantCultureI
gnoreCase))
{
item.Selected = true;
}
else if (item.ChildItems.Count > 0)
{
foreach (MenuItem menuItem in item.ChildItems)
{
Check(menuItem);
}
}
}

HTML of the menu control used in the demo

<asp:Menu ID="Menu1" runat="server">
<LevelMenuItemStyles>
 <asp:MenuItemStyle CssClass="MenuLevel1" />
<asp:MenuItemStyle CssClass="MenuLevel2" />
</LevelMenuItemStyles>
<LevelSelectedStyles>
<asp:MenuItemStyle ForeColor="Yellow" />
<asp:MenuItemStyle ForeColor="Maroon" />
</LevelSelectedStyles>
<%--<StaticSelectedStyle ForeColor="Green" />
<DynamicSelectedStyle ForeColor="Green" />--%>
<Items>
<asp:MenuItem NavigateUrl="~/Home.aspx" Text="Home" Value="Home">
</asp:MenuItem>
<asp:MenuItem NavigateUrl="~/Employee.aspx" Text="Employee" Value="Employee">
<asp:MenuItem NavigateUrl="~/UploadResume.aspx" Text="Upload Resume" Value="Upload Resume">
</asp:MenuItem>
<asp:MenuItem NavigateUrl="~/EditResume.aspx" Text="Edit Resume" Value="Edit Resume">
</asp:MenuItem>
<asp:MenuItem NavigateUrl="~/ViewResume.aspx" Text="View Resume" Value="View Resume">
</asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem NavigateUrl="~/Employer.aspx" Text="Employer" Value="Employer">
<asp:MenuItem NavigateUrl="~/UploadJob.aspx" Text="Upload Job" Value="Upload Job">
</asp:MenuItem>
<asp:MenuItem NavigateUrl="~/EditJob.aspx" Text="Edit Job" Value="Edit Job">
</asp:MenuItem>
<asp:MenuItem NavigateUrl="~/ViewJob.aspx" Text="View Job" Value="View Job">
</asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem NavigateUrl="~/Admin.aspx" Text="Admin" Value="Admin">
<asp:MenuItem NavigateUrl="~/AddUser.aspx" Text="Add User" Value="Add User">
</asp:MenuItem>
<asp:MenuItem NavigateUrl="~/EditUser.aspx" Text="Edit User" Value="Edit User">
</asp:MenuItem>
<asp:MenuItem NavigateUrl="~/ViewUser.aspx" Text="View User" Value="View User">
</asp:MenuItem>
</asp:MenuItem>
</Items>
</asp:Menu>

TreeView
TreeView Web control is useful to display hierarchical data in a tree structure. The content for
the TreeView control can be specified directly in the control or the TreeView control can be bound to
1. XML file
2. web.sitemap file
3. Database table
A TreeView is a collection of TreeNode objects.
To get a TreeView control as shown in the image below,

we would configure the TreeView control as shown below. Notice that we have set Target attribute
of TreeNode to _blank. This ensures that the target page is opened in a new window.
<asp:TreeView ID="TreeView1" runat="server">
<Nodes>
<asp:TreeNode Text="Home" NavigateUrl="~/Home.aspx" Target="_blank" />
<asp:TreeNode Text="Employee" NavigateUrl="~/Employee.aspx" Target="_blank">
<asp:TreeNode Text="Upload Resume" NavigateUrl="~/UploadResume.aspx" Target="_blank"/>
<asp:TreeNode Text="Edit Resume" NavigateUrl="~/EditResume.aspx" Target="_blank"/>
<asp:TreeNode Text="View Resume" NavigateUrl="~/ViewResume.aspx" Target="_blank"/>
</asp:TreeNode>
<asp:TreeNode Text="Employer" NavigateUrl="~/Employer.aspx" Target="_blank">
<asp:TreeNode Text="Upload Job" NavigateUrl="~/UploadJob.aspx" Target="_blank"/>
<asp:TreeNode Text="Edit Job" NavigateUrl="~/EditJob.aspx" Target="_blank"/>
<asp:TreeNode Text="View Job" NavigateUrl="~/ViewJob.aspx" Target="_blank"/>
</asp:TreeNode>
<asp:TreeNode Text="Admin" NavigateUrl="~/Admin.aspx" Target="_blank">
<asp:TreeNode Text="Add User" NavigateUrl="~/AddUser.aspx" Target="_blank"/>
<asp:TreeNode Text="Edit User" NavigateUrl="~/EditUser.aspx" Target="_blank"/>
<asp:TreeNode Text="View User" NavigateUrl="~/ViewUser.aspx" Target="_blank"/>
</asp:TreeNode>
</Nodes>
</asp:TreeView>

To configure the look and feel of the TreeView control, the following styles can be used.
1. HoverNodeStyle
2. LeafNodeStyle
3. RootNodeStyle
4. SelectedNodeStyle etc.