The Site Map

Before we can use the site navigation controls provided by ASP.NET 2.0, we need to create a site map. A site map defines the structure of our web site. It is an XML file, which stores the names and locations of all the pages in our site. We do not need to be an XML expert to create this file. It is a simple process. Lets us create a site map file for our project:

Open the project. Right click on the project name in the solution explorer. Select the `Add New Item...' option from the menu. In the dialog box that appears, select `Site Map' from the `Templates' section. Do not change the name of the file (Web.sitemap). Click on the `Add' button to proceed.

The site map file is now added to our project:

As we can see, the site map file contains a few lines of code. It is actually XML code. Let us look at this code in more detail:

 <?xml version="1.0" encoding="utf-8" ?> <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" > <siteMapNode url="" title="" description=""> <siteMapNode url="" title="" description="" /> <siteMapNode url="" title="" description="" /> </siteMapNode> </siteMap> 

This code provides the basic structure of the site map file. Do not worry if it looks complicated because we are only interested in three words in the entire code - the url, title and description.

The url specifies the location of a web page in our site (where the page is stored). The title is the text that will be displayed on the menu (Home, About Us, Products etc.). The description, though rarely used, makes the menus more informative.

What we need to do now is to fill up the empty double quotes (" ") after the url, title and description with information regarding our pages. We will start with our home page since that is the root (starting point) of our site. Remember that the file name for our home page is Default.aspx. The code below shows the changes we have made:

 <?xml version="1.0" encoding="utf-8" ?> <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" > <siteMapNode url="~/Default.aspx" title="Home" description="Our Home Page "> <siteMapNode url="" title="" description="" /> <siteMapNode url="" title="" description="" /> </siteMapNode> </siteMap> 

The url of our home page is provided as ~/Default.aspx. This is the method to specify the location of the pages. The title= "Home" will ensure that the word `Home' is displayed on the menu. Finally, we have provided a description of the page.

The next step is simple. Using the similar method, we will provide the url, title and description for all the pages in our site, one by one. Here is how our complete Web.sitemap file looks like:

 <?xml version="1.0" encoding="utf-8" ?> <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" > <siteMapNode url="~/Default.aspx" title="Home" description="Our Home Page"> <siteMapNode url="~/About.aspx" title="About Us" description="About Our Site" /> <siteMapNode url="~/Registration.aspx" title="Sign Up" description="Register Here" /> <siteMapNode url="~/Login.aspx" title="Login" description="Login Here" /> <siteMapNode url="~/Downloads.aspx" title="Downloads" description="Download Free Stuff" /> <siteMapNode url="~/Contact.aspx" title="Contact" description="Contact Us" /> </siteMapNode> </siteMap> 

If we add more pages to our site in the future, we can modify this site map file by adding similar lines of code for each new page. The point to remember here is that the order in which the pages are listed in this file will be the order in which they will appear on the menu system.

Once the site map is ready, we can proceed to add a menu system on our site. We have two choices here. We can use a `Menu' control or a `Tree View' control. Let us first work with the Menu control.