CSC209 Web Programming

1. CSC209 Web Programming Chapter 7 – Navigation Dr. StephanosMavromoustakos

2. Chapter Overview Navigation 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 HTML • Addressing pages and other resources like images in your site • Using the navigation controls • Sending the user from one page to another though code

3. Different ways to move around your site HTML <a href=“Login.aspx”>You can log in here</a> <asp:Hyperlinkrunat=“server” id=“linkLogin” NavigateUrl=“Login.aspx”> You can log in here</asp:Hyperkink> Will produce the following HTML in the browser: <a id=ct100_cpMainContent_linkLogin” href=“Login.aspx”>You can log in here</a>

4. Relative URLs This points to the Management folder <a href=“Management/Default.aspx”>Management</a> To refer to the image Header.jpg from the Default page in the Management folder you can use this URL: <imgsrc=“../Images/Header.jpg” /> <imgsrc=“../../Images/Header.jpg” /> 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 doesn’t have Management as its subfolder. To overcome this problem you can use root-based relative URLs

5. Root-based relative URLs The root-based relative URLs always start with a leading forward slash to indicate the root of the site. <a href=“/Managemet/Default.aspx”>Management</a> 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.com There 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 Grid

6. Practice – The Behavior of the Virtual Path Property You will need to create a new web site which we will only going to use it to show the relative URLs • Choose FileNew Web Site • Click OK • Add an image to the root of the site (e.g. at the folder WebSite2) and call it header.jpg • In Default.aspx, add the following code: <asp:Image ID="Image1" runat="server" ImageUrl="Header.jpg" /><br /> <asp:Image ID="Image2" runat="server" ImageUrl="/Header.jpg" /><br /> <asp:Image ID="Image3" runat="server" ImageUrl="~/Header.jpg" /><br />

7. Practice – The Behavior of the Virtual Path Property • Press Ctrl + F5 Note 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 <img> elements:

8. Practice – The Behavior of the Virtual Path Property The 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

9. Practice – The Behavior of the Virtual Path Property • Click 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 again The 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.

10. Practice – The Behavior of the Virtual Path Property

11. Absolute URLs Full path <imgsrc=http://www.wrox.com/images/logo.gif /> The extra protocol and domain information adds to the size of the page in the browser. Also, it creates difficulties if you’re changing your domain name, or if you want to reuse some functionality in a different web site.

12. Default Documents If 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

13. Using the Navigation Controls • ASP.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.

14. Practice – Creating a Web.sitemap file • Open 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 OK You will end up with one root element containing two child nodes Modify the Web.sitemap so it contains this code:

15. Practice – Creating a Web.sitemap file <siteMapNodeurl="~/" title="Home" description="Home"> <siteMapNodeurl="~/Default.aspx" title="Home" description="Go to the Homepage" /> <siteMapNodeurl="~/Reviews/Default.aspx" title="Reviews" description="Reviews published on this site" > <siteMapNodeurl="~/Reviews/AllByGenre.aspx" title="By Genre" description="All reviews grouped by genre" /> <siteMapNodeurl="~/Reviews/All.aspx" title="All Reviews" description="All Reviews" /> </siteMapNode> <siteMapNodeurl="~/About/Default.aspx" title="About" description="About this site"> <siteMapNodeurl="~/About/Contact.aspx" title="Contact us" description="Contact us" /> <siteMapNodeurl="~/About/AboutUs.aspx" title="About Us" description="About Us" /> </siteMapNode> <siteMapNodeurl="~/Login.aspx" title="Login" description="Log in to this web site" /> </siteMapNode> </siteMap> • Save the file; you’re done with it for now

16. Using the Menu Control The 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 you’re 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 don’t 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.

17. Menu Limitations • The Menu control generates a lot of markup using HTML tables which adds to the size of the page • The 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 site • To 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.aspx

18. Practice – Adding a Menu to the Site You 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 <div> 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: <div id="MenuWrapper"> <asp:Menu ID="Menu1" runat="server" CssClass="MainMenu"></asp:Menu>

19. Practice – Adding a Menu to the Site • Switch to Design View. Click the Menu control’s grey arrow to open the Smart Tasks panel. • From the Choose Data Source drop-down list select <New data source>. In the dialog box that appears click the Site Map icon. • Click OK to close the dialog box • When 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.

20. Practice – Adding a Menu to the Site • Click 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.

21. Practice – Adding a Menu to the Site

22. Practice – Styling the Menu Control In 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:

23. 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; }

24. 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; }

25. Practice – Styling the Menu Control .DynamicHoverStyle a { /* Removes the underline from links in the sub menus */ text-decoration: none; } • Save and close the file

26. Practice – Styling the Menu Control • Open 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:

27. Practice – Styling the Menu Control • Remove the ItemSpacing attribute from the StaticMenuItemStyle element in Markup View • Next, create the following folders and files you’ll 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

28. Practice – Styling the Menu Control • When you’re working in Visual Basic, you’ll get an error on the two Default.aspx pages. That’s 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 BasePage After you have changed the class name, you also need to change the Inherits attribute in the markup of the page: <%@ Page Title="My Favorite Reviews" Language="VB" MasterPageFile="~/MasterPages/MasterPage.master" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %> • Save all changes and open the Default.aspx page from the root in your browser

29. Using the TreeView Control • A TreeView is capable of displaying a hierarchical list of items, similar to the Windows Explorer • The 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 Adapters

30. Practice – Building a TreeView • In this exercise, you add a TreeView control to the MenuWrapper<div> tag, right below the Menu you created earlier. The TreeView is then bound to the same data source as the Menu. Next, you’ll 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 View • Switch 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.

31. Practice – Building a TreeView

32. Practice – Building a TreeView • Open 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

33. Practice – Building a TreeView • Save all changes and open Default.aspx in the browser

34. Practice – Creating a Breadcrumb • Open the master page in Markup View and locate the opening tag of the MainContent<div>. Right after that tag, and before the <asp:ContentPlaceHolder> tag drag a SiteMapPath from the Toolbox. Right after the SiteMapPath add two line breaks (<br />). You should end up with code like this: <div id="MainContent"> <asp:SiteMapPath ID="SiteMapPath1" runat="server"> </asp:SiteMapPath><br /><br /> <asp:ContentPlaceHolder ID="cpMainContent" runat="server">

35. Practice – Creating a Breadcrumb • Save the changes and the request Default.aspx in the browser • Navigate using the breadcrumb items and menu items • If 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 theme’s CSS file.

36. Practice – Creating a Breadcrumb

37. Programmatic Redirection • Programmatic 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.

38. Practice - Redirecting the Client to a Different Page This exercise shows you how to create a page that redirects from one page to another using Response.Redirect • In 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:

39. Practice - Redirecting the Client to a Different Page Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load Response.Redirect("Target.aspx?Test=SomeValue") End Sub • Open 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 Sub

40. Practice - Redirecting the Client to a Different Page • Go back to Source.aspx and press Ctrl+F5 to open it in the browser Note 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.

41. Practice – Server-Side Redirecting • Open 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 browser

42. Practice – Server-Side Redirecting

43. Practice – Server-Side Redirecting The 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 browser’s 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