Scribd
Upload
11 views9 pages

Navigation Controls

Uploaded by

shobhitsaini75792
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
11 views9 pages

Navigation Controls

Uploaded by

shobhitsaini75792
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 9

Navigation Controls

ASP.NET provides a number of controls that can be added to Web forms pages. These controls are also
known as server-side controls or server controls. They are available in namespace
System.Web.UI.WebControls.

ASP.NET Controls are divided into seven groups:

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:

Dynamic menus

Tree Views

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.

Navigation controltreeviewdynamic menuSite Map Path

Recommended Free Ebook

You might also like