Site Navigation
The three navigation Web server controls, SiteMapPath, Menu and TreeView, can work with an XML site map that you provide for your Web site, or a site map provided in a different format if you implement an alternative site map provider. Once you have created such a data source, these navigation Web server controls are able to automatically generate location and navigation information for users.
You can also use a TreeView control to display other structured data, but it really comes into its own with site maps, and gives you an alternative view of navigation information.
The navigation Web server controls are shown in the following table.
| Control | Description |
|---|---|
| SiteMapPath | Displays breadcrumb-style information, allowing users to see where they are in the structure of a site and navigate to parent areas. You can supply various templates, such as NodeStyle and CurrentNodeStyle to customize the appearance of the breadcrumb trail. |
| Menu | Links to site map information via a SiteMapDataSource control, and enables a view of the complete site structure, appearance customized by templates. |
| TreeView | Allows the display of hierarchical data, such as a table of contents, in a tree structure. Tree nodes are stored in a Nodes property, with the selected node stored in SelectedNode. Several events allow for server-side processing of user interaction, including SelectedNodeChanged and TreeNodeCollapsed. This control is typically data-bound. |
Open table as spreadsheet To provide a site map XML file for your site, you can add a site map file (.sitemap) using the Web site - Add New Item menu item. You link to site maps via providers. The default XML provider looks for a file called Web.sitemap in the root of your site, so unless you are going to use a different provider, you should accept the default file name supplied.
A site map XML file contains a root <siteMap> element containing a single <siteMapNode> element, which in turn can contain any number of nested <siteMapNode> elements.
Each <siteMapNode> element uses the attributes shown in the following table.
| Attribute | Description |
|---|---|
| Title | Page title, used as the text for links in site map displays |
| url | Page location, used as the hyperlink location in site map displays |
| Roles | The user roles that are allowed to see this site map entry in menus and so on |
| description | Optional text used for tooltip pop-ups for site map displays |
Once a site has a Web.sitemap file, adding a breadcrumb trail is as simple as putting the following code on your page:
<asp:SiteMapPath Runat="server" /> This will use the default provider and the current URL location to format a list of links to parent pages.
Adding a menu or tree view menu requires a SiteMapDataSource control, but again this can be very simple:
<asp:SiteMapDataSource Runat="server" /> If you are using a custom provider, the only difference is that you can supply the provider ID via a SiteMapProvider attribute. You can also remove upper levels of the menu data (such as the root Home item) using StartingNodeOffset; remove just the top-level link using ShowStartingNode=”False”; start from the current location using StartFromCurrentNode=”True”; and override the root node using StartingNodeUrl.
The data from this data source is consumed by Menu and TreeView controls simply by setting their DataSourceID to the ID of the SiteMapDataSource. Both controls include numerous styling properties and can be themed as you see later in this chapter.
Navigation in PCSDemoSite
The site map for PCSDemoSite is as follows:
<?xml version="1.0" encoding="utf-8" ?> <siteMap> <siteMapNode url="~/Default.aspx" title="Home"> <siteMapNode url="~/About/Default.aspx" title="About" /> <siteMapNode url="~/MRB/Default.aspx" title="Meeting Room Booker" roles="RegisteredUser,SiteAdministrator" /> <siteMapNode url="~/Configuration/Default.aspx" title="Configuration" roles="RegisteredUser,SiteAdministrator"> <siteMapNode url="~/Configuration/Themes/Default.aspx" title="Themes" roles="RegisteredUser,SiteAdministrator"/> </siteMapNode> <siteMapNode url="~/Users/Default.aspx" title="User Area" roles="SiteAdministrator" /> <siteMapNode url="~/Login.aspx" title="Login Details" /> </siteMapNode> </siteMap> The PCSDemoSite Web site uses a custom provider to obtain information from Web.sitemap - necessary because the default provider ignores the roles attributes. The provider is defined in the Web.config file for the Web site as follows:
<configuration xmlns="http://schemas.microsoft.com/.NetConfiguration/v2.0"> ... <system.Web> ... <siteMap defaultProvider="CustomProvider"> <providers> <add name="CustomProvider" description="SiteMap provider which reads in .sitemap XML files." type="System.Web.XmlSiteMapProvider, System.Web, Version=2.0.3600.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" siteMapFile="Web.sitemap" securityTrimmingEnabled="true" /> </providers> </siteMap> ...
The only difference between this and the default provider is the addition of securityTrimmingEnabled= ”true”, which instructs the provider to supply data for just those nodes that this current user is allowed to see. This visibility is determined by the role membership of the user, as you see in the next section.
The MasterPage.master page in PCSDemoSite includes SiteMapPath and TreeView navigation displays along with a data source, as follows:
<div > <h1><asp:literal runat="server" text="<%$ AppSettings:SiteTitle %>" /></h1> <asp:SiteMapPath Runat="server" Css /> </div> <div > <div > <asp:TreeView runat="server" DataSource ShowLines="True" /> </div> <br /> <br /> <asp:LoginView Runat="server"> <LoggedInTemplate> You are currently logged in as <b><asp:LoginName Runat="server" /></b>. <asp:LoginStatus Runat="server" /> </LoggedInTemplate> </asp:LoginView> </div> <div > <asp:ContentPlaceHolder Runat="server" /> </div> </form> <asp:SiteMapDataSource Runat="server" />
The only point to note here is that CSS classes are supplied for both SiteMapPath and TreeView, to facilitate theming.
