Introduction

---

Before discussing how to move around the web site it is probably best to discuss paths. There are basically two types of paths, absolute and relative.

 Absolute Paths

---

Absolute paths refer to a very specific location of a web page or a specific place on the hard drive of the server. In this instance we are concerned with the latter. When you create a web site it is placed at a specific location. For instance when you create a project in Visual Studio the files for the project are placed in a folder inside your documents folder. The specific location of these files is typically something like this:

 C:\glenn\documents\Visual Studio 2008\Projects\Navigation

 Basically this is a chain of folders one inside the next. So under the C: drive is a folder called glenn. Inside that folder is another folder called documents. Inside that is a folder called Visual Studio 2008 and so on.

So when you want to add an images folder it might be at this location:

C:\glenn\documents\Visual Studio 2008\Projects\Navigation\Navigation\Images

I am hoping that you are seeing why absolute paths are a bad idea. If not, they are bad because when you move your application to a web server, chances are the path is not going to be the same as on your computer. If you have used absolute paths to images, documents, or anything else the link will simply be broken.

 Relative Paths

---

Relative paths are named so because the path to everything is relative from where you start. Let's say you have a file called page2.aspx that is in a folder of your web site called pages. You want to access a folder called images that is inside pages and link to an image called pic.jpg. The relative path to the image is quite simple:

images/pic.jpg

There are a couple of characters that you can use to make relative paths easier. The first is the period (or dot) which says go from the current folder. Using this we could modify the previous path:

./images/pic.jpg

Adding the dot really doesn't change things in this instant but is technically more correct. Using the double dot .. says go up one folder. Let's say the your site is laid out so that you have root and within the root you have the folders pages and images. In this scenario the images folder has been moved up one folder. From pages to get the path to the image you simply use:

 ../images/pic.jpg

You can use the double dot as many times as you would like. For instance if you need to go up two folders:

 ../../images/pic.jpg

Specifying the Root

---

 Hopefully by now you understand that the root of your web site is nothing more than the top folder where your web page begins to run. The absolute path to this will undoubtedly change when you move your web site to a different server. To specify a path from the root of your web site you use the tilde ~

So if your images folder is right under the root. You would simply use this path:

~/Images/pic.jpg

This says from the root go to the Images folder and use pic.jpg. When you use the Visual Studio navigation controls you will see the tilde be used for the path a great deal.

HyperLink Control

---

At some point you are going to want to have the ability to add pages to your web site and have the ability to navigate to and from them.  Because ASP.NET renders as html you can always just use the <a> tag and create a link to any of the aspx pages in your web site. ASP.NET also has a hyperlink server control that you can use but it really just renders as an <a> tag.

 The HyperLink Control has a Navigation URL property that you use to set the url of where you want to navigate to:

 

While this is certainly easy it is not very

You can Jazz up the hyperlink and make it look like a button by simply changing the BorderStyle, BorderColor, BackColor, and ForeColor Properties. Here is the same hyperlink with some of these properties set:

Of course you could accomplish the same thing by using a style sheet to define the style for your HyperLink. One last thing to mention and that is the HyperLink has an ImageURL property that will allow you to set an image for the link instead of text:

Introduction

---

The menu control can be quite easy to use and is also quite flexible. It has a great deal of properties and functions that allow to style it and make it work in many different ways. To get a menu to work, you simply connect it it a sitemap file and away you go.

Sitemap File

---

A sitemap file is an xml file that is used to describe the structure of your web site. If you are not familiar with XML files they are very similar in structure to html. The difference is that html files are used to display data and xml files are used to describe data or you might say it is a way to embed documents. In this case we are embedding the structure of web site.

Root Node

---

xml is a tree like structure which makes it nice for creating menus because menus are also tree like structures. All xml documents have elements called nodes and all well formed documents must have a root node. The root of the sitemap is siteMap. All other nodes then will be nested inside the root which makes them  a child of the the siteMap element:

<siteMap> 

</siteMap>

Just like html all opening tags need to have a closing tag.

The sitemap file can contain only one node type called the siteMapNode. It can contain child siteMapNode elements. These nodes represent the layout of your site and how the menu will be structured. In the context of a menu each siteMapNode represents a menu item or child menu item:

<siteMapNode title="Home" description="Home" url="~/default.aspx"> 

The attributes of the node are pretty self explanatory:

Attribute 
Description 
 title
The caption that shows on the menu    
 description
Tooltip text that displays when mouse rolls over 
 url
Path to the page to open when menu is selected 

 Lets Take a look at a sitemap file that contains child menu items:

 

 

Creating a sitemap file

---

 

 Creating a sitemap file is quite simple. In the solution explorer, right click on the project and select Add and then New Item. From Categories select web and then from the installed templates select Site Map.

The default name given to the sitemap is Web.sitemap and it may be best to simply leave this name so that you know it is to encompass your entire site.

Video - Creating A Site Map

---

 

 

Menu Control

---

Adding a menu control is really quite simple. From the toolbox under navigation you either double click or drag it to the location that you want to use:

 

Choosing A Data Source

---

 

Once you have add the menu you will be confronted with a dialog window that wants you to select a data source. Here we are going to be using the sitemap file that was created but you are going to have to create new DataSource which serves as a link between the menu and the sitemap file:

In the drop down you want to select Choose Data Source which will popup the Data Source Configuration Wizard:

You want to select SiteMap and give you source and id, then select ok. Because you created  the Web.sitemap file, the data source will use it. You should now see the home menu item:

 

 Where Are All Of The Menu Items?

---

 

At this point you may be wondering where are off your menu items are. Remember that the sitemap file had a siteMapNode called  called home. This is what is being displayed. Remeber also, that home was duplicated as a child of the first node called home. As a matter of fact all nodes are child nodes of home.

To view all of the menu items select the data source and view it's properties. You want to chage ShowStartingNode from true to false:

Now all of your menu items should be displayed. On thing to note and that is by default the menu will display in a vertical fashion.

Orientation

---

 

The orientation property allows you to set the menu from vertical to horizontal. This can be found in the properties of the menu control not the data source control.  If you are going with a horizontal ortienation you may want to add some spacing between the menu items. This can be done by changing the item spacing property of the menu which is a sub property of StaticMenuItemStyle:

Now your meny should look something like this:

Auto Formatting Menu Style

---

 

While this menu is functional it is not very appealing. You can change the way the men looks by using the auto format option. To do this click on the right facing arrow found to the right of the menu and select Auto Format

 You will find there are several appealing styles to choose from. Here is an example of the classic style on the page running in the web browser:

Apply Custom Styles

---

 

The Menu control supports an almost daunting number of styles that can easily seem overwhelming. However, by learning a few key concepts and associated terminology for the Menu you will find the styles versatile and easy to use. A Menu is composed of one or many MenuLevels and each MenuLevel can contain one or more MenuItem. The Menu control supports setting styles on individual MenuItems or individual MenuLevels and MenuSubLevels, however most web sites that use pop-out Menus typically have one look and feel for the portion of the Menu that is statically displayed on the web page and another look and feel for the portion of the Menu that is dynamically displayed on the webpage. To simplify setting the styles for all MenuLevels and MenuItems that appear statically and all MenuLevels and MenuItems that appear dynamically the Menu control supports the following style properties:

• Static/DynamicMenuStyle The MenuStyle sets the properties that control the corresponding Menu  think of it as the style for the box that contains all of the MenuItems. In addition to the traditional style properties it also includes HorizontalPadding and VerticalPadding.
• DynamicMenuItemStyle The MenuItemStyle sets the properties that control the display of the individual MenuItems contained in the corresponding component of the menu think of it as the style for the links that appear within the box. In addition to the traditional style properties it also includes ItemSpacing, HorizontalPadding and VerticalPadding.
• DynamicSelectedStyle The SelectedStyle sets the properties that control the display of the individual MenuItem that is currently selected and contained on the corresponding component of the menu think of it as a MenuItemStyle specific to the selected item. In addition to the traditional style properties it also includes ItemSpacing, HorizontalPadding and VerticalPadding.
• DynamicHoverStyle The HoverStyle sets the properties that control the display of the individual MenuItem that is currently selected and contained on the corresponding component of the menu think of it as a MenuItemStyle specific to the selected item. In addition to the traditional style properties it also includes ItemSpacing, HorizontalPadding and VerticalPadding.

All of these styles can be set in the designer:

It is best to simply play around with these styles to see exactly what you can do.

Video - Using the Menu Control

---

 

TreeView Control

---

 

The TreeView Web server control is used to display hierarchical data, such as a table of contents or file directory, in a tree structure. It supports the following features:

• Automatic data binding, which allows the nodes of the control to be bound to hierarchical data, such as an XML document.

• Site navigation support through integration with the SiteMapDataSource control.

• Node text that can be displayed as either selectable text or hyperlinks.

• Customizable appearance through themes, user-defined images, and styles.

• Programmatic access to the TreeView object model, which allows you to dynamically create trees, populate nodes, set properties, and so on.

• Node population through client-side callbacks to the server (on supported browsers).

• The ability to display a check box next to each node

TreeView Node Types

---

 

The TreeView control is made up of one or more nodes. Each entry in the tree is called a node and is represented by a TreeNode object. The following table describes the three different node types.

Although a typical tree has only one root node, the TreeView control allows you to add multiple root nodes to your tree structure. This is useful when you want to display item listings without displaying a single main root node, as in a list of product categories.

Each node has a Text property and a Value property. The value of the Text property is displayed in the TreeView control, while the Value property is used to store any additional data about the node, such as data passed to the postback event that is associated with the node.

When a node of the TreeView control is clicked, it can either raise a selection event (via postback) or navigate to another page. When the NavigationUrl property is not set, clicking a node will raise a SelectedNodeChanged event that can be handled to provide custom functionality. Each node also has a SelectAction property that can be used to determine specific actions that happen when the node is clicked, such as expand or collapse the node. Instead of raising a selection event to navigate to a page when a node is clicked, set the NavigateUrl property of the node to a value other than an empty string ("").

Adding Static Data 

---

 

 Data can be added to the TreeView at design time by using the Nodes property. This allows you to create a collection of nodes:

Once a root has been added you can change it's properties like Text to change what appears or the NaviagationUrl to create a link to another page.

DataBinding

---

 

You can bind your the TreeView to a SiteMap file the same way you do the menu control. You select a DataSource, select new data source then select either xml or SiteMap and away you go. The following shows the SiteMap file and how the TreeView looks displaying it: