Web Design that taps into the haromny and vision of your dreams.

ASP.Net Website Navigation Using a SiteMap

Website navigation with sitemaps

Written By on in C#

850 words, estimated reading time 4 minutes.

A website with only one page isn't much use, so this tutorial will guide you through adding more pages to your project and linking them together with Hyperlinks, Navigation Menus and Site Map Paths.

Active Server Pages (ASP.Net) Series
  1. What is ASP.Net?
  2. ASP.Net for PHP Developers
  3. Creating a Simple ASP.Net Page
  4. ASP.Net Website Navigation Using a SiteMap
  5. Using ASP.Net Master Pages and Content Pages
  6. Validating Input using ASP.Net
  7. Tracing and Remote Debug in ASP.Net
  8. Creating Custom Error Pages with ASP.Net
  9. Managing Session State in ASP.Net
  10. Using Themes and Skins in ASP.Net
  11. Creating User Controls in ASP.Net
  12. Difference between ASP.Net User and Custom Server Controls
  13. Creating Fully Themable Websites with ASP.Net
  14. Ultimate Guide to the Web.Config File
  15. Adding StyleSheets to ASP.Net via C#
  16. Extending the Web Sitemap Xml Document

I have created a basic website with a few sample pages (File » New » File » Web Form) to mimic a business site. These pages all inherit from a Master Page into which I will insert the navigation elements. I have created a series of pages that will mimic a business website.

You will also need to create an XML Sitemap for the project as this will be used for some of the navigation items and page titles.

ASP.Net Website Navigation Using a SiteMap
ASP.Net Website Navigation Using a SiteMap

Sitemaps

Sitemaps are an XML format document that is used by the navigation controls to allow navigation between pages. This is a Microsoft proprietary format and should not be confused with a Google XML Sitemap. The role of the sitemap is to inform ASP.Net how the pages of the site interact and relate to each other. You can add a sitemap from the Add New Item dialogue. This is how the sitemap looks for my sample site:

<?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="This is our homepage">
      <siteMapNode url="about.aspx" title="About Us"  description="This page is all about our company" />
      <siteMapNode url="products.aspx" title="Products"  description="This is our main product page" >
        <siteMapNode url="product1.aspx" title="Sample Product 1"  description="This is a sample product" />
        <siteMapNode url="product2.aspx" title="Sample Product 2"  description="This is a sample product" />
      </siteMapNode>
      <siteMapNode url="services.aspx" title="Our Services"  description="These are the services we provide" />
      <siteMapNode url="contact.aspx" title="Contact Us"  description="How to contact us">
        <siteMapNode url="map.aspx" title="How to Find Us"  description="A Map of how to find us" />
      </siteMapNode>
    </siteMapNode>
</siteMap>
 

From this, we can see that there are two sample products that are child pages of the main product page and we have a map as a child of the contact us page. We can use a feature of the Sitemap object to use the title and description specified here from within the content and master page.

In the Master Page I am going to use the title property to specify the page title, and in the content page, I am going to write a header tag with the title. You can also use the same technique for the meta description if you wish.

<title><%= SiteMap.CurrentNode.Title %></title>

Title Tag from XML Sitemap in Master Page

<h1><%= SiteMap.CurrentNode.Title %></h1>
<em><%= SiteMap.CurrentNode.Description%></em>

Heading from XML Sitemap in Content Page

Hyperlinks

You are probably familiar with the standard <a href=""></a> style of hyperlink, but ASP.Net provides a hyperlink object which links into existing pages. This object is found within the standard items of the toolbox and is configurable from the properties window.

<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="products.aspx" Text="Products">Products</asp:HyperLink>

This will be rendered on the browser as

<a id="ctl00_ContentPlaceHolder1_HyperLink1" href="products.aspx">Products</a>

Navigation Tree

Navigation trees provide a collapsible, hierarchical list of the pages on the side. It shows each page in an indented list like the folder view on Windows Explorer. Navigation levels can be set to expand or collapse if they contain child categories. I have placed my TreeView object in the master page and contained with a div that aligns right.

<div style="float:right">
  <asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1" >
  </asp:TreeView>
  <asp:SiteMapDataSource ID="SiteMapDataSource1" Runat="server"></asp:SiteMapDataSource>
</div>

The SiteMapDataSource object creates a link between the TreeView and the web.sitemap file. When you view the project you should see a navigation tree like this:

ASP.Net TreeView XML Sitemap
ASP.Net TreeView XML Sitemap

SiteMapPath or Breadcrumb Trail

This is probably the easiest control to use for navigation, as you do not need to do anything apart from dropping it into a placeholder. Just drag the object from the toolbox to the page and build the project. When you preview the project now you will see a breadcrumb trail which will illustrate the current page and the pages higher up the hierarchy.

All of these tools can be styled using the built-in properties or through CSS classes to create a better visual experience.

Last updated on: Friday 23rd June 2017

 

Comments

There are no comments for this post. Be the first!

 

Leave a Reply

Your email address will not be published.





If you find something abusive or that does not comply with our terms or guidelines please flag it as inappropriate.

Copyright © 2001-2018 Tim Trott, all rights reserved. Web Design by Azulia Designs

This web page is licensed for your personal, private, non-commercial use only.

Disclaimer, Privacy & LegalSitemapContact Me