ASP.Net Website Navigation Using a SiteMap
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.
- What is ASP.Net?
- ASP.Net for PHP Developers
- Creating a Simple ASP.Net Page
- ASP.Net Website Navigation Using a SiteMap
- Using ASP.Net Master Pages and Content Pages
- Validating Input using ASP.Net
- Tracing and Remote Debug in ASP.Net
- Creating Custom Error Pages with ASP.Net
- Managing Session State in ASP.Net
- Using Themes and Skins in ASP.Net
- Creating User Controls in ASP.Net
- Difference between ASP.Net User and Custom Server Controls
- Creating Fully Themable Websites with ASP.Net
- Ultimate Guide to the Web.Config File
- Adding StyleSheets to ASP.Net via C#
- Extending the Web Sitemap Xml Document
Adverts Blocked Please disable AdBlocking software and allow me to set cookies so that I can continue providing free content and services.
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.
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
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 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:
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
There are no comments for this post. Be the first!