Fundamentals of Navigation Controls


In addition to the two major platform features of master pages and themes targeted at simplifying user interface development, ASP.NET 2.0 also adds three new controls to aid in building navigational features into your Web applications, collectively called the navigation controls. Each of these controlsthe TreeView, Menu, and SiteMapPathare typically populated by an XML file named web.sitemap placed in the root of your application. This file contains the navigational structure of your site described using a predefined schema. The TreeView control provides a standard rendering of a hierarchical collection of items presented as a tree complete with collapsible and expandable nodes. The Menu control renders that same hierarchical data as a menu, with a wide range of options ranging from a static collection of links on a page to a completely dynamic DHTML menu that expands on demand. The SiteMapPath control is the simplest of the three; it displays the current page the client has navigated to, with links to parent pages in the navigational structure of the site to allow easy upward traversal of the site, a feature colloquially called "bread crumbs" in reference to its ability to take you back to where you were.

Each of these controls relies indirectly on the presence of a class called SiteMapProvider, which is an abstract class defining methods for retrieving the navigation information for a site, as well as indicating which node in the navigation information is currently active based on the URL the client has requested. The default SiteMapProvider implementation is the XmlSiteMapProvider, which looks for the web.sitemap file in the root of the application for its navigation information. Figure 2-10 shows sample displays of each of these three controls, along with their respective relationship to the web.sitemap file and the provider and data sources that supply the XML content to the controls. Note that the SiteMapPath control communicates directly with the SiteMapProvider, while the Menu and TreeView controls rely on a data source control which talks to the provider.

Figure 2-10. Navigation control architecture


To take advantage of these three navigation controls, you first need to set up a web.sitemap file that describes the navigational structure of your site. This XML file consists of a top-level siteMap element with siteMapNode elements as children, which can be nested as needed to describe the paths of navigation in your site. Listing 2-18 shows a sample web.sitemap file for a simple site. Note that the organization of these elements need not reflect the physical layout of your site (although they often will), but rather the way in which users navigate from page to page.

Listing 2-18. Sample web.sitemap file

<?xml version="1.0" encoding="utf-8" ?> <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >   <siteMapNode title="Home" url="~/Default.aspx"                description="Go To Home">     <siteMapNode title="Page1.aspx" url="~/Page1.aspx"                  description="Go to page 1" />     <siteMapNode title="Page2.aspx" url="~/Page2.aspx"                  description="Go to page 2" />     <siteMapNode title="Departments"  url="~/departments/default.aspx"                  description="Go To Departments page">       <siteMapNode title="Accounting"                    url="~/departments/accounting/default.aspx"                    description="Go to accounting">         <siteMapNode title="Admin"                      url="~/departments/accounting/admin/default.aspx"                      description="Go To accounting administration">           <siteMapNode title="Manage Staff"                url="~/departments/accounting/admin/managestaff.aspx"                description="Go to manage staff"/>           <siteMapNode title="News"                        url="~/departments/accounting/admin/News.aspx"                        description="Go to news"/>           <siteMapNode title="Projects"                   url="~/departments/accounting/admin/Projects.aspx"                   description="Go to projects"/>         </siteMapNode>         <siteMapNode title="Staff"                      url="~/departments/accounting/staff/default.aspx"                      description="Go To accounting staff">           <siteMapNode title="Kathy"                        url="~/departments/accounting/staff/kathy.aspx"                        description="Go To Kathy"/>           <siteMapNode title="Joe"                        url="~/departments/accounting/staff/Joe.aspx"                        description="Go To Joe"/>           <siteMapNode title="Lisa"                        url="~/departments/accounting/staff/Lisa.aspx"                        description="Go To Lisa"/>         </siteMapNode>       </siteMapNode>     </siteMapNode>  </siteMapNode> </siteMap> 

With the web.sitemap file in place and populated correctly, you can now add any of the three navigation controls to your site. The SiteMapPath control will work without any additional setup; you simply place it on the page and it queries the SiteMapProvider to retrieve the navigational data. The Menu and TreeView controls must be configured using a SiteMapDataSource control, which in turn will use the SiteMapProvider to retrieve the information. This extra level of indirection makes it possible to use both the Menu and TreeView controls for other tasks besides displaying navigation. Listing 2-19 shows a sample master page with all three controls in place laid out in a table. This example shows each control without any style attributes applied, but be aware that all three controls can be customized extensively to take on whatever appearance you need.

Listing 2-19. Sample master page with navigation controls

<%--File: SimpleSiteTemplate.master--%> <%@ Master Language="C#" %> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server">     <title>My site</title> </head> <body>     <form  runat="server">       <table>         <tr>           <td>               <asp:Menu                     runat="server"DataSource />               <asp:SiteMapDataSource                     runat="server" />           </td>         </tr>         <tr>           <td>             <asp:SiteMapPath  runat="server" />           </td>         </tr>         <tr>           <td>             <asp:TreeView  runat="server"                           DataSource />           </td>           <td>         <asp:ContentPlaceHolder               runat="server" />           </td>         </tr>         </table>     </form> </body> </html> 




Essential ASP. NET 2.0
Essential ASP.NET 2.0
ISBN: 0321237706
EAN: 2147483647
Year: 2006
Pages: 104

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net