ASP.NET 2.0 comes with three types of site-navigation controls: Menu control, SiteMapPath control, and TreeView control. They can all draw the navigational information from an XML file named Web.sitemap, which is saved in the root of your site. The Menu control is the Dynamic HTML type of menu that you might be familiar with. When you point to a link that has child pages below it, a secondary menu appears. The TreeView control is similar to what you will find at a site such as msdn.microsoft.com and is appropriate for organizing very large sites that have lots of hierarchical information. The SiteMapPath control provides what you might be familiar with as breadcrumb navigation, where it will indicate the page the browser is currently showing and pages in the navigation structure that come before and after it.
Each of these types of site-navigation controls can be inserted into your page from the ASP.NET Controls/Navigation group in the Toolbox task pane.
In this exercise, you will replace the original navigation in the master page that you created in the previous exercise with an ASP.NET navigation control, and you will also add a node to the sitemap file so that you can get a feel for editing a sitemap’s XML structure.
Note
USE the CH11 sample site you modified in the previous exercise.
OPEN the CH11 site if it isn’t already open, and display the my.master page.
Troubleshooting
In order to follow the steps in this exercise, you will need to have completed the preceding exercise, specifically creating the files my.master and test.aspx.
In the Design pane, click Home in the navigation area at the top of the page. Click the <div#navigation> arrow on the quick tag selector bar, and then click Select Tag Contents to select all of the contents of this <div> tag.
In the Toolbox task pane, expand ASP.NET Controls, and then expand Navigation. Double-click Menu to insert an ASP.NET Menu control into the page and to replace the code you selected in step 1.
In the Menu Tasks pop-up window, click AutoFormat.
The Auto Format dialog box opens.
In the Menu Tasks pop-up window, in the Choose Data Source box, click New data source. In the Data Source Configuration Wizard, click Site Map.
Click OK in the Data Source Configuration Wizard to set your changes and close the wizard. In the Tag Properties task pane, scroll down to the Behavior group, and type 2 into the StaticDisplayLevels box.
Scroll down to the Layout group, and in the Orientation list, click Horizontal.
Click Save to save the changes you made to the master page.
In the Folder List, click the text.aspx page that you made in the previous exercise. On the toolbar, click the Preview button to start the ASP.NET Development Server and preview your page in a browser. Although it’s not attractive, pay attention to the functionality of the site-navigation control.
The page that is displayed in the browser has a link on the navigation bar that’s formatted differently, and when you point to pages that have child pages below them, a fly-out menu appears. All of the visual aspects of this site-navigation control can be modified very easily by using the Tag Properties task pane, and you can change the colors and appearance to match the page template if you want to.
Close the browser window, and switch to Expression Web 2.
Because the site map file was already provided for you, the next steps will show you how to create a new page and add it to the site map file.
On the File menu, point to New, and then click Create from Master Page. In the Select a Master Page dialog box, click Browse, click my.master, click Open, and then click OK to create a new page.
On the toolbar, click Save. In the Save As dialog box, name the page newlink.aspx, and then click Save.
Now you’ve created a new page, and you’re ready to add it to the navigation of your site.
In the Folder List, double-click the file Web.sitemap to open it.
Type the following code just above the closing </siteMapNode> tag at the bottom of the page:
<siteMapNode url="newlink.aspx" title="My New Link" description="Just Added" />
Click Save to save your change to the site map file. Switch back to the file you created in steps 11 and 12 (newlink.aspx), and click the Preview button.
Your new page is now represented on the site-navigation control. Consider that the only file you saved was the Web.sitemap file. The addition of this link in the navigation control was done automatically by ASP.NET 2.0 and the ASP.NET Development Server.
Consider this exercise: with nothing but an easily updated XML site map file, a few clicks of the mouse, and a couple of adjustments in the Tag Properties task pane, you’ve generated an easily styled and very usable menu for every page in your site.
Creating this type of menu by other means would have required substantial hand coding of JavaScript or the use of a third-party application to build the menu.
As you use these ASP.NET site-navigation controls, you should experiment with modifying the properties by using the Tag Properties task pane. There are literally limitless combinations of color, action, placement, and orientation that you can achieve by editing the properties of the entire menu or specific levels by using the Tag Properties task pane.
Adding, removing, or modifying pages within the sitemap is done in one XML file. No other pages need to be edited, but the change shows on every page that’s attached to the master page that contains the control. These site-navigation controls can open a whole new world to you in your site design workflow.