Create ASP.NET 3.5 Sitemap XML for Navigational Web Controls

This XML sitemap is different from Google's XML sitemap standard, which is commonly used for SEO purposes as well as submitting sitemaps to Google Webmaster Tools.

An ASP.NET 3.5 XML sitemap has its own structure and definition. It is not recommended that you to use this XML sitemap for SEO/Google purposes. It is only advisable to use it for ASP.NET navigational web controls.

Build Your Test Website

Before you can learn how to create an XML sitemap, let’s create a test website. Create a project in Visual Web Developer Express: http://www.dotnetdevelopment.net/tutorials/how_to_create_a_project.jpg , and name the project "sitemapexample."

After project creation, there is only one ASP.NET page, which is Default.aspx; however, for this test website, you need to create several ASP.NET pages, which might be placed in different folders. So your website pages and folders are as follows:

/Default.aspx – Home page

/Contact.aspx – Contact

/Privacy.aspx – Privacy

/Terms.aspx – Terms and Conditions

/About/John.aspx – John author page under “About” folder

/About/Peter.aspx – Peter author page under “About” folder

/About/Default.aspx – About page in “About” folder.

To add a new ASP.NET page, you will need to go to Solution Explorer -> right click on the project name (e.g. E:aspdotnetprojectssitemapexample) -> Add New Item -> Select “Web Form” and change the file name to the ASP.NET page name shown above (e.g. Contact.aspx). Check “Place Code in separate file” and under language, select “Visual Basic.” Now click “Add.”

To add a new folder in the root directory, you still need to right click on the project name in Solution Explorer --> “New Folder” and assign a folder name (e.g. “About”)

To add a new ASP.NET page to the “About” folder, right click “About” in Solution Explorer, click “Add new item” and then follow the same procedure for naming the ASP.NET page as was discussed previously.

After all of the ASP.NET pages and folders are created, your Solution Explorer (showing all the pages created) should look like the screen shot below:

For the content, just add one line of content on each page to differentiate them. For example:

“This is the home page” – /Default.aspx

“This is John about page” - /About/John.aspx

You might as well revise the title tag element (<title></title>) to reflect the exact page title. For example:

<title>Home page</title> - /Default.aspx

<title>About John</title> - /About/John.aspx

At this stage, you do not need to add any hyperlinks that define the navigation menu of this test website. This will be done using navigational web controls, and will be covered in a separate tutorial.

Create the sitemap file

Now that you have completed the test website, you will need to create the sitemap file. When creating the sitemap xml file, you need to meet two requirements. First, it should be named "Web.sitemap;" and second, it should be placed in the root directory of the website.

To create a sitemap file, follow the procedure below:

1. In Visual Web Developer, go to View -> Solution Explorer -> right click on the project name -> Add New Item -> Select “Sitemap.”

2. Leave the name at its default, as Web.sitemap.

3. Under language, select Visual Basic.

4. Click “Add.”

The sitemap file should then be added in the root directory of your project folder.

For example:

The following is the default content of the sitemap that needs to be configured in the next section:

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

Configure the sitemap to reflect the website's hierarchy

You will need to create a website hierarchy which you would like to present to your website's users. For this test website, the hierarchy graph is as follows:

It means that the home page (Default.aspx) is above all the other pages, which are shown from the top to the bottom of the structure (e.g. About/Peter.aspx is on the bottom).

Now if you examine the source of the XML sitemap, you can structure the parent URLs and child URLs in a parent and child format. For example:

<siteMapNode url="thisistheparentpage.aspx" title="Parent page" description="">

<siteMapNode url="thisisthefirstchildpage.aspx" title="First child page" description="" />

<siteMapNode url="thisisthesecondchildpage.aspx" title="Second child page" description="" />

</siteMapNode>

Therefore the final web sitemap XML code of this test website will be:

<?xml version="1.0" encoding="utf-8" ?>

<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >

<siteMapNode url="Default.aspx" title="Homepage" description="">

<siteMapNode url="Contact.aspx" title="Contact" description="" />

<siteMapNode url="Privacy.aspx" title="Privacy" description="" />

<siteMapNode url="Terms.aspx" title="Terms and Conditions" description="" />

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

<siteMapNode url="About/John.aspx" title="John author page" description="" />

<siteMapNode url="About/Peter.aspx" title="Peter author page" description="" />

</siteMapNode>

</siteMapNode>

</siteMap>

Important notes on creating Web.sitemap

Using the final Web.sitemap source code above, you will notice that:

1. The parent page (for example /Default.aspx homepage and /About/Default.aspx About page) will end with “>”

2. The child page will end with “/>”

3. The above source code is created manually (e.g. the process of adding the pages). Although it is simple, it can be difficult to maintain or create Web.sitemap if you have a lot of ASP.NET pages or a highly complex ASP.NET website.

In this case, you might as well automate or dynamically create web.sitemap. This tutorial can help you get started: http://www.codeproject.com/KB/aspnet/ScionSiteMapProvider.aspx

4. An XML file is case sensitive, so do not change the casing of those XML tags; if you do, you will get an error.

Test Your Web.Sitemap

Your web.sitemap is an XML file which users cannot understand, or it is not viewable in a web browser. Let us use Web.sitemap as the source code to display the entire website structure/hierarchy in the browser, which your visitors can see.

To do this, let's use one of the navigational web controls called as “TreeView.” Go through the following procedure:

Step 1. Go to the source code view for Default.aspx (home page of the test website) in Visual Web developer.

Step 2. Go to View -> Data -> drag SiteMapDataSource in between the <div> tags within form tags.

Step 3. Go to View -> Data and drag TreeView next to SiteMapDataSource.

Step 4. In the Design View, configure TreeView -> Show Smart tag -> Choose Data Source -> SiteMapDataSource1.

Below is the final source code of Default.aspx including the TreeView web controls:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>Homepage</title>

</head>

<body>

<form id="form1" runat="server">

<div>

This is the homepage.

<br /><br />

<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />

<asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1">

</asp:TreeView>

</div>

</form>

</body>

</html>

Step 5. Go to File -> View in Browser. You should see the entire website hierarchy in links as follows:

Note that without Web.Sitemap, or if there is error in the Web.Sitemap XML syntax, you will not be able to see the correct output in the browser or it will return an error.

You can download the entire source code of the test website here: http://www.dotnetdevelopment.net/tutorials/sitemapexample.zip