Contribute
ASP.NET

Navigation control in ASP.Net 2.0



In ASP.NET 2.0, a menu can be stored in a file to make it easier to maintain. This file is normally called web.Sitemap, and is stored in the root directory of the web.

Basically ASP.NET 2.0 has three navigation controls:

  1. Dynamic menus
  2. Tree Views
  3. Site Map Path

(1) Dynamic menus

It was the very difficult task to maintain the menu of a large website and time consuming. It is used to display the Menus. You can use it as easy as other Navigation controls. Menu can be stored in a file to make it easier to maintain. This file is normally called web. Sitemap, and is stored in the root directory of the web.

Example:



Source code of the Menu Control:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Menu .aspx.cs" Inherits="sapna_Navigation_Controls_Menu_" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Menu ID="Menu1" runat="server">
                <DynamicItemTemplate>
                    Audio songs
                    <br />
                    Video songs
                    <br />
                </DynamicItemTemplate>
                <StaticItemTemplate>
                    Songs
                    <br />
                </StaticItemTemplate>
                <Items>
                    <asp:MenuItem Text="Songs" Value="Songs">
                        <asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
                    </asp:MenuItem>
                </Items>
            </asp:Menu>
        </div>
    </form>
</body>
</html>

Output of the above source code is as follows:



Now we click on songs then we get following output.



(2) Tree Views

A Tree View control displays a hierarchical list of items using lines to connect related items in a hierarchy. Each item consists of a label and an optional bitmap. Windows Explorer uses a Tree View control to display directories. You can use the Tree View control in any situation in which you need to display hierarchical data.

Source code of Tree View control is as follows:

<Asp: TreeView ID="TreeView1" runat="server"> </asp: TreeView>

Example: We want to create the Employee's information in the hierarchical structure by using the Tree View control.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TreeView.aspx.cs" Inherits="sapna_Navigation_Controls_TreeView" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <table bgcolor="#ffccff">
                <tr>
                    <td>
                        <asp:TreeView ID="TreeView1" runat="server" Height="189px" ImageSet="Simple" Width="162px"
                            NodeIndent="10">
                            <ParentNodeStyle Font-Bold="False" />
                            <HoverNodeStyle Font-Underline="True" ForeColor="#DD5555" />
                            <SelectedNodeStyle Font-Underline="True" ForeColor="#DD5555" HorizontalPadding="0px"
                                VerticalPadding="0px" />
                            <Nodes>
                                <asp:TreeNode Text="Employee" Value="Employee">
                                    <asp:TreeNode Text="Emp_Name" Value="Emp_Name">
                                        <asp:TreeNode Text="First Name" Value="First Name"></asp:TreeNode>
                                        <asp:TreeNode Text="Last Name" Value="Last Name"></asp:TreeNode>
                                    </asp:TreeNode>
                                </asp:TreeNode>
                                <asp:TreeNode Text="Emp_Address" Value="Emp_Address">
                                    <asp:TreeNode Text="Local" Value="Local"></asp:TreeNode>
                                    <asp:TreeNode Text="Permanent" Value="Permanent"></asp:TreeNode>
                                </asp:TreeNode>
                                <asp:TreeNode Text="Emp_Contact no." Value="Emp_Contact no.">
                                    <asp:TreeNode Text="Home" Value="Home"></asp:TreeNode>
                                    <asp:TreeNode Text="Office" Value="Office"></asp:TreeNode>
                                </asp:TreeNode>
                            </Nodes>
                            <NodeStyle Font-Names="Verdana" Font-Size="8pt" ForeColor="Black" HorizontalPadding="0px"
                                NodeSpacing="0px" VerticalPadding="0px" />
                        </asp:TreeView>
                    </td>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>

Output of the above source code is as follows:

treeview.bmp

(3) Site Map Path

Use of this control is very simple. You can add this control to your page then view your page in browser. The Sitemap Path control displays the navigation path of the current page. The path acts as click able links to previous pages.

The Sitemap Path control uses the web. Sitemap file by default.

Code of Sitemap Path:

<Asp: SiteMapPath ID="SiteMapPath1" runat="server"></asp: SiteMapPath>

Sitemap Path representation:



Example: In this Example you will see the source code of the Sitemap Path with some properties.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="SiteMapPath.aspx.cs" Inherits="sapna_Navigation_Controls_SiteMapPath" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:SiteMapPath ID="SiteMapPath1" runat="server" Font-Names="Verdana" Font-Size="0.8em"
                PathSeparator=" : " BackColor="#FFC0FF" BorderColor="Fuchsia" BorderStyle="Inset"
                Height="40px" Width="400px">
                <PathSeparatorStyle Font-Bold="True" ForeColor="#990000" />
                <CurrentNodeStyle ForeColor="#333333" />
                <NodeStyle Font-Bold="True" ForeColor="#990000" />
                <RootNodeStyle Font-Bold="True" ForeColor="#FF8000" />
            </asp:SiteMapPath>
        </div>
    </form>
</body>
</html>

Design view of the Site map Path:

sitemap.bmp
That's it for now.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs