We pay for user submitted tutorials and articles that we publish. Anyone can send in a contributionLearn More
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.
Create a new Website as follows,
Add the required files, folders for navigation.
Now we need to add the folder structure for our application
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.
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.
<siteMapNode> element usually contains a
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.
Title attribute is used as display text when rendering UI for navigational data.
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.
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.
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,
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.
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.
In the page load we have The CreateDataTables() function.
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.
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.
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.
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.
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.
This is how the final output looks like.
This Tutorial was written by Ashwin Kumar.H
Copyright © 2012 Dev102.com
Breeze : Designed by Amit Raz and Nitzan Kupererd