BY

Adnan Amin
Lecturer / Software Programmer
Information & Communication Technology (ICT Dept)
www.geoamins.com
 Site Navigation.
 Site Map
 XML-Based Site Maps
 Site Map Control.
 Site Map Path Control.
 Creating Web.sitemap XML File.

By: Adnan Amin (Lecturer/Software

Programmer) 2
 The Web applications that you develop
generally have more than a single page to
them.
 Usually you create a number of Web pages
that are interconnected in some fashion.
 If you also build the navigation around your
pages, you make it easy for the end user to
successfully work through your application in
a straightforward manner.

By: Adnan Amin (Lecturer/Software

Programmer) 3
 To show where the end user is in the
navigation structure or where the end user
wants to go in website.

 You find this new control in the Navigation

section of the Visual Studio 2005 IDE.

1. SiteMapPath
2. Menu
3. TreeView

By: Adnan Amin (Lecturer/Software

Programmer) 4
 The site map “to define the structure or map
of all the web pages (web forms) in your
application and how they relate to one
another in your web site”.

By: Adnan Amin (Lecturer/Software

Programmer) 5
 The new site navigation system includes the
capability to define your entire site in an XML
file that is called a site map.

 After you define a new site map, you can

work with it programmatically using the Site
Map class.

 He ASP.net navigation system is building a

site map for your application using
navigation-based server controls.

By: Adnan Amin (Lecturer/Software

Programmer) 6
 A site map is an XML description of your site’s
structure.
 To create a new site map file for your
application, add a site map or an XML file to your
application.
 When asked, you name the XML file
Web.sitemap; this file is already in place if you
select the Site Map
 option. The file is named Web and has the new
file extension of .sitemap.

By: Adnan Amin (Lecturer/Software

Programmer) 7
 XML-Based Site Maps

Root Node
<siteMap>

Child Noe
<siteMapNode>

Title Description URL

By: Adnan Amin (Lecturer/Software

Programmer) 8
  The root node of XML file for navigation is a
<siteMap> element.
 Only one <sitemap> element can exist in the
file within the <siteMap> element.

Correct Incorrect
<siteMap> <siteMap>
body of site map body of site map
define childs node here define childs node here
</siteMap> <siteMap>
body of 2nd Root Node
</siteMap>
</siteMap>
By: Adnan Amin (Lecturer/Software
Programmer) 9
 The first <siteMapNode> in place, you can place as
many additional <siteMapNode> elements as you
need.

 The following are the most common attributes in

the <siteMapNode> element.
1. Title
2. Description
3. url

Example

<siteMapNode title=“HOME” description=“Home Page” url=“Default.aspx”>

By: Adnan Amin (Lecturer/Software

Programmer) 10
 Title:
◦ The title attribute provides a textual description of
the link. The string value used for the link.
 Description:
◦ The description attribute not only reminds you what
the link is for, but it is also used for the ToolTip on
the link.
 url
◦ The url attribute describes where the file is located
in the solution.

By: Adnan Amin (Lecturer/Software

Programmer) 11
 If the file is in the root directory, simple use
the filename,
◦ such as “Default.aspx”

 If the file is located in a subforlder, be sure to

include the folders in the String value used in
this attribute. For example,
◦ “MySubFolder/MyPage.aspx”

By: Adnan Amin (Lecturer/Software

Programmer) 12
 HOME
◦ Courses
 Web Engineering-1
 PHP
 Web Engineering-II
 Web Fundamentals
◦ Account
 New Registration
 Login
◦ Supports
 Feedbacks
 Help
 SiteMap

By: Adnan Amin (Lecturer/Software

Programmer) 13
 Open MS Visual Studio.net or Visual Web
Developer.

 Create New Website and Add few Web Forms

into your web site.
 Click on Website menu in IDE then Click on
“Add new Item”.

 Locate “Site Map” file then click on Add

Button.

By: Adnan Amin (Lecturer/Software

Programmer) 14
By: Adnan Amin (Lecturer/Software
Programmer) 15
By: Adnan Amin (Lecturer/Software
Programmer) 16
By: Adnan Amin (Lecturer/Software
Programmer) 17
 There are built in three New Navigation controls
that are used to access the web.sitemap xml file.

1. SiteMapPath
2. Menu
3. TreeView

By: Adnan Amin (Lecturer/Software

Programmer) 18
 This is a linear path defining where the end
user is in the navigation structure.

 It is quite easy to use the web.sitemap file

you just created with the new SiteMapPath
server control provided with ASP.net 2.0.

Example
HOME > Courses > Web Engineering-I

By: Adnan Amin (Lecturer/Software

Programmer) 19
<?xml version="1.0" encoding="utf-8" ?>

<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >

<siteMapNode url="Default.aspx" title="HOME" description="Go Back to Home">

<siteMapNode url="Default2.aspx" title="Courses" description="Download Slides" >
<siteMapNode url="Courses/Default3.aspx" title="Web Engineering1" description="PHP" />
<siteMapNode url="Courses/Default4.aspx" title="Web Engineering2" description="ASP.net" />
</siteMapNode>

<siteMapNode url="Default5.aspx" title="Accounts" description="Signin or Signup" />

<siteMapNode url="Default6.aspx" title ="Supports" description="Get Help" >

<siteMapNode url="Default7.aspx" title="Feedback" description="Send Comments" />
<siteMapNode url="Default8.aspx" title="Help" description="Need help" />
</siteMapNode >
</siteMapNode >

</siteMap>

By: Adnan Amin (Lecturer/Software

Programmer) 20
Drag & Drop SiteMapPath Control

By: Adnan Amin (Lecturer/Software

Programmer) 21
<%@ Page Language=”VB” %>
<html xmlns=”http://www.w3.org/1999/xhtml” >
<head runat=”server”>
<title>Using the SiteMapPath Server Control</title>
</head>
<body>

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

<asp:SiteMapPath ID=”Sitemappath1” Runat=”server”>

</asp:SiteMapPath>

</form>
Add siteMapPath through Coding
</body>
</html>

By: Adnan Amin (Lecturer/Software

Programmer) 22
This screen shot shows that you are on the Web Engineering1 page at
Courses.aspx.
As an end user, you can see that this page is part of the Courses section of
the site.

By: Adnan Amin (Lecturer/Software

Programmer) 23
 This tooltip, which reads The Latest Download Slides, comes from the description
attribute of the <siteMapNode> element in the Web.sitemap file.

By: Adnan Amin (Lecturer/Software

Programmer) 24
 There are the following important properties
of SiteMapPath;

1. The PathSeparator Property

i. Changing the PathSeparator value
ii. Adding style to the PathSeparator property
iii. Using an image as the separator
2. The PathDirection Property
3. The ParentLevelsDisplayed Property
4. The ShowToolTips Property

By: Adnan Amin (Lecturer/Software

Programmer) 25
 One important style property for the
SiteMapPath control is the PathSeparator
property.
 By default, the SiteMapPath control uses a
greater than sign (>) to separate the link
elements.
 You can change this by reassigning a new
value to the PathSeparator property.
 You can use this property for,
i. Changing the PathSeparator value
ii. Adding style to the PathSeparator property
iii. Using an image as the separator
By: Adnan Amin (Lecturer/Software
Programmer) 26
<asp:SiteMapPath ID=”Sitemappath1” Runat=”server” PathSeparator=” | “>
</asp:SiteMapPath>

OR

<asp:SiteMapPath ID=”Sitemappath1” Runat=”server”>

<PathSeparatorTemplate> | </PathSeparatorTemplate>
</asp:SiteMapPath>

With the use of <PathSeparatorTemplate>

element, it is quite easy to specify what
you want to use to separate the links in
navigation, You can add a
<PathSeparatorStyle> node to your
SiteMapPath control.

By: Adnan Amin (Lecturer/Software

Programmer) 27
By: Adnan Amin (Lecturer/Software
Programmer) 28
By: Adnan Amin (Lecturer/Software
Programmer) 29
  By using the <PathSeparatorStyle> element
with the SiteMapPath control, You are able to
change the visual appearance of the
separator elements.

<asp:SiteMapPath ID="SiteMapPath1" runat="server" PathSeparator=" |">

<PathSeparatorStyle BackColor="#CC3300" BorderColor="#99FF33"
BorderStyle="Double" BorderWidth="1px" ForeColor="#FF9900" />
</asp:SiteMapPath>

By: Adnan Amin (Lecturer/Software

Programmer) 30
By: Adnan Amin (Lecturer/Software
Programmer) 31
 There is no need to code for adding style (if
you don’t want) because visually, you can do.

By: Adnan Amin (Lecturer/Software

Programmer) 32
 To utilize an image as the separator between
the links, you use the <PathSeparatorTemplate>
element and place an Image control within it.

 In fact, you can place any type of control

between the navigation links that the
SiteMapPath control produces.

By: Adnan Amin (Lecturer/Software

Programmer) 33
<asp:SiteMapPath ID="SiteMapPath1" runat="server" PathSeparator="">

<PathSeparatorTemplate>
<asp:Image ID="image1" ImageUrl="NavForward.png" runat="server" />
</PathSeparatorTemplate>

</asp:SiteMapPath>

By: Adnan Amin (Lecturer/Software

Programmer) 34
 This property changes the direction of the links
generated in the output. Only two settings are
possible for this property:
1. RootToCurrent
2. CurrentToRoot.
 By default, this property is set to RootToCurrent.
This is usually the Home page.

By: Adnan Amin (Lecturer/Software

Programmer) 35
By: Adnan Amin (Lecturer/Software
Programmer) 36
By: Adnan Amin (Lecturer/Software
Programmer) 37
  In some cases, your navigation may go quite deep.

 In a case like this, you can turn to the

ParentLevelsDisplayed property that is part of the
SiteMapPath control.

 When set, this property displays pages only as

deep as specified.

 If you give ParentLevelsDisplayed property value 2,

then it will display only two pages.

<asp:SiteMapPath ID=”Sitemappath1” Runat=”server” ParentLevelsDisplayed=”2”>

</asp:SiteMapPath>
By: Adnan Amin (Lecturer/Software
Programmer) 38
By: Adnan Amin (Lecturer/Software
Programmer) 39
 By default, the SiteMapPath control generates
tooltips for each link if a description property
is used within the Web.sitemap file.
 When an end user mouse over one of the
links in the SiteMapPath control.
 You can actually turn off this capability in a
couple of ways. The first way to omit any
description in web.sitemap file or if you
remove these attributes from the file, the
SiteMapPath has nothing to display for the
tooltips on the page.

By: Adnan Amin (Lecturer/Software

Programmer) 40
<asp:SiteMapPath ID=”Sitemappath1” Runat=”server” ShowToolTips=”false”>
</asp:SiteMapPath>

By: Adnan Amin (Lecturer/Software

Programmer) 41
 References
◦ Professional ASP.net By Wrox.
◦ www.geoamins.com

By: Adnan Amin (Lecturer/Software

Programmer) 42