The left-hand section of the Master Page will contain a navigation bar that provides links to other pages in the PPQ site. You will add this navigation bar and other navigation features next. ASP.NET can automatically generate sets of navigation links in a range of visual formats. This section of the chapter shows you how.
1.
With the skeletonproject open in VWD, locate the Menucontrol within the Navigation section of the Toolbox and drag and drop it onto the editor window directly after the opening <div> tag, as shown in Figure 2-14.Figure 2-14: Dragging and dropping the Menucontrol
2.
Switch to Design view, and you will see the new Menucontrol (you can delete the text “Links” from this section of the page now). Click on the small arrow that appears at the top right of the control when you move the mouse pointer over it. This opens the Menu Tasks pane, where you will see the Edit Menu Items. . . option (see Figure 2-15).Figure 2-15: Menu tasks
This option opens a useful Menu Item Editor dialog that allows you to create a list or collection of links for use when ASP.NET generates the menu at run time. You can also open this dialog by selecting the Itemsproperty in the Properties windows when the Menucontrol is selected within the editor window.
Figure 2-16 shows some of the properties of one of the links in a menu you could create for the PPQ site. However, the problem with using this approach is that the list of page links created this way is only available to the Menucontrol. Instead, you will use an XML-formatted file that defines the links to the pages within the PPQ site, which other controls can access as well.
3.
In the example application, you will be using an XML sitemap file to define the links for the navigation controls in the page. This means that you also need a SiteMapDataSourcecontrol, which interfaces the Menu— and any other navigation controls — to the XML sitemap file. You can drag a SiteMapDataSourcecontrol from the Data section of the Toolbox onto the editor window, but an easier way to add this control is to use the Menu Tasks pane you saw earlier in step 2. Click on the small arrow that appears at the top right of the Menucontrol when you move the mouse pointer over it to open the Menu Tasks pane. In the Menu Tasks pane, open the drop-down list for Choose Data Source and select the <New Data Source. . .> option (see Figure 2-17).Figure 2-17: Choose Data Source drop-down list
4.
This opens the Data Source Configuration Wizard. For a SiteMapDataSourcecontrol, this Wizard offers two options: Site Map or XML File. In fact, these are very similar options — both are XML files containing a list of links for the site. However, the option you need is the first. As you can see from the text in the dialog, this option assumes that the data for the control will come from a file located in the root folder of the application (see Figure 2-18). The name of this file must be Web.sitemap.Figure 2-18: Data Source Configuration Wizard
The examples include a Web.sitemapfile containing the links used in the PPQ site. If you want to try creating your own Web.sitemapfile, select New File from the File menu, and select the Site Map option in the Add New Item dialog that appears. This creates a template XML file that you can extend and populate to match your requirements. Open the Web.sitemapfile provided with the examples to see the way that it defines the navigation links.
5.
By default, when using a SiteMapDataSourcecontrol with a sitemap file, the Menucontrol only displays a single link — the one defined as the root of the sitemap file. In the examples, this is the “Home” link. Instead, you want the menu to show the next level of links as well, so that the “Our Menu,” “Order,” “Delivery,” “Links,” and “Contact” links are always visible. To achieve this, select the menu control in the page and go to the Properties window. Change the value of the StaticDisplayLevelsproperty from the default of 1to 2so that the second level of links also becomes static content (see Figure 2-19).Figure 2-19: Enabling the second level of links
Notice that the DataSourceIDproperty for the Menucontrol indicates where the data to populate the control comes from. It is set to SiteMapDataSource1, which is the ID of the SiteMapDataSource
control that the Data Source Configuration Wizard added to the page. You can switch to Source view any time to see what the various configuration dialogs, Properties windows, and wizards are actually doing — which helps you to understand how ASP.NET works and how common combinations of con- trols (such as a data source control and a data display control) are interlinked. You saw this interaction in Chapter 1 with the GridViewcontrol and a SqlDataSourcecontrol, and you will see it again many times throughout this book.
6.
Now open the Menu Tasks pane for the Menucontrol again, and select Auto Format. In the Auto Format dialog, choose a scheme for the menu control formatting, as shown in Figure 2-20.Figure 2-20: Auto Format dialog
7.
Finally, go back to the Navigation section of the Toolbox and drag a SiteMapPathcontrol onto the page, dropping it into the table cell at the right-hand side of the page below theContentPlaceHoldercontrol. Click on the small arrow button to open the SiteMapPath Tasks
pane, and select Auto Format. . . (see Figure 2-21). In the Auto Format dialog, select the same scheme as you did for the Menucontrol. The SiteMapPathcontrol implements the “bread- crumb trail” navigation control, taking its data from the Web.sitemapfile in the root folder of the application.
Figure 2-21: SiteMapPath Tasks pane
That wraps up the task of creating the navigation links for now. You will come back to this throughout the book as you build more pages and implement new features. However, the Master Page as it stands now will be sufficient for the tasks of starting to create some Content Pages. Remember that the whole idea of using a Master Page is that you can change it over time to update your site, and all the Content Pages will automatically reflect these changes.