Easy Site Navigation

1. Easy Site Navigation Getting organized, staying organized Creating custom site-navigation controls Using Menu, TreeView, and SiteMenuPath controls Make life easier with Web User Controls

2. Introduction • If your site is to be successful, it must be easy to navigate. • If the Web site is a large, navigating between pagesusing nothing but hyperlinks can be tedious for the user. • Visual Web Developer’s Site Navigation controls provide a great way to providean easy, consistent navigational structure for your site. • You can define all the links in one place. That way, when you add a new pageto the site (or delete a page), you don’t have to worry about going back to change the links. Just keep the links correct in one file. • You have to think about how you’re going to organize yourWeb site’s content. Then you have to create area of navigation. Finally you might need to create a separate file for these areas.

3. A good Site Organization Design

4. Using Site-Navigation Controls-MENU-Control • The two main VWD controls for sitenavigation are Menu and TreeView. • TheMenu control offers a simple drop-down menu of navigational links, as shown in figure • When the Menu control is first displayed on the page ina browser, only the Home link and the arrow symbol are visible. The Menu control isgood for a small menu that you want to keep out of the way most of the time.

5. TreeView Control • The TreeView control shows the navigational structure in a collapsible tree,as in the Figure. • The user can click + and – signs to(respectively) expand and collapse categories. • The TreeView control is best for handling largernavigationaltasks.

6. Menu and TreeView –(continue) • Both the Menu and TreeView commands can be used with either static dataor dynamic data. • When using a control with static data, the navigationalstructure of the site is defined as part of the control. The method is easier inthat you can define the whole menu structure just by filling in the blanks indialog boxes. • With dynamic data, you store data about the site’s structure in a file, called asite map, that’s external to the control. The advantage to this approach isthat the site’s navigational structure is stored in one place. • So if you need tochange the navigational structure of the site, you just have to change theexternal file, not every control on every page.

7. Using the TreeView and Menu Controls • The TreeView and Menu server controls are both in the Navigation categoryof the Toolbox. • They’re so similar that reading instructions is sufficientfor you to use either. • We first describe how to use the controlswith static data (without a site map that’s defined in an external file). • This isthe easiest way to create a map, especially if it’s a small map that’s not likelyto change often. (And when you know nothingabout XML.) • The only real drawback to this method is that it’s tedious. And if you put thecontrol on a specific Web page, you’d have to re-create the control on (orcopy and paste the control to) other pages. • Unless you put the control in aMaster Page, in which case it will appear on all pages that use the MasterPage — which may not be what you’re looking for. • If you don’t want to put the navigation control on a Master Page, you couldput it in a Web User Control and use it as needed on pages throughout yoursite. We will talk about Web User Controls

8. Using the TreeView and Menu Controls--Continue • So the first step is to open the page on which you want to place the Menu orTreeView control. Make sure you’re in Design view. Then follow these steps: • Drag either a Menu or TreeView control from the Toolbox onto thepage. • On the Common Tasks menu, click Edit Menu Items.(The Menu Item Editor dialog box opens). • Use the Menu Item Editor to define each menu item. • Click OK.

9. Using the TreeView and Menu Controls--Continue

10. How to Use the Menu Editor • To use the Menu Item Editor, use toolbar buttons at the top of the Items listto insert options to appear on your menu. • You’ll need a root element first, soclick the Add Root Item button in the toolbar to add a new root. At first, theitem is just named New Item. • Next you have to set the following properties in the Properties column of thedialog box: • NavigateUrlL: Click this property, and then click the Build button thatappears. Use the Select URL dialog box that opens to navigate to thepage that the link should open, and then click OK. • Text: Type the text of the menu item. • ToolTip: Type the ToolTip text for the item.

11. Example of the Menu Editor

12. How to Add Child Pages • To add a child page item under the root item, click the Home item at the topof the left column, and then click the Add a Child Item button in the toolbar(second button from the left). Another New Item appears, indented under thefirst item. • As before, you want to set the NavigateUrl property to the page the menuitem opens, the Text to the item as you want it to appear in the menu, andoptionally a ToolTip. Just keep repeating the process until you’ve defined allyour items. • Use other buttons in the toolbar to work with items you’ve already put in themenu. Click on the item you want to change, and then use the Delete (X), up,down, left, or right arrow buttons to reposition the item, if necessary.

13. Example – How to Add A Child Page • Just create the last child element, andchange its Text property to show “About us.” • You can’t see the entireNavigateUrl. It’s the path to the AboutUsHome.aspx page from the site’sroot folder, as given here: • ~/PublicPages/AboutUs/AboutUsHome.aspx

14. Creating A Site Map • There are several ways to create site maps. The easiest is to just create aWeb.sitemap file in the root of your folder. • Then edit the resulting XML file todefine your site’s navigation structure. Here are the steps to get started: • Right-click your site name at the top of Solution Explorer and chooseAdd New Item. • In the Add New Item dialog box, click Site Map. • Click the Add button. • In Solution Explorer, you see the Web.sitemap name at or near the bottom ofthe folder hierarchy. • On the Design surface, you see an almost-empty sitemap file with some placeholders for typing textThere isno Design view for the Web.sitemap file.

15. Example of Creation a Site Map

16. Example of Creation a Site Map – Continue

17. Example of Creation a Site Map – Continue

19. Customizing navigation for roles • If your site has members and roles, you may want different navigation mapsfor different types of users. • For example, the navigation options for an anonymoususer might include links to public information only. • The options on thenavigation menu for an authenticated user, or user in a specific role, mightinclude links to members-only content. • Hiding navigational options from anonymous users is called security trimming, (i.e. some options are availableonly to people in specific roles.

20. How to Use Security Trimming • Using security trimming in your site menus is a two-step process. First, youhave to enable security trimming for your site as a whole. • That involvesspecifically defining Web.sitemap as your site’s default site map file, andthen enabling security trimming on that file by manually editing your site’sWeb.config file. Here are the necessary steps: • Open (double-click) the Web.config file in your site’s root folder. • Don’t confuse Web.config with Web.sitemap. They’re two separate filesthat play two separate roles. • Scroll down to the bottom of the Web.config file, and get the cursor to a blank line just above the closing </system.web> tag. • Type the following tags exactly as shown:

21. How to Use Security Trimming -- Continue • Type carefully because typing something that’s sorta like the abovewon’t cut it. Use the IntelliSense menus as much as possible to minimizetypos. • 4. Close and save the Web.config file.

22. How to Use Security Trimming -- Continue • When that Web.sitemap file is bound to a navigation Menu control, anonymoususers see the drop-down menu at the left in Figure. Authenticatedusers in the SiteMembers role see the navigation menu shown at the right inthat same figure.

24. Binding a control to Web.sitemap • After you’ve created a Web.sitemap file in your site’s root folder, you can bindit to either a Menu or TreeView control. • “Binding” just means that the controlgets its information from the Web.sitemap file rather than properties definedwithin the control. • First, in Design view, you open the Master Page (or .aspxpage) on which you want to put the control. Then follow these steps: • Drag a Menu or TreeView control onto the page. • From the Data Source drop-down list on the Common Tasks menu,choose <New Data Source...>. • In the Data Source Configuration Wizard that opens, click Site Map. • Click OK. • To see the results, close and save the page. Then view the page in aWeb browser. (Or, if you put the control on a Master Page, open any page thatuses that master.)

25. Adding an Eyebrow Menu • A breadcrumb or eyebrow menu is a short navigational path back to the homepage, usually shown at the top of a page. • You see examples of them at manylarge Web sites, including the Microsoft Developer Network Web site (www.msdn.com). Such a menu usually looks something like this:

26. Adding an Eyebrow Menu -- Continue • The path provides a quick view of where the user is in the navigational hierarchy,as well as quick links up the navigational hierarchy. • If your site has a Web.sitemap file, you can easily add a breadcrumb menu tothe top of any page in your site. • Just drag a SiteMapPath tool from theToolbox onto your page. It appears as a generic eyebrow menu in Designview. • Like all server controls, SiteMapPath has a Common Tasks menu with aneasy AutoFormat option. It also has an extensive Properties sheet where youcan change things like font, color, and so forth. • But you don’t have to do anythingto it if you don’t want. Just close and save the page.

27. Adding an Eyebrow Menu -- Continue

28. Creating Web User Controls-- THE PROBLEM – THE NEED • In any given Website there’s likely to be stuff you want to show on every page. That stuff youcan put in a Master Page. • On the other hand, there may also be stuff that youwant to put on some, but not all, pages. • An eyebrow menu would be a goodexample, because such a menu doesn’t really make sense on pages that are atthe top of a navigational hierarchy. • If you drag-and-drop a control straight from the Toolbox onto a page, youcreate a whole new control. • If you want consistency across your site, you’llhave to style the control exactly the same on every page in your site. • If youever change your mind about that style, you’ll have to make the change toevery page that uses the control. PROBLEM. • The simple solution to the problem is a Web User Control.

29. Creating Web User Controls Continue • Getting back to theeyebrow menu example, you could put the SiteMapPath control in a WebUser Control, and design it as you see fit, and then close and save the WebUser Control. • Then, any time you want an eyebrow menu on the page you’re editing, dragthe Web User Control from Solution Explorer onto the page (which is named as MyEyebrowMenu.ascx • Don’t use the generic SiteMapPathcontrol from the Toolbox anymore, as that one won’t have the same style asthe one in the Web User Control. • When you drop the Web User Control onto your page, you won’t have to designit because it’s already been designed. And, if you ever decide to change theappearance of the control that’s inside the Web User Control. • Justopen the Web User Control in Design view, make your changes, and close andsave the page. The change is automatically reflected in every page on whichyou’ve placed the Web User Control.

30. Creating Web User Controls Continue • Web User Controls areperfect for anything that you might want to show on some, but not all, pagesthroughout your site. • A good starting point might be to create a folder for the controls. To do so,just right-click the site name at the top of Solution Explorer and choose AddFolder➪Regular Folder. Give the folder a name (Example : WebUserControls) and press Enter.

31. Creating Web User Controls Continue • Creating a Web User Control is almost identical to creating a regular WebForm page. Here are the steps: • In Solution Explorer, right-click the folder in which you want to storethe control and choose Add New Item. • In the Add New Item dialog box, click Web User Control. • Enter a filename of your choosing. (Example MyEyebrowMenu.ascx). • Choose language options to taste. • Click Add. • The new control opens looking just like an empty Web page (in Design view).And basically, it is just an empty page in the sense that you can put whateveryou want into it. • In the eyebrow menu example, you’d drag a SiteMapPathcontrol from the Toolbox onto the page. But any server control from anyToolbox category would be fine as well.

32. Insertion of Web User Controls

33. Using a Web User Control • Any time you want to display a Web User Control on one of your pages, justdrag its filename from Solution Explorer onto your page,Nothing else is required. • To see the control, closeand save the page on which you placed the control. Then view that page in aWeb browser. • To change the style of the control that’s inside the WebUser Control: • Open the Web User Control by double-clicking its name in SolutionExplorer. • Edit the control in Design view as you normally would. • Close and save the control. • All pages that use the Web User Control display the control with yourcurrent format settings.