Skip Navigation LinksASP.Net 2.0 Training : ASP.Net:Site Navigation
Banner for ASP.Net 2.0 training classes in Visual Basic 2005 

Skip Navigation Links
Visit my other site:

certification training

Free Flash tutorials and training

Free Dreamweaver Video Tutorials

Free PHP Training

Visual Basic Windows Training




If you like this site please link to it


Site Navigation


Site Structure- logical categories of a website’s pages

Create the site’s structure
Then create the site’s navigation

A Site’s navigation is used to assist user to browse your site
ASP.Net navigation controls:

  • Menu
  • Treeview
  • breadcrumbs

ASP.Net uses a sitemap to document the site’s structure
A sitemap is an XML file
It defines the logical sections of the site
And may tie each section to a URL

After you have your sitemap you can use several ASP.Net controls to navigate the site

  • SiteMapPath
    • Create a breadcrumb
      • A single line of text showing the user their location in the website structure
  • TreeView
    • Provides a hierarchical view of the site’s structure
    • Renders as an expandable/cdollapsible tree
  • Menu
    • Menu items and subitems

Updating the sitemap immediately updates the navigational controls

Define the sitemap

Try this in Visual Studio 2005
  • Open Visual Studio
  • Add a new webform
  • Name it navigate.aspx
  • Add 4 more aspx pages, name them page1.aspx, page2.aspx,page3.aspx,page4.aspx
  • Add text to each page identifying it
  • Add a new item
  • Select sitemap, it should name it web.sitemap

Site Map
Put the sitemap in the root directory.
You need to edit this xml file manually

It has a sitemap element
Inside are a couple siteMapNode elements

Each siteMapNode has a title, URL, and description attribute
Add a siteMapNode for each page

Notice the navigate siteMapNode is surrounding the others

A sitemap can be set up in spite of which directories a page may be in

Using Breadcrumb Navigation


The siteMapPath control displays a breadcrumb
You can use it to show the user where they are in the site
It also allows the user to move back to higher levels
You must have a sitemap for this control

  • Drag a siteMapPath control to page1.aspx
  • Test it
It displays a breadcrumb showing where in the site the user is

  • Add a siteMapPath control to each page


Customize the appearance

  • Change the path separator property to a pipe symbol

                   


There are 3 types of nodes
  • Root Node
    • Each siteMapPath has one root node
  • Current Node
    • Each siteMapPath has one Current node
    • The current node matches the page the user is on
  • General Nodes
    • Rest of the nodes
  • Click the smart tag on the siteMapPath control
  • Select auto Format
  • Pick a different format

            



TreeView

TreeView allows the user to navigate through the entire site
A treeview control requires a siteMapDataSource control which allows the control to automatically get the data for navigation

Each node in the tree is rendered as a hyperlink to the particular page

  • Add a SiteMapPathControl to the page
  • Add a treeView control to the page
  • Using the smart tag pick the SiteMapDataSource as the dataSource
  • Test it

There are 4 types of nodes in a treeview

  • Root Node
    • Each siteMapPath has one root node
  • Selected Node
    • The current node matches the page the user is on
  • Parent Nodes
    • A node that has children besides the root node
  • Leaf Nodes
    • Nodes that have a parent but no children

Customizing

Click the autoformat option in the smart tag of the treeView
There are also several property that you can attach a style sheet to

  • nodeStyle
    • default style of all nodes in the treeView
  • HoverNodeStyle
    • Style spplied when the user hovers his mouse over a  certain node
  • levelStyles
    • allows you to apply style info for certain levels of the treeview

Other properties

collapseImageToolTip

Tooltop shown to the user hovering over expand and collapse.You can use {0} in the property to use the nodes text

CollapseImageURL

Image URL for the collapse icon

ExpandImageURL

Image URL for the expand icon

NoExpandImageURL

Image URL for leaf icon

ImageSet

Package of images can be used to define treeView images

NodeIndent

Number of pixels to indent, 20 by default

NodeWrap

Boolean property. If node’s text will wrap. Default is false

ShowExpandCollapse

Boolean. If expand and collapse icons are show, true by default

ShowLines

Boolean. If lines are drawn between each node

The imageSet has a list of packaged images to display next to icons

  • Choices like:
    Custom
  • XPFileExplorer
  • Msdn
  • Windowshelp
  • Simple1 and 2
  • Bulletedlist 1,2,3,4
  • Arrows
  • News
  • contacts
  • Inbox
  • events
  • faq

 

 

Each provide different images for expand, collapse, for nonLeaf nodes and images for nonexpendable and nonCollapsible leaf

You can provide your own images by setting it to custom and providing the URLs to the custom images in the CollapseImageURL, ExpandImageURL and noExpandImageURL properties

Menus

The menu will use the sitemap to display each item and it uses submenus for each item in a lower hierarchy

  • Add a menu control
  • Configure it to the siteMapDataAccess Control

 

The menu control has both static and dynamic parts
The static part is always shown
The dynamic part is shown when the user interacts with it

StaticDisplayLevels property can be used to control how many levels display

  • Set the staticDisplayLevels to 2
  • Set the orientation to horizontal

 

 

 

DisappearAfter property controls how long the submenu appears after the mouse leaves it. The default is 500 for .5 seconds

Appearance of the Menus
The names of the properties start with either static or dynamic

Menu Control Properties

DynamicEnableDefaultPopOutImage
StaticEnableDefaultPopOutImage

If an image is displayed to show an item is a submenu. Default is true

DynamicItemFormatString
StaticItemFormatString

Text of the menu Item. You can use {o} to include the menu item’s sitemap value

DynamicPopOutImageTextFormatString
StaticPopOutImageTextFormatString

Tooltip to display for the pop out. Can use {0}

DynamicPopOutImageURL
Static PopOutImageURL

url of your image if you want to use an image instead of an arrow

StaticSubMenuIndent

Indentation between static menu item and its static submenu

Orientation

Vertical or horizontal

DynamicHorizontalOffset
DynamicVerticalOffset

Offset in pixelsbetween the right border of a menu and the left border of its submenu item

ItemWrap

If text in a menu item should be wrapped. Default is false


      ASP.Net 2.0 tutorials & training