Lesson 7:
Navigation

Introduction

This week in Chapter 7: Navigation, as you might have guessed, the focus is on Website navigation. The chapter opens with a really good refresher on relative and absolute URLs. You may think you have a good grasp on URLs, but this section is worth reading anyway because your author relates some aspects of URLs that are specific to use in an ASP.NET environment. Pay particularly close attention to Relative URLs in Server-Side Controls on page 256. For the hands-on part this week, you will be learning about three types of navigational controls you can add to your Web forms, 1) the Menu control, which uses fly-out menus (which your author calls "fold-out" menus) to provide users the ability to navigate the logical structure of a Website; 2) the TreeView control, which lets users expand and collapse parts or all of a hierarchical  navigational structure; and 3) the SiteMapPath control, which you may have heard referred to as "breadcrumbs" because it displays the path the user has taken to arrive at their current location.

By following the Try It Outs you will learn to add a Menu control, a TreeView control and a SiteMapPath control to your CSIS116B Website as well as how to style your new controls. You will also learn how to build a Web.sitemap file which both identifies your Websites underlying navigational structure in an XML format and acts as a data source for your site's ASP.NET navigational controls. In fact  one of the important things you will learn this week is that adding navigational controls to a Web form is a two step process. First you create the Web.sitemap XML file then you link any navigational server controls you want to use in a Web form to the sitemap file as the control's data source.

Assignment

In order to receive full credit for your Week 7 assignment you must complete the following:

• Read all of Chapter7: Navigation in your text book to learn about ASP.NET navigational controls and the Web.sitemap file.
• Create a Web.sitemap file in the root of your Website using the instructions below.
• Add a Menu control, a TreeView control, and a SiteMapPath control to your Website's FrontEnd master page as described in the instructions below.
• Add new CSS rules to style your Menu control in the Monochrome.css file as instructed below.
• Add the folders and files shown in the table on page 267 to the root of your Website.
• Publish the About, MasterPages, and Reviews folders and their contents, the Web.sitemap file in the root, and the Monochrome.css file in the App_Themes/Monochrome folder, to your student folder on the Student Web server.
• Verify that you can view ALL Website pages on the student Web server using all three navigation systems, the Menu, the TreeView, and the SiteMapPath. You should be able to view your Default.aspx page using the URL for the root of your student folder.
• Post the URL used in the last step to Assignment 7 in Canvas for scoring, by the due date listed in the Syllabus.

Instructions

Use the following step-by-step instructions for completing this week's assignment. Remember to use C# when copying code snippets from your text book.

Step 1 Complete all the steps in the Try It Out on pages 245 - 246 to create a Web.sitemap file in the root of your Web site.

Pay close attention to the structure of the Web.sitemap file, there can only be one siteMapNode element directly off the root of the siteMap element. In figure 1, notice the siteMap element is the root of the XML structure (the red line indicates the pairing of the opening and closing <siteMap> tags encapsulating a single child siteMapNode element with the url of "~/" (the blue line indicates the pairing of the first siteMapNode off the siteMap element). Inside that first siteMapNode element you see it has four child siteMapNode elements (indicated by the green lines). These are the four elements that will make up the Home, Review, About, and Login menu items which will be displayed in the Menu control used in the Monochrome theme and the TreeView in the DarkGrey theme. Notice that the Review and the About siteMapNodes each have two child siteMapNode elements of their own (indicated with violet colored lines).

In addition in figure 1, notice the red circle highlighting the fact that each URL value begins with a tilde "~" which is used in ASP.NET controls and other server-side files like the Web.sitemap XML file to indicate that the root of your Website is its own application folder. Each of your student folders has previously been created as an application folder on the Web server it is stored on. A root path like "/foldername" indicates the Web server's root folder as the root of your Website and not your student folder. By using "~/foldername" the ASP.NET server will use your student folder as its root and not the actual root folder of the Web server itself.

 

Step 2 Complete all the steps in the Try It Out on pages 248 - 250 to add a  Menu control and a SiteMapDataSource control to your FrontEnd.master file in the MasterPages folder off the root of your site.

Step 3 Complete all the steps in the Try It Out on pages 251 - 253 to style the Menu control by adding CSS rules to your Monochrome.css file in your App_Themes/Monochrome folder off the root of your Website.

Step 4 Complete all of the steps in the Try It Out on pages 255 - 257 to add a TreeView control to your FrontEnd.master file and a C# switch block to its code-behind file to hide the Menu or TreeView control depending on which theme is selected.

Step 5 Complete all the steps in the Try It Out on pages 259 - 260 to add a SiteMapPath (breadcrumb) control to your FrontEnd.master file.

Once you have you have successfully completed the steps listed above, you are ready to complete steps 6, 7, and 8 below.

Step 6 Publish the About, MasterPages, and Reviews folders and their contents, the Web.sitemap file in the root, and the Monochrome.css file in the App_Themes/Monochrome folder, to your student folder on the Student Web server.

Don't publish any other files or folders at this time.

Step 7 Using a Web browser on your computer, verify that you can view ALL pages on the student Web server using all three navigation systems, the Menu, the TreeView, and the SiteMapPath. You should be able to view your Default.aspx page using the URL for the root of your student folder.

Step 8 Post the URL for your updated CSIS786 Web site to Canvas for scoring by the due date listed in the Syllabus for Assignment 7.

Instructor's Note: Everything MUST be completed before the due date listed in the syllabus for this assignment.

Please email me if you have any questions at all!

⇑Table of Contents

Lesson Summary

In this lesson you learned how to:

• Move around your site using server controls and plain HTML
• Address pages and other resources like images
• Implement and use Site Maps
• Implement and use a SiteMapPath control
• Implement and Use a TreeView control
• Implement and use a Menu control
• Use ASP.NET's routing capabilities
• Send users from one page to another programmatically

Congratulations, that's it for this assignment. You can get a head start on your next lesson by reading chapter 8 in your textbook.

⇑Table of Contents