Unit 3

Introduction
In [Link] Web Forms, navigation controls help users move through different sections of
a website easily.
Common navigation controls include:

 TreeView
 Menu
 SiteMapPath

These controls provide structured and interactive ways to display links and hierarchies of web
pages.

2. TreeView Control
2.1 What is TreeView?

 The TreeView control is used to display hierarchical data in a tree-like structure.

 Each item in the TreeView is represented as a TreeNode.
 It is commonly used for displaying categories, site structure, or directory hierarchies.

2.2 Key Classes

 TreeView Class: Represents the entire tree control.

 TreeNode Class: Represents each individual node (parent or child).

2.3 Common Properties

Property Description
Nodes Collection of TreeNode objects in the TreeView.
ExpandDepth Number of levels expanded when the page loads.
ShowLines Displays lines connecting nodes.
SelectedNode Returns the currently selected node.

2.4 Example
<asp:TreeView ID="TreeView1" runat="server">
<Nodes>
<asp:TreeNode Text="Home" NavigateUrl="[Link]"></asp:TreeNode>
<asp:TreeNode Text="Products">
 <asp:TreeNode Text="Electronics"
NavigateUrl="[Link]"></asp:TreeNode>
<asp:TreeNode Text="Clothing"
NavigateUrl="[Link]"></asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Text="Contact Us"
NavigateUrl="[Link]"></asp:TreeNode>
</Nodes>
</asp:TreeView>

2.5 Events

Event Description
SelectedNodeChanged Occurs when a node is clicked.
TreeNodeExpanded Occurs when a node is expanded.

3. Menu Control
3.1 What is Menu Control?

 The Menu control displays a list of items in a horizontal or vertical menu format.
 It supports fly-out and drop-down menus, making navigation user-friendly.

3.2 Key Class

 Menu Class: Represents a menu structure with multiple menu items.

3.3 Common Properties

Property Description
Orientation Sets the menu layout: Horizontal or Vertical.
StaticDisplayLevels Determines how many levels are displayed initially.
DynamicDisplayLevels Sets levels shown dynamically when hovered.
DataSourceID Binds the menu to a data source like SiteMapDataSource.

3.4 Example
<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal">
<Items>
<asp:MenuItem Text="Home" NavigateUrl="[Link]"></asp:MenuItem>
<asp:MenuItem Text="Products">
<asp:MenuItem Text="Books"
NavigateUrl="[Link]"></asp:MenuItem>
<asp:MenuItem Text="Gadgets"
NavigateUrl="[Link]"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="About Us"
NavigateUrl="[Link]"></asp:MenuItem>
</Items>
</asp:Menu>
4. SiteMapPath Control (Breadcrumb Navigation)
4.1 What is SiteMapPath?

 The SiteMapPath control provides breadcrumb navigation, showing the user’s

location within the site hierarchy.
 It is often used along with a [Link] file.

4.2 Key Classes

 SiteMapPath Class: Displays the breadcrumb trail.

 SiteMapNode Class: Represents each node in the sitemap.

4.3 Example

[Link]

<siteMap>
<siteMapNode title="Home" url="[Link]">
<siteMapNode title="Products" url="[Link]">
<siteMapNode title="Electronics" url="[Link]" />
</siteMapNode>
</siteMapNode>
</siteMap>

ASPX Page

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

Output:

Home → Products → Electronics

5. Creating All Controls Together

Example of Combined Navigation Controls
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />

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

DataSourceID="SiteMapDataSource1"></asp:TreeView>

<asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1"

Orientation="Horizontal"></asp:Menu>

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

6. Validation Controls
6.1 Purpose

Validation controls ensure that user input is correct, complete, and meaningful before
processing.

6.2 Types of Validation Controls

Control Description
RequiredFieldValidator Ensures a field is not left blank.
RangeValidator Checks if a value is within a specified range.
CompareValidator Compares two input values.
RegularExpressionValidator Checks input against a pattern (like email).
CustomValidator Allows custom validation logic.
ValidationSummary Displays all validation messages in one place.

6.3 Example
<asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
<asp:RegularExpressionValidator
ID="revEmail" runat="server"
ControlToValidate="txtEmail"
ErrorMessage="Enter a valid email address"
ValidationExpression="\w+@\w+\.\w+">
</asp:RegularExpressionValidator>

<asp:Button ID="btnSubmit" runat="server" Text="Submit" />

<asp:ValidationSummary ID="vs1" runat="server" />

7. Summary
Control Description Common Use
TreeView Displays hierarchical data Site structure, categories
Menu Creates navigational menus Website navigation
SiteMapPath Displays breadcrumb path Shows current page location
Validation Controls Verify user input Forms and data entry
 Difference between Navigation and Validation
Controls
Feature / SiteMapPath
TreeView Control Menu Control Validation Controls
Aspect Control
Displays Provides site Displays a
Ensures data entered by the
hierarchical data navigation using breadcrumb trail
Purpose user is valid before
(parent–child horizontal or of user’s
submission.
structure). vertical menus. navigation path.
Type of Navigation Navigation
Navigation Control Validation Control
Control Control Control
Simple text-
Tree-like structure
Appearan Drop-down or based Usually text or message
(expand/collapse
ce fly-out menu. breadcrumb beside form inputs.
nodes).
navigation.
SiteMapPath Various:
Menu and RequiredFieldValidator,
TreeView and and
Class Used MenuItem RangeValidator,
TreeNode classes. SiteMapNode
classes. classes.
RegularExpressionValida
tor, etc.
Fully hierarchical Hierarchical — Hierarchical —
Not hierarchical — works
Hierarchy — supports supports parent shows the path
independently on form
Support multiple nested and child menu from root to
fields.
levels. items. current page.
Can be bound to
Can be bound to
XmlDataSource Usually bound to Binds to individual form
Data XmlDataSource or
SiteMapDataSour or
SiteMapDataSou controls (like TextBox,
Binding SiteMapDataSou rce.
ce.
DropDownList).
rce.
Showing user’s
Creating main location in a
Displaying
Typical navigation bars website (e.g., Checking that users enter
categories, folders,
Use Case (Home, Products, Home → valid data in web forms.
site sections.
Contact). Products →
Phones).
User Click
Expand/collapse Hover or click to Automatic validation before
Interactio breadcrumb links
nodes by clicking. show submenus. form submission.
n to navigate.
📂 Home → 🧭
🏠 Home →
Visual Products → Horizontal/vertic ✅ Error messages under or
Products →
Example Electronics → al menu bar with beside form inputs.
Mobiles
Mobiles drop-downs
SelectedNodeCha
No major No navigation events —
Event nged,
Handling TreeNodeExpande MenuItemClick. interactive event triggers validation logic on
d. (passive display). submit.
Dependen Optional (can use Optional. Required for Not required.
cy on manually added breadcrumb
 Feature / SiteMapPath
TreeView Control Menu Control Validation Controls
Aspect Control
[Link]
nodes). navigation.
ap
Main
Output Navigation tree. Menu bar. Breadcrumb path. Form validation feedback.
Type
<asp:RequiredFieldValid
Example <asp:SiteMapPa
<asp:TreeView> <asp:Menu>
th> ator>,
Controls <asp:ValidationSummary>
Enhances user
Provides detailed
Key Easy to create experience with Improves data accuracy and
hierarchical
Advantage site-wide menus. clear navigation user experience.
navigation.
trail.
Limited
Only shows
customization
Key May appear bulky current Works only for client-side
compared to
Limitation for small menus. navigation — no form validation.
HTML/CSS
interactivity.
menus.

Creating Web Pages with WebPartManager and

WebPartManagerProxy in [Link]

1. What are Web Parts?

 Web Parts are special controls in [Link] that allow us to make customizable web
pages.

 Think of them like blocks (like widgets in a dashboard) that users can move, edit,
add, or remove.

 Example: A dashboard with a calendar block, a news block, and a links block. Users
can arrange these blocks as they want.

2. What is WebPartManager?

 WebPartManager is the main controller for all Web Parts on a page.

 Without it, Web Parts will not work.

 It manages:
 o The zones (areas where Web Parts live).

o Different modes (Browse, Design, Edit, Catalog, Connect).

o Personalization (saving a user’s layout).

👉 Rule: Only one WebPartManager is allowed on a page.

Example:

<asp:WebPartManager ID="WebPartManager1" runat="server" />

3. What is WebPartManagerProxy?

 Sometimes we use Master Pages (main layout pages) and Content Pages.

 The real WebPartManager is usually kept in the Master Page.

 But what if we want to add Web Parts in a Content Page?

 We cannot add another WebPartManager (because only one is allowed).

 So, we use WebPartManagerProxy.

 It acts like a helper or link to the main WebPartManager.

Example:

<asp:WebPartManagerProxy ID="Proxy1" runat="server" />

4. Zones in Web Parts

 A Zone is like a container (a box) where we place Web Parts.

 Common zones:

o WebPartZone → for normal parts like Calendar, Label, etc.

o CatalogZone → shows available parts to add.

o EditorZone → allows editing settings.

Example:

<asp:WebPartZone ID="Zone1" runat="server" HeaderText="My Zone">

<ZoneTemplate>

<asp:Calendar ID="Calendar1" runat="server" Title="My Calendar" />

<asp:Label ID="Label1" runat="server" Text="Hello!" Title="Message" />

 </ZoneTemplate>

</asp:WebPartZone>

5. Simple Example with Master Page and Content Page

Master Page ([Link])

<form runat="server">

<!-- Main WebPartManager -->

<asp:WebPartManager ID="WebPartManager1" runat="server" />

<asp:ContentPlaceHolder ID="MainContent" runat="server" />

</form>

Content Page ([Link])

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">

<!-- Proxy to connect with main WebPartManager -->

<asp:WebPartManagerProxy ID="Proxy1" runat="server" />

<!-- Zone with Web Parts -->

<asp:WebPartZone ID="Zone1" runat="server" HeaderText="Dashboard">

<ZoneTemplate>

<asp:Calendar ID="Calendar1" runat="server" Title="Calendar" />

<asp:Label ID="Label1" runat="server" Text="Welcome!" Title="Message" />

</ZoneTemplate>

</asp:WebPartZone>

</asp:Content>

6. Modes of WebPartManager (Simple Explanation)

 Browse Mode → Normal view (default).

 Design Mode → User can drag and move parts.

  Edit Mode → User can change properties.

 Catalog Mode → Add or remove Web Parts.

 Connect Mode → Connect one Web Part with another.

Example in C#:

[Link] = [Link];

7. Difference Between WebPartManager and WebPartManagerProxy

WebPartManager WebPartManagerProxy

Main controller of Web Parts Helper that works with main WebPartManager

Only one per page Can have many

Usually in Master Page Usually in Content Pages/User Controls

Manages zones, modes, personalization Just connects to the main WebPartManager

8. Summary

 To make customizable web pages in [Link], use Web Parts.

 Always put one WebPartManager (in Master Page).

 Use WebPartManagerProxy in Content Pages when you want to add Web Parts
there.

 Add zones to place Web Parts like Calendar, Label, or Links.

 WebPartManager allows users to browse, edit, design, add, and connect parts easily.

29/9/25
Connection Zone Control
A Connection Zone Control is essentially a UI component that manages all activities related
to connecting to a data source (like a database or API). In [Link] Web Forms, this is usually
implemented as a User Control (.ascx) that can be reused across pages.

Key Goals:

 Allow users to enter connection details (server, database, credentials).

 Provide action buttons for connecting, disconnecting, or testing the connection.

 Show connection status in real-time.

 Optionally, display data preview once connected.

Use Cases:

 Admin pages where database connections are dynamically tested.

 Apps where multiple data sources are used.

 Learning/demo apps to understand database connectivity.

2. Components of Connection Zone Control

A typical connection zone control has:

Component Purpose

TextBox (Server) Enter database server name

TextBox (Database) Enter database name

TextBox (Username) Enter username

TextBox (Password) Enter password

Button (Connect) Establish connection

Button (Disconnect) Close connection

Button (Test) Test if connection works

Label (Status) Show status: Connected / Disconnected / Error

GridView (Optional) Display connected data preview

3. Implementation as User Control (.ascx)

Step 1: Create the User Control

File: [Link]

<%@ Control Language="C#" AutoEventWireup="true"

CodeBehind="[Link]" Inherits="[Link]" %>

<div style="border:1px solid #ccc; padding:10px; width:300px;">

<h3>Connection Zone</h3>

Server: <asp:TextBox ID="txtServer" runat="server"></asp:TextBox><br /><br />

Database: <asp:TextBox ID="txtDatabase" runat="server"></asp:TextBox><br /><br />

Username: <asp:TextBox ID="txtUsername" runat="server"></asp:TextBox><br /><br />

Password: <asp:TextBox ID="txtPassword" runat="server"

TextMode="Password"></asp:TextBox><br /><br />

<asp:Button ID="btnConnect" runat="server" Text="Connect" OnClick="btnConnect_Click"

/>

<asp:Button ID="btnDisconnect" runat="server" Text="Disconnect"

OnClick="btnDisconnect_Click" /><br /><br />

<asp:Button ID="btnTest" runat="server" Text="Test Connection"

OnClick="btnTest_Click" /><br /><br />

Status: <asp:Label ID="lblStatus" runat="server" Text="Not Connected"></asp:Label>

</div>

Step 2: Code-Behind ([Link])

using System;

using [Link];

namespace YourNamespace

public partial class ConnectionZone : [Link]

{
 private SqlConnection conn;

protected void btnConnect_Click(object sender, EventArgs e)

try

string connString = $"Server={[Link]};Database={[Link]};User

Id={[Link]};Password={[Link]};";

conn = new SqlConnection(connString);

[Link]();

[Link] = "Connected Successfully!";

catch (Exception ex)

[Link] = "Connection Failed: " + [Link];

protected void btnDisconnect_Click(object sender, EventArgs e)

if (conn != null && [Link] == [Link])

[Link]();

[Link] = "Disconnected";

else

[Link] = "No active connection";

 }

protected void btnTest_Click(object sender, EventArgs e)

try

string connString = $"Server={[Link]};Database={[Link]};User

Id={[Link]};Password={[Link]};";

using (SqlConnection testConn = new SqlConnection(connString))

[Link]();

[Link] = "Test Connection Successful!";

catch (Exception ex)

[Link] = "Test Failed: " + [Link];

4. Adding to an [Link] Page

<%@ Register TagPrefix="uc" TagName="ConnectionZone" Src="~/[Link]" %>

<uc:ConnectionZone ID="ConnectionZone1" runat="server" />

Now the Connection Zone Control will appear on your page and handle connection
management.
5. Diagram of Connection Zone Control

+---------------------------------+

| Connection Zone |

+---------------------------------+

| Server: [__________] |

| Database: [__________] |

| Username: [__________] |

| Password: [__________] |

| |

| [Connect] [Disconnect] [Test] |

| |

| Status: Connected / Disconnected|

+---------------------------------+

CHARACTERISTICS

1. Reusability – Once created as a .ascx, you can use it on multiple pages.

2. Separation of Concerns – Keeps connection logic separate from page layout.

3. Security – Always handle passwords securely; consider encrypting connection

strings.

4. User Feedback – Always show connection status to improve usability.

Unit Based Questions

Q.
Question Answer
No.
What is the main purpose of Navigation controls help users move easily between
1 navigation controls in different sections or pages of a website, providing
[Link] Web Forms? structured and user-friendly access to site content.
Name three common
2 navigation controls in TreeView, Menu, and SiteMapPath.
[Link].
Q.
Question Answer
No.
What class is used by the The TreeView control uses the TreeView and TreeNode
3
TreeView control? classes.
What is the main function of
It specifies how many levels of nodes are expanded when
4 the ExpandDepth property in
the page first loads.
TreeView?
Which event occurs when a
5 user clicks on a TreeView The SelectedNodeChanged event.
node?
It displays a list of items in a horizontal or vertical menu
What does the Menu control
6 format, supporting fly-out or drop-down submenus for
do?
easy navigation.
What property defines the
7 Orientation property (Horizontal or Vertical).
menu layout direction?
Which data source is
8 commonly used with SiteMapDataSource.
navigation controls?
What is a SiteMapPath It provides breadcrumb navigation showing the user’s
9
control used for? current position within the site hierarchy.
What file is needed to
10 configure the SiteMapPath The [Link] file.
control?

Q.
No Question Answer (Summary)
.
The TreeView control displays hierarchical data using nodes.
Each node is a TreeNode. Example: a site structure showing
Explain the TreeView
Home → Products → Electronics. It supports events like
1 control with an
SelectedNodeChanged and TreeNodeExpanded. Example
example.
code:<asp:TreeView ID="TreeView1" runat="server">with
nested TreeNodes.
Differentiate between TreeView shows data in a collapsible tree format, while Menu
2 TreeView and Menu provides a horizontal or vertical menu bar. TreeView is best for
controls. categories; Menu is best for website navigation bars.
What is the It shows the user’s navigation path (breadcrumb). It reads data
3 SiteMapPath control from a [Link] file and displays it like Home → Products
and how does it work? → Electronics.
What is the difference Navigation controls (TreeView, Menu, SiteMapPath) are for
between Navigation moving between pages, while Validation controls
4
Controls and (RequiredFieldValidator, RangeValidator, etc.) ensure correct
Validation Controls? input in web forms.
5 Explain Validation Validation controls ensure user inputs are correct. Types:
Controls in [Link] RequiredFieldValidator, RangeValidator, CompareValidator,
with types. RegularExpressionValidator, CustomValidator,
Q.
No Question Answer (Summary)
.
ValidationSummary.
html<br><asp:RegularExpressionValidator
Give an example of a ID="revEmail" runat="server"
RegularExpressionVa ControlToValidate="txtEmail" ErrorMessage="Enter a
6
lidator for validating valid email"
ValidationExpression="\w+@\w+\.\w+"></asp:RegularExp
an email.
ressionValidator>
Write a short note on Web Parts allow users to personalize web pages by adding,
7 Web Parts in moving, or editing components (like widgets). Managed by
[Link]. WebPartManager, which handles modes and personalization.
It is the main controller for all Web Parts on a page. It manages
What is the role of
8 modes (Browse, Design, Edit, Catalog, Connect) and
WebPartManager?
personalization. Only one WebPartManager is allowed per page.
When using a Master Page (containing the main
What is the use of
WebPartManager), the Content Pages can use
9 WebPartManagerPro
WebPartManagerProxy to connect and add Web Parts. It acts as a
xy?
helper.
• Browse Mode: Default viewing mode.• Design Mode: Drag
Define the different
and rearrange parts.• Edit Mode: Modify part properties.•
10 modes of
Catalog Mode: Add/remove parts.• Connect Mode: Link one
WebPartManager.
part to another.

Q.
Question Answer (Code Snippet)
No.
Write
[Link] html<br><asp:TreeView ID="TreeView1"
runat="server"><Nodes><asp:TreeNode Text="Home"
markup for NavigateUrl="[Link]"/><asp:TreeNode
displaying a Text="Products"><asp:TreeNode Text="Electronics"
1 TreeView NavigateUrl="[Link]"/><asp:TreeNode Text="Clothing"
of Home, NavigateUrl="[Link]"/></asp:TreeNode><asp:TreeNode
Text="Contact Us"
Products, NavigateUrl="[Link]"/></asp:TreeNode></Nodes></asp:Tree
and Contact View>
Us pages.
Write a
sample
code for a
Menu html<br><asp:Menu ID="Menu1" runat="server"
control with Orientation="Horizontal"><Items><asp:MenuItem Text="Home"
2 three NavigateUrl="[Link]"/><asp:MenuItem Text="Services"
options: NavigateUrl="[Link]"/><asp:MenuItem Text="Contact"
NavigateUrl="[Link]"/></Items></asp:Menu>
Home,
Services,
and
Contact.
3 How can Use SiteMapDataSource:
 Q.
Question Answer (Code Snippet)
No.
we combine
TreeView, html<br><asp:SiteMapDataSource ID="SiteMapDataSource1"
Menu, and runat="server"/><asp:TreeView ID="TreeView1" runat="server"
SiteMapPat DataSourceID="SiteMapDataSource1"/><asp:Menu ID="Menu1"
h using a runat="server"
single data DataSourceID="SiteMapDataSource1"/><asp:SiteMapPath
ID="SiteMapPath1" runat="server"/>
source?
Create a A Connection Zone Control allows users to input database details and
Connection connect/test. Example:
Zone
html<br><div><h3>Connection Zone</h3>Server:<asp:TextBox
4 Control as ID="txtServer" runat="server"/><br/>Database:<asp:TextBox
a reusable ID="txtDatabase" runat="server"/><br/><asp:Button
user control ID="btnConnect" runat="server" Text="Connect"/></div> Code-
(.ascx). behind uses SqlConnection to open/close connections.

Q.
Question Answer Summary
No.
WebPartManager is the main controller;
Differentiate between
WebPartManagerProxy is a helper for content
1 WebPartManager and
pages. Only one WebPartManager per page, but
WebPartManagerProxy.
multiple proxies allowed.
Differentiate between TreeView,
2 Menu, SiteMapPath, and See full table below 👇
Validation Controls.

Validation
Aspect TreeView Menu SiteMapPath
Controls
Menu
Purpose Hierarchical data Breadcrumb path Input validation
navigation
Menu, SiteMapPath,
Class TreeView, TreeNode Validator classes
MenuItem SiteMapNode
Hierarchy Multi-level Multi-level Hierarchical path Not hierarchical
Typical
Category listing Navigation bar User location Forms
Use
Home → Products → Drop-down Home → Products → Email, password
Example
Mobiles menus Mobiles validation
THANKS