Author: Sharad Pyakurel

Website Naviga on in ASP.NET

Website naviga on refers to the system or structure that allows users to move between different
pages, sec ons, and features of a website. It typically includes menus, links, bu ons, and other
elements that aid in naviga ng through the website's content. ASP.NET runs on the server and
generates HTML pages that are sent to the client's web browser.

Naviga on using Hyperlink.

A hyperlink in ASP.NET can be created using the <asp:HyperLink> control.

<asp:HyperLink ID="mylink" runat="server" Text="Click Here"

NavigateUrl="h ps://www.google.com"></asp:HyperLink>

<a href="Home.aspx">Home</a>

- 'ID' a ribute uniquely iden fies the hyperlink control.

- The runat="server" a ribute indicates that the control is a server-side control
- 'Text' property sets the text that will be displayed for the hyperlink.
- 'NavigateUrl' property specifies the URL that the hyperlink should navigate to when
clicked.
- The 'NavigateUrl' property also can be set dynamically in the code-behind file (e.g., in the
Page_Load event) using the HyperLinkExample.NavigateUrl property as follows.
- HTML <a> tags also can be used to create hyperlinks for naviga on.

protected void Page_Load(object sender, EventArgs e)

{
mylink.NavigateUrl = "h ps://www.google.com";
}

ASP.NET Sitemap
ASP.NET Sitemap control allows to programma cally define and display a website's naviga on
structure in a hierarchical format. It is commonly used to generate a site map or naviga on
menu based on the structure of the website. In order to use Sitemap control in website follow
following steps.

1. Create a new XML file and name it "SiteMap.xml". The structure of the xml file will be as
below:
 Author: Sharad Pyakurel

<?xml version="1.0" encoding="u -8" ?>

<siteMap xmlns="h p://schemas.microso .com/AspNet/SiteMap-File-1.0" >
<siteMapNode url="Home.aspx" tle="Home" descrip on="Home Page" >
<siteMapNode url="Services.aspx" tle="Services" descrip on="Services Page">
<siteMapNode url ="Consul ng.aspx" tle="Consul ng" descrip on="Consul ng
Page"></siteMapNode>
<siteMapNode url ="Outsourcing.aspx" tle="Outsourcing" descrip on="Outsourcing
Page"></siteMapNode>
</siteMapNode>
<siteMapNode url="About.aspx" tle="About" descrip on="About Us Page" />
<siteMapNode url="Contact.aspx" tle="Contact" descrip on="Contact Us Page" />
</siteMapNode>
</siteMap>

2. Add the Sitemap control to the desired loca on of the web page, such as the master
page or any specific content page.

<div>
<asp:TreeView ID="tvSitemap" runat="server" DataSourceID="DsSiteMap">
</asp:TreeView>
<asp:SiteMapDataSource ID="DsSiteMap" runat="server" />
</div>

- The SiteMapDataSource control is used to bind the sitemap data to the TreeView control.
- The TreeView control is responsible for rendering the hierarchical structure of the site
map.
- The SiteMapFile property of the SiteMapDataSource control is set to the path of the
sitemap file.
- The sitemap structure defined in the XML file will be displayed in the TreeView control.

TreeView Control
TreeView control: The TreeView control is useful for displaying hierarchical data. It can be
populated manually or bound to a data source.

<asp:TreeView ID="TreeView1" runat="server" ExpandDepth="0">

<Nodes>
<asp:TreeNode Text="Home" NavigateUrl="~/Default.aspx"></asp:TreeNode>
<asp:TreeNode Text="About" NavigateUrl="~/About.aspx"></asp:TreeNode>
<asp:TreeNode Text="Contact" NavigateUrl="~/Contact.aspx">
<asp:TreeNode Text="CallCenter" NavigateUrl="~/Callcenter.aspx"></asp:TreeNode>
<asp:TreeNode Text="Feedback" NavigateUrl="~/Feedback.aspx"></asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Text="More" NavigateUrl="~/More.aspx"></asp:TreeNode>
</Nodes>
</asp:TreeView>
 Author: Sharad Pyakurel

The data in TreeView control can be set programma cally as follows:

protected void Page_Load(object sender, EventArgs e)

{
if (!IsPostBack)
{
// Add root node
TreeNode rootNode = new TreeNode("Parent");
TreeView1.Nodes.Add(rootNode);

// Add child nodes

TreeNode childNode1 = new TreeNode("Child 1");
rootNode.ChildNodes.Add(childNode1);

TreeNode childNode2 = new TreeNode("Child 2");

rootNode.ChildNodes.Add(childNode2);
}
}

- The ExpandDepth property can be used to control the number of levels ini ally expanded.
- The SelectedNodeChanged event can be used to perform an ac on when a node is
selected.

<asp:TreeView ID="TreeView1" runat="server" ExpandDepth="2"

OnSelectedNodeChanged="TreeView1_SelectedNodeChanged">
</asp:TreeView>

protected void TreeView1_SelectedNodeChanged(object sender, EventArgs e)

{
//Handling node selec on event//
TreeNode selectedNode = TreeView1.SelectedNode;
string nodinfo = "Text:(" + selectedNode.Text + ")" +
"Path:(" + selectedNode.ValuePath + ")" +
"Value:(" + selectedNode.Value + ")";
Response.Write(nodinfo);

//If We need to get child noddes of par cular parent node//

TreeNodeCollec on childnodes = TreeView1.SelectedNode.ChildNodes;
if (childnodes != null)
{
lblNodes.Text = " ";

foreach (TreeNode t in childnodes)

{
lblNodes.Text += t.Value;
}
}
 Author: Sharad Pyakurel

Menu Control
Menu control in ASP.NET allows you to create hierarchical menus for the web applica on.
Asp.net Menu Control feature provides a consistent way for website naviga on. Menu control
can be added to the web page by simply drag and drop from ToolBox > Naviga on > Menu or
by adding the following few lines of code.

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

<Items>
<asp:MenuItem Text="HOME" NavigateUrl="~/Default.aspx" Selected="true" />
<asp:MenuItem Text="Amout" NavigateUrl="~/About.aspx">
<asp:MenuItem Text="Informa on" NavigateUrl="~/Informa on.aspx" />
</asp:MenuItem>
<asp:MenuItem Text="Products" NavigateUrl="~/Products.aspx">
<asp:MenuItem Text="Electronic" NavigateUrl="~/Electronic.aspx" />
<asp:MenuItem Text="Furnitures" NavigateUrl="~/Furnitures.aspx" />
</asp:MenuItem>
</Items>
</asp:Menu>

- Orienta on=”Horizontal” to display menu horizontally. The Orienta on property of the

Menu Control sets the menu display layout on the webpage, either “horizontal” or
“ver cal” display.
- CSS Style can be applied to menu control. For example, let us consider the following css
stype.

<style type="text/css">
body {
background-color: mediumaquamarine;
font-family: Arial;
font-size: 10pt;
color: #444;
}

.ParentMenu, .ParentMenu:hover {
width: 100px;
background-color: #fff;
color: #333;
text-align: center;
height: 30px;
line-height: 30px;
margin-right: 5px;
}

.ParentMenu:hover {
background-color: #ccc;
}
 Author: Sharad Pyakurel

.ChildMenu, .ChildMenu:hover {
width: 110px;
background-color: #fff;
color: #333;
text-align: center;
height: 30px;
line-height: 30px;
margin-top: 5px;
}

.ChildMenu:hover {
background-color: #ccc;
}

.selected, .selected:hover {
background-color: #A6A6A6 !important;
color: #fff;
}

.level2 {
background-color: #fff;
}
</style>

- The above css can be applied to the menu control as following code:

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

<LevelMenuItemStyles>
<asp:MenuItemStyle CssClass="ParentMenu" />
<asp:MenuItemStyle CssClass="ChildMenu" />
<asp:MenuItemStyle CssClass="ChildMenu" />
</LevelMenuItemStyles>
<Sta cSelectedStyle CssClass="selected" />
<Items>
<asp:MenuItem Text="HOME" NavigateUrl="~/Default.aspx" Selected="true" />
<asp:MenuItem Text="Amout" NavigateUrl="~/About.aspx">
<asp:MenuItem Text="Informa on" NavigateUrl="~/Informa on.aspx" />
</asp:MenuItem>
<asp:MenuItem Text="Products" NavigateUrl="~/Products.aspx">
<asp:MenuItem Text="Electronic" NavigateUrl="~/Electronic.aspx" />
<asp:MenuItem Text="Furnitures" NavigateUrl="~/Furnitures.aspx" />
</asp:MenuItem>
</Items>
</asp:Menu>

- Menu items also can be populated dynamically based on data in any database table. Let
us define a DataTable where the DataTable contains details of menu items with parent
and children rela onship. Following code creates a DataTable.

private DataTable GetMenuData(int parentmenuId)

{
//declara on of variable used
 Author: Sharad Pyakurel

DataSet ds = new DataSet();

DataTable dt;
DataRow dr;
DataColumn menu;
DataColumn pMenu;
DataColumn tle;
DataColumn descrip on;
DataColumn URL;

//create an object of datatable

dt = new DataTable();

//crea ng column of datatable with datatype

menu = new DataColumn("MenuId", Type.GetType("System.Int32"));
pMenu = new DataColumn("ParentId", Type.GetType("System.Int32"));
tle = new DataColumn("Title", Type.GetType("System.String"));
descrip on = new DataColumn("Descrip on", Type.GetType("System.String"));
URL = new DataColumn("URL", Type.GetType("System.String"));

//bind data table columns in datatable

dt.Columns.Add(menu);//1st column
dt.Columns.Add(pMenu);//2nd column
dt.Columns.Add( tle);//3rd column
dt.Columns.Add(descrip on);//4th column
dt.Columns.Add(URL);//5th column

//1st row of data table

dr = dt.NewRow();
dr["MenuId"] = 1;
dr["ParentId"] = 0;
dr["Title"] = "Home";
dr["Descrip on"] = "";
dr["URL"] = "~/Home.aspx";
dt.Rows.Add(dr);

//2nd row of data table

dr = dt.NewRow();
dr["MenuId"] = 2;
dr["ParentId"] = 0;
dr["Title"] = "Products";
dr["Descrip on"] = "Our Products";
dr["URL"] = "~/Products.aspx";
dt.Rows.Add(dr);

//3rd row of data table

dr = dt.NewRow();
dr["MenuId"] = 3;
 Author: Sharad Pyakurel

dr["ParentId"] = 0;
dr["Title"] = "About";
dr["Descrip on"] = "About us page";
dr["URL"] = "~/AboutUs.aspx";
dt.Rows.Add(dr);

//4th row of data table

dr = dt.NewRow();
dr["MenuId"] = 4;
dr["ParentId"] = 0;
dr["Title"] = "Financial";
dr["Descrip on"] = "Financial";
dr["URL"] = "~/Financial.aspx";
dt.Rows.Add(dr);

//5th row of data table

dr = dt.NewRow();
dr["MenuId"] = 5;
dr["ParentId"] = 0;
dr["Title"] = "Carrier";
dr["Descrip on"] = "Carrier page";
dr["URL"] = "~/Carrier.aspx";
dt.Rows.Add(dr);

//6th row of data table

dr = dt.NewRow();
dr["MenuId"] = 6;
dr["ParentId"] = 2;
dr["Title"] = "Training";
dr["Descrip on"] = "Training page";
dr["URL"] = "~/Training.aspx";
dt.Rows.Add(dr);

//7th row of data table

dr = dt.NewRow();
dr["MenuId"] = 7;
dr["ParentId"] = 2;
dr["Title"] = "Investors";
dr["Descrip on"] = "Investors Rela on";
dr["URL"] = "~/Investors.aspx";
dt.Rows.Add(dr);

//8th row of data table

dr = dt.NewRow();
dr["MenuId"] = 8;
dr["ParentId"] = 7;
dr["Title"] = "Electronic";
dr["Descrip on"] = " Electronic Products";
 Author: Sharad Pyakurel

dr["URL"] = "~/ Electronic.aspx";

dt.Rows.Add(dr);

//9th row of data table

dr = dt.NewRow();
dr["MenuId"] = 9;
dr["ParentId"] = 7;
dr["Title"] = "Download";
dr["Descrip on"] = "Download page";
dr["URL"] = "~/Download.aspx";
dt.Rows.Add(dr);

ds.Tables.Add(dt);
var dv = ds.Tables[0].DefaultView;
dv.RowFilter = "ParentId='" + parentmenuId + "'";
DataSet ds1 = new DataSet();
var newdt = dv.ToTable();
return newdt;
}

- The following method gets data for the menu from the method GetMenuData and loads
the menu data in menu control.

private void LoadMenu(DataTable dt, int parentMenuId, MenuItem

parentMenuItem)
{
string currentPage = Path.GetFileName(Request.Url.AbsolutePath);
foreach (DataRow row in dt.Rows)
{
MenuItem menuItem = new MenuItem
{
Value = row["MenuId"].ToString(),
Text = row["Title"].ToString(),
NavigateUrl = row["URL"].ToString(),
Selected = row["URL"].ToString().EndsWith(currentPage,
StringComparison.CurrentCultureIgnoreCase)
};
if (parentMenuId == 0)
{
Menu1.Items.Add(menuItem);
DataTable dtChild = this.GetMenuData(int.Parse(menuItem.Value));
LoadMenu(dtChild, int.Parse(menuItem.Value), menuItem);
}
else
{

parentMenuItem.ChildItems.Add(menuItem);
 Author: Sharad Pyakurel

DataTable dtChild = this.GetMenuData(int.Parse(menuItem.Value));

LoadMenu(dtChild, int.Parse(menuItem.Value), menuItem);
}
}
}

- Finally, the method to load the menu can be called from Page Loan method.

protected void Page_Load(object sender, EventArgs e)

{
if (!IsPostBack)
{
DataTable dt = this.GetMenuData(0);
LoadMenu(dt, 0, null);
}
}