SIGN UP MEMBER LOGIN:    
ARTICLE

Navigation control in ASP.Net 2.0

Posted by Sapna Malik Articles | ASP.NET Controls in C# August 31, 2009
Tags: Navigation control, treeview, dynamic menu, Site Map Path
This article discusses the navigation controls available in ASP.NET 2.0 and how to use them in your Web applications.
Reader Level:


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.

Login to add your contents and source code to this article
share this article :
post comment
 

good

Posted by ms kumar Jan 23, 2012

Thanks

Posted by kanagu raja Jun 30, 2010
TOP LEADERS
TRENDING UP
Sponsored by
6 Months Free & No Setup Fees ASP.NET Hosting!
Become a Sponsor
MOST LIKED ARTICLE
TAG CLOUD
PREMIUM SPONSORS
  • Finally – a virtual platform that delivers next-generation Windows Server 2008 Hyper-V virtualization technology from a managed hosting partner you can truly depend on. Visit www.maximumasp.com/max for a FREE 30 day trial. Hurry offer ends soon. Climb aboard the MaxV platform and take advantage of High Availability, Intelligent Monitoring, Recurrent Backups, and Scalability – with no hassle or hidden fees. As a managed hosting partner focused solely on Microsoft technologies since 2000, MaximumASP is uniquely qualified to provide the superior support that our business is built on. Unparalleled expertise with Microsoft technologies lead to working directly with Microsoft as first to offer IIS 7 and SQL 2008 betas in a hosted environment; partnering in the Go Live Program for Hyper-V; and product co-launches built on WS 2008 with Hyper-V technology.
    Finally – a virtual platform that delivers next-generation Windows Server 2008 Hyper-V virtualization technology from a managed hosting partner you can truly depend on. Visit www.maximumasp.com/max for a FREE 30 day trial. Hurry offer ends soon. Climb aboard the MaxV platform and take advantage of High Availability, Intelligent Monitoring, Recurrent Backups, and Scalability – with no hassle or hidden fees. As a managed hosting partner focused solely on Microsoft technologies since 2000, MaximumASP is uniquely qualified to provide the superior support that our business is built on. Unparalleled expertise with Microsoft technologies lead to working directly with Microsoft as first to offer IIS 7 and SQL 2008 betas in a hosted environment; partnering in the Go Live Program for Hyper-V; and product co-launches built on WS 2008 with Hyper-V technology.
LATEST JOBS
Sponsored by
6 Months Free & No Setup Fees ASP.NET Hosting!
Become a Sponsor
WHITEPAPERS AND BOOKS
Hosted By CBeyond Cloud Services TOP MEMBERSMOST VIEWEDTRENDING NOW PRIZESAWARDSBOOK REVIEWSSURVEY
PHOTOSTIPSCONSULTING TRAININGSTUDENTSMEMBERSMEDIA KIT SUGGEST AN IDEA
PRIVACY POLICY | TERMS & CONDITIONS | SITEMAP | CONTACT US | REPORT ABUSE © 2012 C# Corner. All contents are copyright of their authors.