Navigation controls in ASP.NET 2.0 using VB.NET

In this article I am going to describe the Navigation controls. Navigation controls is the new feature of the ASP.NET 2.0. It provides the hierarchical structure of the data.
  • 2276

Introduction:

 

Site Navigation was one of major problems in website programming with ASP and ASP.NET early versions. ASP.NET 2.0 is coming with new features and controls to solve them. These features produced big enhancement in Navigation controls.

 

Navigation controls:

 

ASP.NET 2.0 has three new Navigation controls.

  • SiteMapPath
  • Menu
  • TreeView

Navigation controls are given below:

   

1.JPG
 

 

SiteMapPath:

 

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

 

The SiteMapPath control uses the web.sitemap file by default.

 

Code of SiteMapPath:

 

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

 

SiteMapPath representation:

 

  2.jpg

 

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

 

<%@ Page Language="VB" AutoEventWireup="true"  CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!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>SiteMapPath</title>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <asp:SiteMapPath ID="SiteMapPath1" runat="server" Font-Names="Verdana" Font-Size="0.8em" PathSeparator=" : " BackColor="#C0FFFF" BorderColor="Aqua" 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 SiteMapPath

 

  3.JPG

 

Menu Control

 

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: In the following example you will see how the Menu controls create.

 

Step 1: Open the new website.

 

Step 2: Open ASP.NET Website.

 

Step 3: Drop the Menu control on the web form from the toolbox.

 

Step 4: Now right click on the Menu control and select edit menu item after that we edit menu items.

 

Step 5: Now right click on Menu control and select edit template then we add item template as static and dynamic item template as follows:

 

4.JPG
 

 

 

Step 6: Write the code on menu itemClick().

 

Step 7: At last Debug the code.

 

Source code of the Menu Control:  

 

 

<%@ Page Language="VB" AutoEventWireup="true"  CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!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">

            <DynamicItemTemplateAudio 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>

     </form>

</body>

</html>

 

Output of the above source code is as follows:

 

 

  5.JPG

 

Now we click on songs then we get following output.

 

 

  6.JPG

 

You can change the layout of this control with Orientation property.

  • Horizontal
  • Vertical

By default layout is vertical.

 

TreeView control:

 

A TreeView 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 TreeView control to display directories. You can use the TreeView control in any situation in which you need to display hierarchical data.

 

Source code of TreeView 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 TreeView control.

 

 

<%@ Page Language="VB" AutoEventWireup="true"  CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!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:TreeView ID="TreeView1" runat="server" BackColor="#FFFF80" BorderColor="DarkCyan"BorderStyle="Outset" ImageSet="BulletedList4"  ShowExpandCollapse="False" Width="192px">

            <ParentNodeStyle Font-Bold="False" />

            <HoverNodeStyle Font-Underline="True" ForeColor="#5555DD" />

            <SelectedNodeStyle Font-Underline="True" ForeColor="#5555DD" 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 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>

                </asp:TreeNode>

            </Nodes>

            <NodeStyle Font-Names="Tahoma" Font-Size="10pt" ForeColor="Black" HorizontalPadding="5px"NodeSpacing="0px" VerticalPadding="0px" />

        </asp:TreeView>

        </div>

    </form>

</body>

</html>

 

Design view of the above code is as  follows:

 

  8.JPG

 

 

Figure 5: Structure of the TreeView control.

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.