chapter 7 – navigation dr. stephanos mavromoustakos

43
CSC209 Web Programming Chapter 7 – Navigation Dr. Stephanos Mavromoustakos

Upload: emery-norris

Post on 13-Jan-2016

228 views

Category:

Documents


0 download

TRANSCRIPT

Slide 1

CSC209 Web Programming Chapter 7 NavigationDr. Stephanos MavromoustakosChapter OverviewNavigation refers to the structure of the web site. A well-organized site is easy to navigate. Navigations controls include the Menu, TreeView, and SiteMapPath.Navigation also takes place at the server side. This chapter will cover:Moving around using server controls and plain HTMLAddressing pages and other resources like images in your siteUsing the navigation controlsSending the user from one page to another though codeDifferent ways to move around your siteHTMLYou can log in here

You can log in here

Will produce the following HTML in the browser:You can log in hereRelative URLsThis points to the Management folderManagementTo refer to the image Header.jpg from the Default page in the Management folder you can use this URL:

You can move a set of files around to another directory at the same level without breaking their internal links, however, they make it difficult to move files to a different level.For example, if you move the Login.aspx to a separate folder like Members, the link to the Management folder would break. The new Members folder doesnt have Management as its subfolder.To overcome this problem you can use root-based relative URLsRoot-based relative URLsThe root-based relative URLs always start with a leading forward slash to indicate the root of the site. Management

Also, you can use the tilde(~) character to point to the current root of the site. When you create a new site, VWD by default creates a site in a separate application folder under the built-in web server where all your pages are created. For example, when you run a new site, the address to the browser is similar to:http://localhost:49344/MyApplicationName

However, when you put it live you want something like www.myApplicationName.comThere is an easy way to stop VWD from creating this separate folder: You can set the Virtual Path property of the project to a forward slash (/) using the Properties GridPractice The Behavior of the Virtual Path PropertyYou will need to create a new web site which we will only going to use it to show the relative URLsChoose FileNew Web Site Click OKAdd an image to the root of the site (e.g. at the folder WebSite2) and call it header.jpgIn Default.aspx, add the following code:


Practice The Behavior of the Virtual Path PropertyPress Ctrl + F5Note that the address bar of the browser reads something like http://localhost:49344/WebSite2/Default.aspx Your port number and application name may be different but nothing to worry.You will also find that the second image shows up broken because is looking at the root of the web server.Open up the source of the page in the browser and look at the three elements:Practice The Behavior of the Virtual Path PropertyThe first two URLs are identical to what you added to the ASPX page. However, the third one has been modified to refer to an image in the same folder as the page that references the image

Practice The Behavior of the Virtual Path PropertyClick the root of the web project in the Solutions Explorer and press F4 to open up the Properties Grid. Set the Virtual Path from /Website2 to /Press Ctrl + F5 againThe Default.aspx is now located at the root of the server. Therefore, all three images show up correctly.Go back to VWD and create a folder called Test. Drag the file Default.aspx from the root of the site into this new folder and then request the page in the browser. This time the first image will be broken. Since the current document lives in the Test folder and the image is located at the root of the site, this results in a broken image.You can close the test project in VWD now.

Practice The Behavior of the Virtual Path Property

Absolute URLsFull path

The extra protocol and domain information adds to the size of the page in the browser. Also, it creates difficulties if youre changing your domain name, or if you want to reuse some functionality in a different web site. Default DocumentsIf you visit a site such as, www.mydomain.com you magically see a page appear. This is the default page called default.aspx in ASP.NET.In case you cannot see the default page appear you can rename it to index.aspx

Using the Navigation ControlsASP.NET uses an XML-based file that describes the logical structure of your web site. This file is called Web.sitemap. This file is used by the navigation controls to present relevant links of your site in an organized way.Practice Creating a Web.sitemap fileOpen your Project. In the Properties Grid set the Virtual Path to a forward slash (/)Right-click the web site and choose Add New Item to add a Web.sitemap file and then click Site Map. Click OKYou will end up with one root element containing two child nodesModify the Web.sitemap so it contains this code:Practice Creating a Web.sitemap file

Save the file; youre done with it for nowUsing the Menu ControlThe Menu control is very easy to use and tweak. To create a basic menu, all you need to do is add one to your page, hook it up to a SiteMapDataSource control and youre done. At the same time, the control is quite flexible and has 80 public properties.The Menu control contains a few properties that start with Static or Dynamic. The Static properties are used to control the main menu items that appear when the page loads. Because they dont change or get hidden when you hover over them, they are considered static. The submenus are dynamic, as they appear only when you activate the relevant main menu items.Menu LimitationsThe Menu control generates a lot of markup using HTML tables which adds to the size of the pageThe generated code is hard for non-desktop browsers to read. For example, blind people using a screen reader will have a hard time finding the right pages on your siteTo overcome these limitations, Microsoft released the ASP.NET CSS Friendly Control Adapters that alter the final markup of the Menu control and deliver clean HTML instead that can be styled using CSS. You can find more about the control adapters on:www.asp.net/CSSAdapters/Default.aspxPractice Adding a Menu to the SiteYou will add a simple Menu control in the master page that uses the Web.sitemap file to build up the menu. The Menu is added to the MenuWrapper area in the master page and will present the menu items horizontally. Open the master page in Markup View and locate the called MenuWrapper. Remove the placeholder text Menu Goes Here.From the Navigation category of the Toolbox, drag a Menu and drop it between the MenuWrapper tags. Set the CssClass of the Menu control to MainMenu:

Practice Adding a Menu to the SiteSwitch to Design View. Click the Menu controls grey arrow to open the Smart Tasks panel.From the Choose Data Source drop-down list select . In the dialog box that appears click the Site Map icon.Click OK to close the dialog boxWhen you return to the page, the Menu control now shows the top-level element; Home. Click the SiteMapDataSource once and then press F4 to open the Properties Grid. Change the ShowStartingNode property from True to False. As soon as you do this, the Menu control in the designer is updated and shows all direct child menus under the root element: Home, Reviews, About, and Login. Practice Adding a Menu to the SiteClick the Menu control once and select it and then make the following changes to the properties of the control using the Properties Grid:

Save the changes to the master page and then request the Default.aspx page in your browser. Use the Monochrome theme.Note: In case you cannot see the menu properly, you may have a browser compatibility problem.

PropertyValueStaticEnableDefaultPopOutImageFalseOrientationHorizontalItemSpacing (a subproperty of StaticMenuItemStyle that you need to expand)10pxPractice Adding a Menu to the Site

Practice Styling the Menu ControlIn this exercise you add CSS classes for items like StaticMenuItemStyle, StaticHoverStyle, and DynamicMenuItemStyle. You can then apply these classes to the relevant style properties of the Menu control.

Open Monochrome.css from the Monochrome theme folder and add the following CSS rules:Practice Styling the Menu Control.StaticMenuItemStyle, StaticMenuItemStyle a{ /* Defines the look of main menu items */ color: #707070; font-size: 14px; font-weight: bold; text-decoration: none; padding-left: 2px;}

.StaticHoverStyle, .StaticSelectedStyle{ /* Defines the look of active and hover menu items */ background-color: #c1e4ce;}

Practice Styling the Menu Control.DynamicMenuItemStyle{ /* Defines the sub menu items */ color: #707070; background-color: #cccccc; font-size: 14px; padding: 4px 2px 4px 3px;}

.DynamicHoverStyle{ /* Defines the hover style of sub menus */ background-color: #707070; color: White;}

Practice Styling the Menu Control.DynamicHoverStyle a{ /* Removes the underline from links in the sub menus */ text-decoration: none;}

Save and close the file

Practice Styling the Menu ControlOpen the master page, switch to Design View, and select the Menu control. Press F4 to open the Properties and then set the CssClass of the following properties:

Style PropertySet CssClass toStaticMenuItemStyleStaticMenuItemStyleStaticHoverStyleStaticHoverStyleStaticSelectedStyleStaticSelectedStyleDynamicMenuItemStyleDynamicMenuItemStyleDynamicHoverStyleDynamicHoverStylePractice Styling the Menu ControlRemove the ItemSpacing attribute from the StaticMenuItemStyle element in Markup ViewNext, create the following folders and files youll use in this and later chapters. Use the MyBasePage template to create the new files. Also, in Markup View, give each page a meaningful Title to avoid errors later

FolderFile NameTitle/ReviewsDefault.aspxMy Favorite Reviews/ReviewsAll.aspxAll Reviews/ReviewsAllByGenre.aspxReviews by Genre/AboutDefault.aspxAbout this site/AboutContact.aspxContact Us/AboutAboutUs.aspxAbout UsPractice Styling the Menu ControlWhen youre working in Visual Basic, youll get an error on the two Default.aspx pages. Thats because with the template you created earlier, you end up with a class called Default for a file called Default.aspx. However, Default is also a reserved word in VB, leading to an error. This is an easy fix. Just prefix the Default class with an underscore in the Code Behind:

Partial Class _Default Inherits BasePageAfter you have changed the class name, you also need to change the Inherits attribute in the markup of the page:

Save all changes and open the Default.aspx page from the root in your browserUsing the TreeView ControlA TreeView is capable of displaying a hierarchical list of items, similar to the Windows ExplorerThe TreeView is not limited to the Websitemap file. You can also build it to regular XML files and even create a TreeView programmatically.Just as with the Menu control, the TreeView control has a number of style properties that allow you to change the look and feel of the different parts of the tree. The way this works is identical to the Menu control. To tell the TreeView which items to show, you bind it to a SiteMapDataSource control.The TreeView suffers from the same problems as the Menu in that it generates a lot of bloated HTML. To overcome this use the CSS Control AdaptersPractice Building a TreeViewIn this exercise, you add a TreeView control to the MenuWrapper tag, right below the Menu you created earlier. The TreeView is then bound to the same data source as the Menu. Next, youll write some code that either shows the Menu or the TreeView, depending on the active theme.Open the master page and just below the Menu control, add a TreeView control by dragging it from the Toolbox into the page in Markup ViewSwitch to Design View, click TreeView once, and click the little grey arrow to open the Smart Tasks panel. From the Choose Data Source drop down, select SiteMapDataSource1, the data source control you created for the Menu control. As soon as you select the data source, the TreeView is updated in Design View; it now shows the correct menu items from the sitemap file.Practice Building a TreeView

Practice Building a TreeViewOpen the Properties Grid for the TreeView and set the ShowExpandCollapse property to False (this will hide the plus and minus signs images)Click somewhere in the document to put the focus on it and then press F7 to open the Code Behind of the master page file and locate the Page_Load event. Right below that code (between the End If and End Sub) add the following code that shows or hides the TreeView and Menu controls based on the currently active theme.

Select Case Page.Theme.ToLower() Case "darkgrey" Menu1.Visible = False TreeView1.Visible = True Case Else Menu1.Visible = True TreeView1.Visible = False End Select

Practice Building a TreeViewSave all changes and open Default.aspx in the browser

Practice Creating a BreadcrumbOpen the master page in Markup View and locate the opening tag of the MainContent . Right after that tag, and before the tag drag a SiteMapPath from the Toolbox. Right after the SiteMapPath add two line breaks (
). You should end up with code like this:



Practice Creating a BreadcrumbSave the changes and the request Default.aspx in the browserNavigate using the breadcrumb items and menu itemsIf you switch to different theme, note that the SiteMapPath looks pretty much the same, except for the color of the links, which are defined in each of the themes CSS file.Practice Creating a Breadcrumb

Programmatic RedirectionProgrammatic redirection is very useful. Imagine a page that allows users to enter a review into the database. As soon as they click the Save button, the review is saved and then users are taken to another page where they can see the entire review.ASP.NET supports two ways to redirect users to a new page programmatically: using Response.Redirect and Server.Transfer. Practice - Redirecting the Client to a Different PageThis exercise shows you how to create a page that redirects from one page to another using Response.RedirectIn the Demos folder, create two new Web Forms based on your exported template. Call them Source.aspx and Target.aspx. Set their Title to Source and Target.Open Source.aspx in Design View and double-click somewhere in the grey area of the page outside the ContentPlaceHolder to set up a Page_Load handler. Inside write the following code that redirects the user to the Target.aspx page. To show you how to pass additional data through the query string and how to read that information in the target page, the code passes a query string field called Test with SomeValue as the value:

Practice - Redirecting the Client to a Different PageProtected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.LoadResponse.Redirect("Target.aspx?Test=SomeValue") End SubOpen Target.aspx, switch to Design View, and add a Label control to the cpMainContent placeholder. Set up a Page_Load handler by double-clinking the grey area and then add the following code:Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load Label1.Text = Request.QueryString.ToString() End SubPractice - Redirecting the Client to a Different PageGo back to Source.aspx and press Ctrl+F5 to open it in the browserNote that the address bar now reads Target.aspx?Test=SomeValue, the page you redirected to in the Page_Load event handler. The Label in the target page correctly shows the query string that is passed to this page. Notice that QueryString.ToString() only contains Test=SomeValue. The address or even the question mark is not a part of the query string for the page.

Practice Server-Side RedirectingOpen the Code Behind of Source.aspx and replace the line with Response.Redirect with the following line:Server.Transfer("Target.aspx?Test=SomeValue")

Save the changes and then press Ctrl+F5 to open Source.aspx in the browserPractice Server-Side Redirecting

Practice Server-Side RedirectingThe Label control displays the query string values that were sent from Source.aspx to Target.aspx, showing that you are really viewing the output of the Target.aspx page. However, the browsers address bar is left unmodified and still shows Source.aspx, hiding the new page name and query string values from the user.Server.Transfer takes place completely at the server