Home | HTML | Asp.Net | HTML Probe | .Net Probe
   
 www.solvingera.com 
  Contact Us |Sitemap
  
 

Site Navigation

Skip Navigation LinksHome>Asp Home>Navigation Controls

A website is a collection of interconnected Web Pages. User need to navigate between these Web Pages to get the required information. Navigation control provided by Asp.Net allows users to navigate through the Web Pages. Site maps are the important control provided by the asp.net to navigate a web site.

Site map navigation control

Site map navigation control is used to define your entire web site in an XML file.
XML-Based site map is an XML file that describes the structure of your website. It stores links to all the web pages on a website. To create a site map file for your application, you need to add a site map or an XML file with the .sitemap extension to your application. It is located in the application root directory. A sitemap file contains <sitemap> element. Only one <siteMap> element can exist in the file.

A Simple Code Snippet:

<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<
siteMapNode title="HomePage" description="Home Page" url="Default1.aspx">
<
siteMapNode title="News" description="The Largest News channel" url="NewsChannel.aspx" />
</
siteMapNode>
</
siteMap>


Most common attributes in the <siteMapNode> element are :
  • title : The title attribute provides a textual description of the link.

  • description : The description attribute is the short text about the page information.

  • url : The url attribute describes where the file is located in the solution.

SiteMapPath Server Control

SiteMapPath Server Control uses the .sitemap extension file (XML File). The navigation path of the website displayed in the SiteMapPath control is known as the breadcrumb. A breadcrumb displays the user’s current location and a link to the home page.

Some Properties of the SiteMapPath Server Control are:

  • PathSeparator : The PathSeparator is used to separate each link level in the path by placing a special character (<,>,*,-) between each level. By default, the SiteMapPath control uses a greater than sign (>) to separate the link elements.

  • ShowToolTips : A tooltip is the text that appears onscreen when an end user hovers the mouse over one of the links in the SiteMapPath control. You can turn off the display of tooltips by setting the ShowToolTips property to False.

  • ParentLevelsDisplayed : It is used to set the maximum number of levels above the page. By default it sets to -1.

  • PathDirection : It is used to set the direction of the navigation path. You can set the direction as RootToCurrent (default) or CurrentToRoot.

  • RenderCurrentNodeAsLink : Sets this property to true, so that the current node text on the web page will appear as a hyperlink not as plain text.


Some important Properties of SiteMapPath Control’s Child Elements:
  • CurrentNodeStyle : CurrentNodeStyle is used to set the property of the node corresponding to the currently displayed page.

  • CurrentNodeTemplate : Sets a control template construction to the link in the SiteMapPath navigation for the currently displayed page.

  • NodeStyle: Applies styles to all links in the SiteMapPath navigation.

  • NodeTemplate: Sets a control template to use for all functional nodes of a site navigation path.

TreeView Server Control

The TreeView server control is a rich server control to display a hierarchy of data in the form of nodes and subnodes. All the node or subnodes are represented as links, so that you can navigate to a new page.

There are two ways to use the TreeView control on a web page.
  1. Add a SiteMapDataSource control or XmlDataSource control to the Web page. Next, you need to set the DataSourceID property of the TreeView control to the ID of the existing SiteMapDataSource or XmlDataSource control.

  2. You can also use a TreeView Server Control by adding Node or Subnodes using Edit Nodes option.
Some important property of the TreeView Control
  • NodeIndent : Sets the distance between each level of nodes in pixels.

  • ShowLines : Add lines that connect every node.

  • ImageSet : Sets the group of image to use the TreeView control.

  • ExpandDepth: Sets the number of levels that are explained when a TreeView control is displayed for the first time.

  • Target: Sets the target window or frame in which the web page content that is associated with a node is to display.

Menu Server Control

Menu server control is another control that supports hierarchical data. Menu control is used to display navigational structure of a website in the form of main menu or submenus.

There are two ways to use the Menu Server Control on a web page.
  1. Add a SiteMapDataSource control or XmlDataSource control to the Web page. Next, you need to set the DataSourceID property of the Menu control to the ID of the existing SiteMapDataSource or XmlDataSource control.

  2. You can also use a Menu Server Control by adding main menu or Submenus using Edit Menu Items option.
Some important property of the Menu Control

Static items: static items are the items that appear when the page is generated.
  • <StaticHoverStyle> : Sets the style of the static item in the menu when the mouse pointer is positioned over it.

  • <StaticItemTemplate> : Sets the template that contains the custom content to render for a static menu.

  • <StaticMenuItemStyle>: Sets the appearance of the menu items in a static menu.

  • <StaticMenuStyle>: Sets the appearance of the static menu.

  • <StaticSelectedStyle>: Sets the appearance of the static menu item selected by the user.

  • <StaticPopOutImageUrl>: Sets the URL to an image displayed to indicate that a static menu item has a submenu.
Dynamic items: Dynamic items (links) are the items that appear dynamically when the user hovers the mouse over the static items.
  • <DynamicHoverStyle>: Sets the style of the dynamic item in the menu when the mouse pointer is positioned over it.

  • <DynamicItemTemplate>: Sets the template that contains the custom content to render for a dynamic menu.

  • <DynamicMenuItemStyle>: Sets the appearance of the dynamic items in a dynamic menu.

  • <DynamicMenuStyle>: Sets the appearance of the dynamic menu.

  • <DynamicSelectedStyle>: Sets the appearance of the dynamic menu item selected by the user.

   
         
         
  
DMCA.com Protection Status
Design & Maintain By solvingera group| solvingera.com © 2013-2014 | all right reserved |Privacy Policy | Back to top