Csc209 web programming
1 / 43

CSC209 Web Programming - PowerPoint PPT Presentation

  • Uploaded on

CSC209 Web Programming. Chapter 7 – Navigation Dr. Stephanos Mavromoustakos. 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 .

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'CSC209 Web Programming' - janna

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Csc209 web programming

CSC209 Web Programming

Chapter 7 – Navigation

Dr. StephanosMavromoustakos

Chapter overview
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

Different ways to move around your site
Different ways to move around your site


<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>

Relative urls
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

Root based relative urls
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:


However, when you put it live you want something like

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

Practice the behavior of the virtual path property
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 />

Practice the behavior of the virtual path property1
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:

Practice the behavior of the virtual path property2
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

Practice the behavior of the virtual path property3
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.

Absolute urls
Absolute URLs

Full path

<imgsrc= />

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.

Default documents
Default Documents

If you visit a site such as, 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 controls
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.

Practice creating a web sitemap file
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:

Practice creating a web sitemap file1
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" />


<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" />


<siteMapNodeurl="~/Login.aspx" title="Login" description="Log in to this web site" />



  • Save the file; you’re done with it for now

Using the menu control
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.

Menu limitations
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:

Practice adding a menu to the site
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"


Practice adding a menu to the site1
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.

Practice adding a menu to the site2
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.

Practice styling the menu control
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:

Practice styling the menu control1
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 control2
Practice – Styling the Menu Control



/* Defines the sub menu items */

color: #707070;

background-color: #cccccc;

font-size: 14px;

padding: 4px 2px 4px 3px;




/* Defines the hover style of sub menus */

background-color: #707070;

color: White;


Practice styling the menu control3
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 control4
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:

Practice styling the menu control5
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

Practice styling the menu control6
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

Using the treeview control
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

Practice building a treeview
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.

Practice building a treeview2
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

Practice building a treeview3
Practice – Building a TreeView

  • Save all changes and open Default.aspx in the browser

Practice creating a breadcrumb
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">

Practice creating a breadcrumb1
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.

Programmatic redirection
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.

Practice redirecting the client to a different page
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:

Practice redirecting the client to a different page1
Practice - Redirecting the Client to a Different Page

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load


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

Practice redirecting the client to a different page2
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.

Practice server side redirecting
Practice – Server-Side Redirecting

  • Open the Code Behind of Source.aspx and replace the line with Response.Redirect with the following line:


  • Save the changes and then press Ctrl+F5 to open Source.aspx in the browser

Practice server side redirecting2
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