Sams Teach Yourself ASP.NET 2.0 in 24 Hours, Complete Starter Kit

Defining the Website's Structure Using a Site Map

While a very small and trivial website composed of only a handful of pages might not have an easily identifiable site structure, all sufficiently large websites possess a logical structure that is typically easy to identify. The contents of the site, whether items for sale, discussions in online forums, or informational articles, can all be classified in some manner. These classifications usually define the structure of a site.

Because we've yet to create any multipage websites, let's take a minute to build a website with a number of related web pages. These pages won't do anything interesting; rather, we'll use them simply to create a mock website structure. For this example, imagine that we are building an online bookstore.

Start by creating a new ASP.NET website project in Visual Web Developer. This new project should already include one ASP.NET page, Default.aspx. (If you used a project type that does not include Default.aspx, add it now, please.) Next, add four new ASP.NET web pages: OnSale.aspx, Legal.aspx, Privacy.aspx, and About.aspx. Next, add a folder for each of the genres of books our store will be selling. Specifically, add three folders: Business, Fiction, and Technology. In each of these folders, add a single ASP.NET page, Default.aspx. Finally, in the Technology folder, add two subfolders, Computers and Electronics, adding a Default.aspx page to each of these subfolders.

After you have added these web pages and folders, your Solution Explorer should look similar to the one in Figure 19.1.

In each of these pages, add a short bit of text in the page providing a summary of the page's functionality. For example, in the root directory's Default.aspx, I put "Welcome to my online book store!"; in OnSale.aspx, I used "This lists the books currently on sale."; in the Business folder's Default.aspx, I added "This lists the books in the Business genre.". Add such a brief summary for each web page in the site.

Adding the Site Map

Now that we have created the pages for our mock site, we're ready to add the site map. To create the site map, follow the same steps as you normally would to add an ASP.NET web page to the project. That is, right-click on the project name in the Solution Explorer and choose the Add Item menu option. From the Add Item dialog box, choose the Site Map option (see Figure 19.2) and click the Add button. This will add a site map named Web.sitemap to your project.

After you have added the site map, open it by double-clicking on the Web.sitemap file in the Solution Explorer. Listing 19.1 shows the markup in the site map, by default.

Listing 19.1. The Default Content of the Site Map

The site map file is an XML file, just like the web.config file. This XML file contains the logical structure of the website. To define your site's structure, you need to edit this file manually. Don't forget that XML documents impose strict formatting rules. One such rule is that XML is case sensitive. If you try to add a <siteMapNode> using improper casing, like <SITEMapNode>, you'll get an exception when attempting to use the navigation Web controls. Another rule of note is that all elements must have opening and closing tags. Notice how the <siteMap> element has an opening tag on line 2 and a closing tag on line 7. The <siteMapNode> element on line 3 has its opening tag there and its closing tag on line 6. The two <siteMapNode> elements on lines 4 and 5 don't have an explicit closing tag because they use the shorthand notation, />.

The site map begins with a <siteMap> element (line 2), which contains a number of <siteMapNode> elements within. The url, title, and description attributes provide information about a particular section of the website's structure, while the location of the <siteMapNode> element relative to the other <siteMapNode> elements determines the position of the section relative to other sections.

If this isn't yet clear, don't worry; a more concrete example ought to help.

Building the Site Map from the Site's Structure

Given the mock website we've created, let's define a structure that exhibits the logical hierarchy shown in Figure 19.3. Each node in the hierarchy shows the title and URL for the section along with the section's place in the hierarchy.

To implement this site structure in an ASP.NET site map, start by clearing out the <siteMapNode> elements from the default site map (remove lines 3 through 6 in Listing 19.1). Next, begin at the top section and work your way down the hierarchy, adding a <siteMapNode> for each section. Those sections that appear beneath a given section in the hierarchy will be nested within a <siteMapNode> element.

To put these concepts into practice, add a <siteMapNode> element for the Home section like so:

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

Notice that I used the section URL in Figure 19.3 as the value for the url attribute and the section title as the title attribute value. I am going to leave the description attribute blank, but feel free to enter a meaningful value here if you like. Also, note that for the Home <siteMapNode> element I used the terse closing tag syntax, />. After you add this element, your site map should look like this:

<?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="" /> </siteMap>

Because the next sections in the hierarchy exist as descendents of the Home section, the corresponding <siteMapNode> elements will be nested within the Home <siteMapNode> element. There are five such sections, requiring five <siteMapNode> elements:

<siteMapNode url="About.aspx" title="About" description="" /> <siteMapNode url="OnSale.aspx" title="On Sale" description="" /> <siteMapNode url="Business/Default.aspx" title="Business" description="" /> <siteMapNode url="Fiction/Default.aspx" title="Fiction" description="" /> <siteMapNode url="Technology/Default.aspx" title="Technology" description="" />

These five <siteMapNode> elements should be nested within the Home <siteMapNode> element, resulting in the following site map:

<?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=""> <siteMapNode url="About.aspx" title="About" description="" /> <siteMapNode url="OnSale.aspx" title="On Sale" description="" /> <siteMapNode url="Business/Default.aspx" title="Business" description="" /> <siteMapNode url="Fiction/Default.aspx" title="Fiction" description="" /> <siteMapNode url="Technology/Default.aspx" title="Technology" description="" /> </siteMapNode> </siteMap>

Notice how the Home <siteMapNode>'s closing tag was changed from the terse dialect (/>) to the more verbose form (</siteMapNode>). The reason is that the verbose form is needed when an element contains inner content; since the Home <siteMapNode> element now contains children elements, we have no choice but to use the verbose syntax.

If you continue this process through the remainder of the sections in Figure 19.3, you'll eventually wind up with the site map shown in Listing 19.2.

Listing 19.2. The Completed Site Map Contents