Unit 4: Site Navigation

Navigation control in ASP.NET manages the data passing between ASPX pages. Web
applications are having multiple pages interconnected with each other. So proper
navigation system must be there which can help the end user to successfully work
through an application.
There are three navigation control in ASP.NET:
1) TreeView Control
2) Menu Control
3) SiteMapPath Control

1)TreeView Control
The TreeView control in ASP.NET is used to display hierarchical data in a tree-like
structure. It allows users to navigate through a hierarchy of nodes, expanding and
collapsing branches as needed. Each node in the tree can have child nodes, creating a
nested structure.
Property Description
Nodes Gets the collection of TreeNode objects representing the
nodes in the TreeView.
ShowLines Gets or sets a value indicating whether lines are drawn
between nodes in the tree structure.
ShowCheckBoxes Gets or sets a value indicating whether checkboxes are
displayed next to each node.
ShowNodeToolTips Gets or sets a value indicating whether tooltips are
displayed for each node.
Text Indicates the text to display in the node.
NavigateUrl Indicates the target location to send to the user when node
is clicked.
NodeStyle Gets the style properties for regular nodes (nodes with child
nodes).
SelectedNodeStyle Gets the style properties for the selected node.
SelectedNodeChanged Event raised when the selected node in the TreeView
control is changed.

Styles of TreeView Control

NodeSpacing Space (in pixel) between current node and the node above or
below it.
VerticalPadding Space (in pixel) between the top and bottom of the node text.
HorizontalPadding Space (in pixel) between the left and right of the node text.
ChildNodePadding Space (in pixel) between the parent node and its child node.

1
<asp:TreeView ID="TreeView1" runat="server" ShowLines="True">
<Nodes>
<asp:TreeNode Text="Home" Value="Home"></asp:TreeNode>
<asp:TreeNode NavigateUrl="~/Products.aspx" Text="Products"
Value="Products">
<asp:TreeNode NavigateUrl="~/product1.aspx" Text="Product 1"
Value="Product 1"></asp:TreeNode>
<asp:TreeNode NavigateUrl="~/product2.aspx" Text="Product 2"
Value="Product 2"></asp:TreeNode>
</asp:TreeNode>
</Nodes>
</asp:TreeView>

2)Menu Control:
The Menu control is used to create a menu of hierarchical data that can be used to
navigate through the pages. The Menu control conceptually contains two types of
items. First is StaticMenu that is always displayed on the page, Second is
DynamicMenu that appears when opens the parent item.

Property Description
DataSourceID Indicates the data source to be used (You can use .sitemap file
as datasource).
Text Indicates the text to display in the menu.
Tooltip Indicates the tooltip of the menu item when you mouse over.
NavigateUrl Indicates the target location to send the user when menu item is
clicked. If not set you can handle MenuItemClick event to decide
what to do.
Target If NavigationUrl property is set, it indicates where to open the
target location (in new window or same window).
ImageUrl Indicates the image that appears next to the menu item.
ImageToolTip Indicates the tooltip text to display for image next to the item.
PopOutImageUrl Inidcates the image that is displayed right to the menu item
when it has some subitems.
Target If NavigationUrl property is set, it indicates where to open the
target location (in new window or same window).

2
<asp:Menu ID="Menu1" runat="server">
<Items>
<asp:MenuItem Text="Home" Value="Home"></asp:MenuItem>
<asp:MenuItem Text="About us" Value="About us"></asp:MenuItem>
<asp:MenuItem Text="Products" Value="Products">
<asp:MenuItem NavigateUrl="~/p1.aspx" Text="A 1" Value="A
1"></asp:MenuItem>
<asp:MenuItem NavigateUrl="~/p2.aspx" Text="A 2" Value="A
2"></asp:MenuItem>
</asp:MenuItem>
</Items>
</asp:Menu>

❖ Attaching XML file to TreeView control

sample.xml:
<?xml version="1.0" encoding="utf-8" ?>
<root>
<category name="Fruits">
<item Value="Apple" NavigateUrl="~/p1.aspx"></item>
<item Value="Orange"></item>
</category>
<category name="Alphabets">
<item Value="A"></item>
<item Value="B"></item>
</category>
</root>
DefualtXT.aspx:

<div>
<asp:TreeView ID="TreeView1" runat="server" DataSourceID="XmlDataSource1"
ShowLines="True">
<DataBindings>

3
 <asp:TreeNodeBinding DataMember="category" TextField="name"
ValueField="name" NavigateUrl="~/p2.aspx" />
<asp:TreeNodeBinding DataMember="item" TextField="Value"
ValueField="Value" />
</DataBindings>
</asp:TreeView>
<br />
<asp:XmlDataSource ID="XmlDataSource1" runat="server"
DataFile="~/sample.xml"></asp:XmlDataSource>
</div>

❖ Attaching XML file to Menu control

Demo.xml:
<?xml version="1.0" encoding="utf-8" ?>
<menuItems>
<menuItem Text="Home"></menuItem>
<menuItem Text="Products">
<item Text="Products 1" />
</menuItem>
</menuItems>

Default.aspx:

<div>
<asp:Menu ID="Menu1" runat="server" DataSourceID="XmlDataSource1">
<DataBindings>
<asp:MenuItemBinding DataMember="menuItem" TextField="Text"
ValueField="Text" NavigateUrl="~/Products.aspx" />
<asp:MenuItemBinding DataMember="item" TextField="Text"
ValueField="Text" NavigateUrl="~/p1.aspx" />
</DataBindings>
</asp:Menu>
<asp:XmlDataSource ID="XmlDataSource1" runat="server"
DataFile="~/demo.xml"></asp:XmlDataSource>
</div>

• XmlDataSource : This control allows you to bind to XML data, which can come
from a variety of sources such as an external XML file, a DataSet object and so
on. Once the XML data is bound to the XmlDataSource control, this control can
then act as a source of data for other data-bound controls such as TreeView

4
 and Menu. For example, you can use the <asp:XmlDataSource> control to
represent a hierarchical XML data source.
• SiteMapDataSource: The SiteMapDataSource control is used as a data source
to place a site map (breadcrumbs) to the website. A site map is a way to
present all folders and pages of the website. A site map is a way to present all
folders and pages of the website. The site map information can appear in
many forms. SiteMapDataSource control is used generally as a data source for
<asp:SiteMapPath> control. By default, this control takes root's web.sitemap
file as the source file to display sitemap.

3)Site map(breadcrumb):
⎯ Site maps are XML files which are mainly used to describe the logical
structure of the web application. It defines the layout of all pages in web
application and how they relate to each other.
⎯ Whenever you want you can add or remove pages to your site map there by
managing navigation of website efficiently. Site map files are defined with
.sitemap extension. <sitemap> element is the root node of the sitemap file.
⎯ In ASP.NET, the SiteMapPath control is used to display the navigation path
(breadcrumbs) for a user within a website. It is a part of the navigation
controls provided by ASP.NET and is usually used in conjunction with a site
map defined in the web.sitemap file.

Property Description
NodeStyle Sets the style of all nodes that will be displayed.
PathSeparator Gets or sets Path separator text. (By default it is >.)
CurrentNodeStyle Sets the style on node that represent the current page.
RootNodeStyle Sets the style on the absoulte root node.
PathSeparatorStyle Sets the style of path separator.

MasterPage1.master:
<%@ Master Language="C#" AutoEventWireup="true"
CodeFile="MasterPage1.master.cs" Inherits="MasterPage1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">

5
 <div>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
<asp:SiteMapPath ID="SiteMapPath1" runat="server"
PathSeparator="&gt;&gt;"></asp:SiteMapPath>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>

about.aspx:
<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage1.master"
AutoEventWireup="true"
CodeFile="about.aspx.cs" Inherits="About" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1"
Runat="Server">
<h2>About us</h2>
</asp:Content>

products.aspx:
<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage1.master"
AutoEventWireup="true" CodeFile="products.aspx.cs" Inherits="Products" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1"
Runat="Server">
<h2>Products</h2>
<a href="a1.aspx">A1</a>
</asp:Content>

a1.aspx:
<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage1.master"
AutoEventWireup="true" CodeFile="a1.aspx.cs" Inherits="a1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1"
Runat="Server">
<h2>Products: a1</h2>
</asp:Content>

6
Web.sitemap:
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode url="home.aspx" title="MySite" description="Home Page" >
<siteMapNode url="products.aspx" title="Products" description="Products Page">
<siteMapNode url ="a1.aspx" title="ProductA1" description="A1
Page"></siteMapNode>
</siteMapNode>
<siteMapNode url="about.aspx" title="About" description="About Us Page" />
</siteMapNode>
</siteMap>

home.aspx:
<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage1.master"
AutoEventWireup="true" CodeFile="home.aspx.cs" Inherits="home" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1"
Runat="Server">
<h2>Home</h2>
<a href="about.aspx">About</a>
<br />
<a href="products.aspx">Products</a>
</asp:Content>

❖ State Management System in ASP.NET

Maintaining state is an important part of any web application. State Management
System is a mechanism to track the user state, or data, which is significant with
application. State management manages the state of an object on different request.

There are two types of state management system in ASP.NET.

1) Client-side state management: Client-side state management stores
information on the client’s computer
2) Server-side state management: server-side state management stores the
information in the server’s memory or a database.
1)Client-side state management
ASP.NET provides several techniques for storing state information on the client. These
include the following:

7
 a) View state:
⎯ ASP.NET uses view state to track values in controls between page requests. It
works within the page only. You cannot use view state value in next page.
ASP.NET page contains a hidden form field named __VIEWSTATE.
⎯ This hidden form field stores the value of the control’s property.
⎯ By default, view state is enabled for page and its controls. You can disable
view state by setting the property EnableViewState as false.

Example
default.aspx:
<div>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Set" />
<asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="Get" />
<br />
<asp:Label ID="Label1" runat="server"></asp:Label>
</div>
default.aspx.cs:
protected void Button1_Click(object sender, EventArgs e)
{
//writing information to view state
ViewState.Add("S1", "Sample");
}
protected void Button2_Click(object sender, EventArgs e)
{
if (ViewState["S1"] != null)
{
string data = (string)ViewState["S1"];
Label1.Text = data.ToString();
}
}
b) Hidden fields:
⎯ Hidden fields in HTML are simply input fields and not visible on the browser
during execution. Hidden fields are used to store data at the page level.
⎯ It is rendered as an <input type= "hidden"/> HTML tag.
⎯ Hidden field should not be used to store confidential data. Hidden fields are
simple to implement for a page specific data and stores small amount of data.
We should not use hidden fields for sensitive data. It has no built-in
compression, encryption technique.
Syntax:
<asp:HiddenField ID="HiddenField1" runat="server" />

8
Example
Default.aspx:
<div>
<asp:HiddenField ID="HiddenField1" runat="server" />
<asp:Button ID="Show" runat="server" OnClick="Button1_Click" Text="Button" />
<br />
<asp:Label ID="Label1" runat="server" Text=""></asp:Label>
</div>
Default.aspx.cs:
protected void Button1_Click(object sender, EventArgs e)
{
HiddenField1.Value = "Demo";
Label1.Text = HiddenField1.Value;
}

c)Query strings:
⎯ In query strings values are stored at the end of the URL. These values are
visible to the user through his or her browser’s address bar. Query strings are
not secure. You should not send confidential information through the query
string.
⎯ Query String object is helpful when we want to transfer a value from one page
to another. Query string values are appended to the end of the page URL. It
uses a question mark (?), followed by the parameter name followed by an
equal sign (=) and its value. You can append multiple query string parameters
using the ampersand (&) sign.
Example:
Response.Redirect("Default.aspx?msg="+txtMessage.Text);
Response.Redirect("Default2.aspx?ID=" + txtID.Text + "&Name=" + txtFirstName.Text);

Reading values from QueryString

Label1.Text = "ID: " + Server.HtmlEncode(Request.QueryString["ID"]) + ", Name: " +
Server.HtmlEncode(Request.QueryString["Name"]);

qs.aspx:
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Submit"
OnClick="Button1_Click" />

9
 </div>
qs.aspx.cs:
protected void Button1_Click(object sender, EventArgs e)
{
Response.Redirect("Default.aspx?Roll=" +
TextBox1.Text+"&Name="+TextBox2.Text);
}

Default.aspx:
<div>
<h2>Default</h2>
<asp:Label ID="Label1" runat="server" Text=""></asp:Label>
</div>
Default.aspx.cs:
protected void Page_Load(object sender, EventArgs e)
{
Label1.Text = "Roll: " + Server.HtmlEncode(Request.QueryString["Roll"]) + ",
Name: " + Server.HtmlEncode(Request.QueryString["Name"]);
}

d)Cookies
Cookies are small piece of information that server creates on the browser. Cookies
store a value in the user’s browser that the browser sends with every page request to
the web server. It works on key/value pair.
There are two types of cookies:
1)Persistence Cookie
These types of cookies are permanently stored on user hard drive. Cookies which
have an expiry date time are called persistence cookies. These types of cookies
stored user hard drive permanently till the date time we set.
Example to create persistence cookie:
Response.Cookies[“name”].Value = “ABC”;
Response.Cookies[“name”].Expires = DateTime.Now.AddMinutes(10);

we can also create same cookies as like below:

HttpCookie strname = new HttpCookie(“name”);
strname.Value = “ABC”;
strname.Expires = DateTime.Now.AddMinutes(10);
Response.Cookies.Add(strname);

10
2. Non-Persistence Cookie
These types of cookies are not permanently stored on user hard drive. It stores the
information up the user accessing the same browser. When user close the browser,
the cookies will be automatically deleted.
Example to create non-persistence cookie
Response.Cookies[“name”].Value = “ABC”;

we can also create same non-persistence cookies as

HttpCookie strname = new HttpCookie(“name”);
strname.Value = “ABC”;
Response.Cookies.Add(strname);
Default.aspx:
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Set Cookie" OnClick="Button1_Click"
/>
<br />
<asp:Button ID="Button2" runat="server" Text="Get Cookie"
OnClick="Button2_Click" />
<br />
<asp:Label ID="Label1" runat="server" Text=""></asp:Label>
</div>
Default.aspx.cs:
protected void Button1_Click(object sender, EventArgs e)
{
//HttpCookie ck = new HttpCookie("name");
//ck.Expires = DateTime.Now.AddMinutes(5);
//ck.Value = TextBox1.Text;
//Response.Cookies.Add(ck);

Response.Cookies["name"].Value = TextBox1.Text;
Response.Cookies["name"].Expires = DateTime.Now.AddMinutes(5);
TextBox1.Text = "";
}

protected void Button2_Click(object sender, EventArgs e)

{
//reading cookie value

11
 if (Request.Cookies["name"] != null)
{
Label1.Text = Request.Cookies["name"].Value;
}
}

Use of Cookies:
• Authentication of user.
• Identification of a user session.
• Shopping cart contents.
Limitation of cookies:
• Cookie can store only string value.
• Cookies are browser dependent.
• Cookies are not secure.
• Cookies can store small amount of data.
• Size of cookies is limited to 4096 bytes.

2) Server Side state management

There are two important objects which work on server.
a)Session State
⎯ Session state is used stores the user’s specific information that needs to persist
across multiple requests during a user’s session.
⎯ It can store any type of object. For every user Session data store separately,
means session is user specific.
⎯ Session is used to store & retrieve values of user. It helps to identify requests
from same browser during a time period(session).
⎯ It contains a unique identifier that is used to track the user while moving from
one page to another page.
⎯ Storing the data in Session object
Session ["name"] = txtName.Text;
⎯ Retreving the data from Session object
Label1.Text = Session ["name"].ToString();

Ex:
Default.aspx:
<asp:Button ID="Button1" runat="server" Text="Get" OnClick="Button1_Click" />
<br />
<asp:Label ID="Label1" runat="server" Text=""></asp:Label>

12
Default.aspx.cs:
protected void Page_Load(object sender, EventArgs e)
{
if(!IsPostBack)
{
Session["name"] = "Sample";
}
}
protected void Button1_Click(object sender, EventArgs e)
{
if (Session["name"] != null)
{
Label1.Text = Session["name"].ToString();
}
else
{
Label1.Text = "Not found";
}
}

Important methods of Session object

• Abandon: It is used to end a user session.
• Clear: It clears all items from Session state.
• Remove: This method is used to remove a particular item from Session state.

b) Application State
Application object is used to store information at application level rather than user
level. All pages of your application can access the Application object. Application
variables are stored on a web server.
Writing data to Application object
Application["Message"] = "Hello";

Ex:
Default.aspx:
<asp:Button ID="Button1" runat="server" Text="Show count"
OnClick="Button1_Click" />
<br />
<asp:Label ID="Label1" runat="server" Text=""></asp:Label>

13
Default.aspx.cs:
protected void Page_Load(object sender, EventArgs e)
{
if (Application["count"] == null)
{
Application["count"] = 1;
}
else
{
int c = (int)Application["count"];
c++;
Application["count"] = c;
}
}
protected void Button1_Click(object sender, EventArgs e)
{
int c= (int)Application["count"];
Label1.Text = "Total page visit count="+c;
}

Difference between session state and application state

Application Session
It works at application level rather than Session object is user specific.
user level.
Application state does not depends Session object depends upon cookie or
upon client's cookies can be cookieless.
Application state does not depend upon Session state has scope to the current
the current browser. browser only.

14