1. Introduction
Any website consisting of multiple pages requires some kind of navigation user interface, which is created in two steps. First, the logical structure of the site must be defined; then, user interface elements are added to allow users to move back and forth between various parts of the site structure. Before ASP.NET 2.0, developers were required to solve these two problems themselves. However, as of version 2.0, ASP.NET provides a simple way to define the structure of a site and includes a number of Web controls - specifically designed to display the site navigation user interface.
In the previous article, we analyzed how to create a Web.sitemap XML sitemap file through navigation Web controls and how to display site navigation information, which includes:
·SiteMapPath, which displays a breadcrumb (Home＞Electronics＞XBOX)
·TreeView, which Displays a collapsible vertically displayed tree, used to display the entire site map hierarchy
. Menu, which displays a horizontally or vertically aligned menu.
The previous article only provided a function and capability for the site map file and the navigation Web control. A rough introduction. In this section, we'll turn our attention to programmatically controlling site map information and examine the SiteMapPath navigation Web control in detail.
2. Site Map
The examples in this article use the site map created in Part One. You can see the exact syntax of the sitemap XML file in Part 1 or download it at the end of this article. A graphical representation of the site structure used in these examples is shown below:
3. Programmatically controlled site map
A site map is a collection of associated site map nodes. Typically, each sitemap node contains a title, a URL, and a description. The image shown above is an example of a sitemap, where each rectangle represents a sitemap node. ASP.NET does not require a specific format for specifying sitemaps, although it does provide the default option of using an XML format file. (See Part 1 for details on XML files.)
ASP.NET provides a class called SiteMap - which provides read-only, programmatic access to the site map. This class is used internally by two controls, which we will analyze later in this article:
SiteMapPath - Generates a breadcrumb based on the location of the visited page and its site structure. Specifically, the SiteMapPath starts at the node returned by the SiteMap.CurrentNode property and traverses up the hierarchy to the root.
· SiteMapDataSource - This control creates a hierarchical data source - it maps the structure of the site map. In order to display site map information in another Web control, such as a TreeView or Menu, the Web control does not query the site map directly; instead, they bind to a SiteMapDataSource control - which is responsible for reading the site map structure.
The SiteMap class has two properties: RootNode and CurrentNode. Both properties return SiteMapNode instances. The SiteMapNode class represents a node defined in the site map and has properties that describe the node - Title, Url, and Description, as well as properties that control the hierarchy programmatically - ParentNode, ChildNodes, NextSibling, PreviousSibling, and so on.
You can use the SiteMap class in your own ASP.NET pages. For example, we can display Next, Previous and Up links on every page - just by adding three HyperLink controls to the main page of the site, plus a little bit of programming to check whether the CurrentNode has a NextSibling, PreviousSibling or ParentNode. Specifically, you will add the following markup to your main page:
[<asp:HyperLink ID="lnkPrev" runat="server">Prev</asp:HyperLink>] |
[<asp:HyperLink ID="lnkUp" runat="server">Up</asp:HyperLink>] |
[<asp:HyperLink ID="lnkNext" runat="server">Next</asp:HyperLink>]
The Page_Load event handler of the main page looks as follows:
If SiteMap.CurrentNode IsNot Nothing Then
'Set next/previous/up linkIf SiteMap.CurrentNode.PreviousSibling IsNot Nothing Then
lnkPrev.NavigateUrl = SiteMap.CurrentNode.PreviousSibling.Url
lnkPrev.Text = "< Prev (" & SiteMap.CurrentNode.PreviousSibling.Title & ")"
Else
lnkPrev.NavigateUrl = String.Empty
lnkPrev.Text = "< Prev"
End If
If SiteMap.CurrentNode.ParentNode IsNot Nothing Then
lnkUp.NavigateUrl = SiteMap.CurrentNode.ParentNode.Url
lnkUp.Text = "Up (" & SiteMap.CurrentNode.ParentNode.Title & ")"
Else
lnkUp.NavigateUrl = String.Empty
lnkUp.Text = "Up"
End If
If SiteMap.CurrentNode.NextSibling IsNot Nothing Then
lnkNext.NavigateUrl = SiteMap.CurrentNode.NextSibling.Url
lnkNext.Text = "(" & SiteMap.CurrentNode.NextSibling.Title & ") Next >"
Else
lnkNext.NavigateUrl = String.Empty
lnkNext.Text = "Next >"
End If
End If
This will add three hyperlinks Next, Up and Previous to every page that inherits from the main page, see the snapshot below.
4. Use the SiteMapPath control to display breadcrumbs.
The SiteMapPath control displays a breadcrumb - it is used to show users where they are in the site structure. The output of the SiteMapPath control is determined by the following three factors:
· the structure of the site, as defined by the site map,
· the page being visited, and
· the property values of the SiteMapPath control.
When a page with a SiteMapPath control is accessed, the SiteMapPath control attempts to convert the page's The URL maps to the url value of a sitemap node defined in the sitemap. If a match is found, the control will traverse the structure up to the root and produce the following output: RootNode>ParentNode>...>ParentNode>CurrentNode. The CurrentNode here is the title of the sitemap node - it is used to map the URL of the current page request; RootNode and ParentNodes are generated as hyperlinks if the sitemap node has a URL value defined in the sitemap. A SiteMapPath control in the "History Books" page (Books/History.aspx) will generate Home>Books>History, and also generate Home and Books in the form of hyperlinks, pointing back to Default.aspx and Books/Default.aspx respectively. . When accessing Books/Default.aspx, SiteMapPath generates Home>Books.
To be very clear, the output of SiteMapPath depends both on the sitemap itself and on the page being visited. The output of the SiteMapPath can be customized through the properties of this control. There are some properties in the standard Web control format - BackColor, Font, ForeColor, and so on - and there are some settings specific to SiteMapPath, including:
u PathDirection - can take one of two values, RootToCurrent (the default) or CurrentToRoot. When the value is RootToCurrent, the breadcrumb on the "History Books" page is generated as Home>Books>History; when the value is CurrentToRoot, the output will be History>Books>Home.
·PathSeparator - specifies the string used to separate each node in the breadcrumb; the default is >
·RenderCurrentNodeAsLink - a Boolean attribute - it specifies whether the CurrentNode should be generated as a link; the default is False.
·ParentLevelsDisplayed - an integer value - it can be used to limit the height of the tree structure displayed by the breadcrumb. By default, the value of this attribute is -1, which means there is no limit; setting its value to 1 will generate breadcrumb Books>History on the "History Books" page. The root is not included because the SiteMapPath control only traverses up to one parent - from "History" to "Book".
· ShowToolTips - If a sitemap node has a description value, then the description is displayed as a tooltip text for each breadcrumb node if this property is set to True (the default).
There are also style properties that can be used to set BackColor, Font, ForeColor, etc. - for various parts of the SiteMapPath control. You can use the NodeStyle property to customize the appearance of the nodes in the breadcrumb; you can use RootNodeStyle and CurrentNodeStyle to further customize the first and last nodes in the breadcrumb. Generally, the easiest and most aesthetically pleasing way to format the SiteMapPath control is to use its "Auto Format" wizard - this can be enabled via the control's sensitive tag.
5. Customize the generated output with templates
The SiteMapPath contains four templates - they allow further customization of the generated output. Templates allow you to mix static HTML markup, Web controls, and data binding syntax; if you have used DataList or Repeater controls before, you are already familiar with templates. Templates in ASP.NET 2.0 are basically the same as in ASP.NET 1.x, except that ASP.NET 2.0 introduces some new, more concise syntax for data binding expressions. For example, in ASP.NET 1.x, you must use the syntax <%# DataBinder.Eval(Container.DataItem, PropertyName) %> to get the value of a column. In ASP.NET 2.0, this old syntax can still be used, but you can optionally use the shorter version <%# Eval(PropertyName) %>.
By default, SiteMapPath generates root and parent nodes as regular hyperlinks so that when users click the link, they can quickly move back up the control hierarchy tree. However, you may want to do some server-side processing before sending the information back to the user - perhaps you want to record where the user is going or automatically save any changes they make to the page. This can be accomplished by using a template and generating the node as a LinkButton.
For example, if you only want to generate the root node of SiteMapPath as a LinkButton, you can use the following tag to add a <RootNodeTemplate> to the SiteMapPath control:
<asp:SiteMapPath ID="SiteMapPath1" runat="server" ＞
＜RootNodeTemplate＞
<asp:LinkButton ID="LinkButton1" runat="server"
Text='＜%# Eval("title") %＞'
CommandArgument='＜%# Eval("url") %＞'
OnCommand="LinkButton1_Command">
＜/asp:LinkButton＞
＜/RootNodeTemplate＞
</asp:SiteMapPath>
This tag adds a LinkButton control to the SiteMapPath - its Text property is assigned to the Title property of the corresponding SiteMapNode. When the LinkButton is clicked, a postback is caused and the control's Command event fires - this activates the LinkButton1_Command event handler. The SiteMapNode's Url property is passed to this event handler through the CommandArgument property. In this event handler, you can do any server-side processing required, and then direct the user to the page they requested through Response.Redirect(e.CommandArgument).
