4.8. Add Navigation to Your Site
Most web sites include some type of navigation bar that lets users move from one page to another. In ASP.NET 1.0 and 1.1, it's easy enough to create these navigation controls, but you need to do so by hand. In ASP.NET 2.0, a new sitemap feature offers a much more convenient pre-built solution. The basic principle is that you define the structure of your web site in a special XML file. Once you've taken that step, you can configure a list or tree control to use the sitemap datagiving you a clickable navigation control with no code required.
Note: ASP. NET 2.0 provides new navigation features that let you create a sitemap and bind it to different controls.
4.8.1. How do I do that?
The first step in using ASP.NET's new sitemap feature is to define the structure of your web site in an XML file named web.sitemap. To add this file to your site in Visual Studio, right-click the Solution Explorer and select Add New Item. Select the Site Map file type and click Add.
The first ingredient you need in the web.sitemap file is the root <siteMap> tag:
In the <siteMap> tag, you add one <siteMapNode> child element for each entry you want to show in the sitemap. You can then give a title, description, and URL link for each entry using attributes. Here's an example:
<siteMapNode title="Home" description="Home Page" url="default.aspx" />
Notice that this tag ends with the characters /> instead of just >. This indicates that it's an empty elementin other words, it doesn't contain any other elements. However, if you want to build a multi-level sitemap, you have to nest one <siteMapNode> element inside another. Here's an example:
<siteMapNode title="Home" description="Home Page" url="default.aspx" > <siteMapNode title="Products" description="Order Products" url="produ.aspx" /> </siteMapNode>
Example 4-5 shows a sitemap with six links in three levels.
Example 4-5. A multi-level sitemap
<?xml version="1.0" ?> <siteMap> <siteMapNode title="Home" description="Home" url="default.aspx"> <siteMapNode title="Personal" description="Personal Services" url="personal.aspx"> <siteMapNode title="Resume" description="Download Resume" url="resume.aspx" /> </siteMapNode> <siteMapNode title="Business" description="Business Services" url="business.aspx"> <siteMapNode title="Products" description="Order Products" url="products.aspx" /> <siteMapNode title="Contact Us" description="Contact Information" url="contact.aspx" /> </siteMapNode> </siteMapNode> </siteMap>
Once you create a sitemap, it's easy to use it on a web page, thanks to the new SiteMapDataSource control. This control works much like the other data source controls discussed in "Bind to Data Without Writing Code." However, it doesn't require any properties at all. Once you add the SiteMapDataSource, ASP.NET automatically reads the web.sitemap file and makes its data available to your other controls:
<asp:SiteMapDataSource Runat="server" />
Now you can bind just about any other control to the SiteMapDataSource. Because sitemaps are, by default, hierarchical, they work particularly well with the new treeView control. Here's a treeView control that binds to the sitemap data:
<asp:TreeView Runat="server" DataSource Font-Names="Verdana" Font-Size="8pt" ForeColor="Black" ImageSet="BulletedList" Width="149px" Height="132px"> </asp:TreeView>
The resulting treeView doesn't just show the sitemap, it also renders each node as a hyperlink that, if clicked, sends the user to the appropriate page. Figure 4-11 shows a content page that's based on a master page that uses a treeView with a sitemap. (Refer to the lab "Achieve a Consistent Look and Feel with Master Pages" for more information about master pages.)
Figure 4-11. Using a sitemap in a master page
4.8.2. What about...
...customizing the sitemap? There's a lot more you can do to control the look of a site as well as its behavior. Here are some starting points: