Project ASPX 8: Navigating in a Website

1

Create Navigation ASP.Net Control◦ SiteMapPath

◦ Menu

◦ TreeView

◦ SiteMapDataSource

2

3

4

5

Breadcrumbs

6

TreeView

7

Need a SiteMap XML file & a SiteMapDataSource to make navigation controls work

◦ This is an XML file

Root tag -- <siteMap> </siteMap>

Nodes -- <siteMapNode> </siteMapNode>

Explains hierarchy of the website

8

File -> New -> Page

9

Need a SiteMapPath to make navigation controls work

◦ Highest siteMapNode in the XML file is the home page

◦ The menu hierarchy is based upon the xml & NOT on the folder structure

10

Menu control◦ Asp.treeview

Create Web Pages

Load Data◦ SiteMap XML file

Develop Navigation◦ Tree View

◦ Menu

◦ SitePathMap

11

For practice, create an empty website

Add empty .aspx pages

◦ to understand the navigation elements

12

For practice, create an empty website

Add empty .aspx pages

◦ to understand the navigation elements

13

Update all of the pages … ◦ to visualize the

navigation elements Change the

background colors

Add text to identify the pages

◦ File – Properties

14

Update all of the pages ◦ to visualize the

navigation elements Change the

background colors

Add text to identify the pages

◦ File – Properties

15

Create a SiteMap XML file◦ File –> New –> Page

16

Create a SiteMap XML file◦ url is the name of the page

◦ Title is anything

it is the text for the link in the navigation element

◦ Description is a description of the page

17

Create a SiteMap page◦ Watch out for the XML tag structure!!

◦ Two ways … <xxxxx> </xxxxx> or

<xxxxx />

18

Save file◦ Web.sitemap

◦ MUST be in the ROOT directory!!!

19

Drag the TreeView ASP.Net Navigation Control onto the web page

20

Select the Data Source◦ Choose the sitemap

21

Select the Data Source◦ Choose the SiteMap

22

Notice the pages now show!

23

Notice the pages now show!

24

Select AutoFormat from the menu tasks

25

Select AutoFormat from the menu tasks

26

Save file◦ Web.sitemap

27

Drag onto the web page

Create “breadcrumb”

28

Add the Menu Control to the web page

29

AutoFormat

30

Dynamic View◦ Flyout effect

31

32

Menu Control◦ Previous lessons discussed

menu control and sitemap data source

◦ Now, modify the menu

Horizontal / vertical

33

Menu Control◦ Modify the menu

Horizontal / vertical

Levels displayed

34

Menu Control◦ Must be at the

root level

◦ Can override so you can have multiple sitemaps

◦ Beyond this course!!

35

Project ASPX 8: Navigating in a WebsiteCompleted

36