There are a number of articles present on the Internet showing different ways to develop a sitemap. Most of them use a tree view and a sitemap file but the output rendered usually is clumsy, unstructured and not in a table manner.

Here in this article I have made an attempt to display a sitemap using nested DataList and web. Sitemap file.

Creating The project With Required Files.

Create a new Website as follows,

• Open Visual Studio.Net and go to file menu and select new and then Website as follows,

• Choose Asp.NET Web Site from Visual studio installed templates.
• Choose location as File System.
• Choose Language as Visual C#.
• Finally choose the name and location of your site, in my case I have named it as ‘SitemapDemo’ and then press OK.

Add the required files, folders for navigation.

• The first thing to add is web configuration file. It can be done as follows,
• Right click on the project in the solution explorer and click ‘Add New Item’.
• Choose Web configuration file from the menu and press Add.
• It can also be added by using Website menu and then ‘Add New item’.
• Once the configuration file is added check the following tag is present <compilation debug="false" /> . If it is set to true leave it as it is else change it to false.

Now we need to add the folder structure for our application

• Right click on the project in solution explorer and choose New Folder and name it ‘Shop by Category’
• Right click on the folder and press Add New Item and add and choose WebForm and type the name as ‘Girls.aspx’ and press Add button.

Open the ‘Girls .aspx’ and change the title from ‘Untitled Page’ to ‘SitemapDemo—Girls’ and in the div are type ‘Girls page content goes here……’.

Similarly add the following pages in the same folder and fill their contents.

• Page Name: Boys.aspx
  Title: SitemapDemo—Boys
  Content: Boys page contents…
• Page Name: Clearings.aspx
  Title: SitemapDemo—Clearings
  Content: Clearings page contents …
• Page Name: FastSelling.aspx
  Title: SitemapDemo—Fast Selling
  Content: Fast Selling page …

Similarly create a following folder, file structure in your application,

So a total of 5 folders ‘About Us’,’My Details’,’My Shopping’,’Shop by category ’ with their content pages should be created.

Now we need to add a web.sitemap file describing the sitemap of the Website.

These are the some of the rules we need to remember while creating a web.sitemap(XML) file.

• The XML file must contain a <siteMap> tag surrounding the content
• The <siteMap> tag can only have one <siteMapNode> child node (the "home" page)
• Each <siteMapNode> can have several child nodes (web pages)
• Each <siteMapNode> has attributes defining page title and URL.

An individual <siteMapNode> element usually contains a Url, Title and Description attribute.

The Url attribute can indicate a virtual path that corresponds to a page in your application. It can also contain paths to pages in other applications, or URLs that point at completely different web sites.

The Title attribute is used as display text when rendering UI for navigational data.

If a description attribute is present, server controls may use this information to display tool tips or ALT text.

Note: Sitemap nodes at the same level cannot have same title and URL whereas sub sitemap nodes can have.

Add a site map file to the application.

Right click on the project and select Add New Item and select ‘SiteMap’ from the menu and press Add.

Now just replace the contents present in the file with the following contents to match the folder structure created.

Configuring the sitemap file in web.config

Once this is done we can configure the sitemap file in web.cofig with a name of our choice.

Add the following code in your configuration file under <system.web>

section after <compilation debug="true"> as follows,

   1: <siteMap>

   2:     <providers>

   3:         <add name="MySitemap" 

   4:              type="System.Web.XmlSiteMapProvider" 

   5:              siteMapFile="Web.sitemap"/>

   6:     </providers>

   7: </siteMap>

Here name can contain any name of our choice and siteMapFile is the path of our web.sitemap file in the application. You can also paste it under a folder and call it by specifying its path as ~/Foldername/Filename.

Note: I have written a comment in the web.sitemap file. Please read it..

Now add new page called as Sitemap.aspx under the root.

Change its title to ‘SitemapDemo—SiteMap’.

Note: I have commented most of the content in the code so will just provide and overall idea of the code below.

Explanation of the ASPX page

Have added a DataList with repeat direction as horizontal and repeat columns as 2. You can change the repeat columns depending on your requirement.

The DataList contains a DataList within itself. The parent DataList will have all the headings of the sitemap(s) like ‘My shopping’,’My details’ etc i.e. the 1st level node information.

The child DataList will have the sitemapnodes present with the parent DataList. This is archived by the OnItemDataBound event of the DataList.

Explanation of the ASPX.CS Page.

In the page load we have The CreateDataTables() function.

• This function created two DataTable structures for the first level node and second level nodes storing the url, title information.

ReadFirstLevelNodes()

• This function reads the web.sitemap file and extracts the the URL. Title information and stores them in the DataTable.

ReadSecondLevelNodes()

• Once the first level nodes are binded to the parent DataList we capture the itemdatabound event to display the second level nodes.

Note : Also remember to create a folder named Images in the root of the application and paste an image of your choice to appear beside the sitemap(s) links. I have also attached the image in the application.

Conclusion:

It is easy to maintain the web.sitemap file and add the sitemap details there. It can be easily edited at any point of time.

No need to recompile or anything.

ASPX.CS pages Individual methods explanation

This method is used to create the DataTable for the first level,second nodes present in the sitemap file.

The tables created are stored in viewstate for later retrieval.

   1: protected void CreateDataTables()

   2: {

   3:    //create two datatable(s) and insert two columns(url,title) in each.

   4:    DataTable tblFirstLevelNodesTable = new DataTable();

   5:    tblFirstLevelNodesTable.Columns.Add(new DataColumn("url", typeof(string)));

   6:    tblFirstLevelNodesTable.Columns.Add(new DataColumn("title", typeof(string)));

   7:    DataTable tblSecondLevelNodesTable = new DataTable();

   8:    tblSecondLevelNodesTable.Columns.Add(new DataColumn("url", typeof(string)));

   9:    tblSecondLevelNodesTable.Columns.Add(new DataColumn("title", typeof(string)));

  10:    //store them in viewstate for later retrival

  11:    ViewState["FirstLevelNodesTable"] = tblFirstLevelNodesTable;

  12:    ViewState["SecondLevelNodesTable"] = tblSecondLevelNodesTable;

  13: }

This method is used to read the first level nodes present in the web.sitemap file. First we check if the root node is present and if any child nodes present.if yes we iterate till the end and store all the first level nodes in the first DataTable created and bind it to the parent DataList.

   1: protected void ReadFirstLevelNodes()

   2: {

   3:     //here MySitemap is the name we give in web.cofig file.

   4:     objSitemapProvider = SiteMap.Providers["MySitemap"];

   5:     //check if the root node is there and it is having child nodes if yes

   6:     if (objSitemapProvider != null && objSitemapProvider.RootNode != null 

   7:         && objSitemapProvider.RootNode.ChildNodes.Count > 0)

   8:     {

   9:         //get first level nodes

  10:         SiteMapNodeCollection objRootFirstLevelNodesCollection = 

  11:             objSitemapProvider.RootNode.ChildNodes;

  12:         //Response.Write(objRootFirstLevelNodesCollection.Count.ToString());

  13:         DataTable tblFirstLevelNodesTable = null;

  14:         // check id th viewstate is not empty then typecast the 

  15:         //datatable and add rows in it

  16:         if (ViewState["FirstLevelNodesTable"] != null)

  17:         {

  18:             tblFirstLevelNodesTable = (DataTable)ViewState["FirstLevelNodesTable"];

  19:         }

  20:         if (tblFirstLevelNodesTable != null)

  21:         {

  22:             //iterate through the sitemapnodecollection until all 

  23:             //first level nodes are read

  24:             for (int cntItems = 0; cntItems < objRootFirstLevelNodesCollection.Count; 

  25:                 cntItems++)

  26:             {

  27:                 //Create a new row and add it to the table

  28:                 DataRow tempRow = tblFirstLevelNodesTable.NewRow();

  29:                 tempRow["url"] = objRootFirstLevelNodesCollection[cntItems].Url.Trim();

  30:                 tempRow["title"] = objRootFirstLevelNodesCollection[cntItems].Title.Trim();

  31:                 tblFirstLevelNodesTable.Rows.Add(tempRow);

  32:             }

  33:         }

  34:         else

  35:         {

  36:             lblMsg.Text = "Datatable not created.";

  37:             lblMsg.ForeColor = System.Drawing.Color.Red;

  38:         }

  39:  

  40:         if (tblFirstLevelNodesTable.Rows.Count > 0 

  41:             && tblFirstLevelNodesTable.HasErrors == false)

  42:         {

  43:             dtlFirstLevalNodes.DataSource = tblFirstLevelNodesTable;

  44:             dtlFirstLevalNodes.DataBind();

  45:         }

  46:     }

  47:     else

  48:     {

  49:         lblMsg.Text = "Either web.sitemap file is missing or no contents in it.";

  50:         lblMsg.ForeColor = System.Drawing.Color.Red;

  51:     }

  52: }

This method is used to read the second level nodes present in the web.sitemap file. First we check if the first level node is present and if any child nodes present.if yes we iterate till the end and store all the second level nodes in the second DataTable created and bind it to the child DataList.

   1: private void ReadSecondLevelNodes(string url, DataTable tblSecondLevelNodes

   2:                                 , DataList dtlSecondLevalNodes)

   3: {

   4:     if (objSitemapProvider != null)

   5:     {

   6:         SiteMapNode objNode = objSitemapProvider.FindSiteMapNode(url);

   7:         if (objNode.HasChildNodes)

   8:         {

   9:             SiteMapNodeCollection objRootSecondLevelNodesCollection = objNode.ChildNodes;

  10:             //iterate through the sitemapnodecollection until all child nodes are read

  11:             for (int cntItems = 0; cntItems < objRootSecondLevelNodesCollection.Count;

  12:                 cntItems++)

  13:             {

  14:                 //Create a new row and add it to the table

  15:                 DataRow tempRow = tblSecondLevelNodes.NewRow();

  16:                 tempRow["url"] = objRootSecondLevelNodesCollection[cntItems].Url.Trim();

  17:                 tempRow["title"] = objRootSecondLevelNodesCollection[cntItems].Title.Trim();

  18:                 tblSecondLevelNodes.Rows.Add(tempRow);

  19:             }

  20:             //Bind the datatable to the child datalist

  21:             if (tblSecondLevelNodes.Rows.Count > 0 && 

  22:                 tblSecondLevelNodes.HasErrors == false)

  23:             {

  24:                 dtlSecondLevalNodes.DataSource = tblSecondLevelNodes;

  25:                 dtlSecondLevalNodes.DataBind();

  26:             }

  27:         }

  28:     }

  29: }

This is how the final output looks like.

To get the Sample Project Grab our feed and get the password to the Freebies page

This Tutorial was written by Ashwin Kumar.H