ASP.NET Breadcrumbs with C#

Tags: ASP, C#

4,284 views

2 Comments

(5 votes, average: 4.8 out of 5)

By utilizing breadcrumb navigation you allow your viewers to easily trace their path taken to the current location and back track if necessary.

A breadcrumb navigation usually looks something like:

Main Page > Page Design : ASP.NET Breadcrumbs with C#

Within this article you will learn how to create breadcrumb navigation using ASP.NET and C#.

In the above example we see that the viewer started on the â€™Main Pageâ€™, then moved to the â€˜Page Designâ€™ section, then selected the â€˜ASP.NET Breadcrumbs with C#’ page, where they currently reside. The Main Page and Page Design will be hyperlink so that you can go directly to the above sections.

The first part, â€˜Main Pageâ€™ is where the user is starting; typically something like â€˜Homeâ€™ or â€˜Home Pageâ€™ will be used. However, we will use a variable in our code so that the user may decide what text they would like to use. The next part â€˜Page Designâ€™ is a sub-category that holds the page that the user is currently viewing, â€˜ASP.NET Breadcrumbs with C#â€™. We know that this is the final resting spot because the â€˜:â€™ preceding the page name indicates so. Finally, the â€˜>â€™ is used as a separator for categories, this also is a variable, allowing for a choice of symbol.

using System;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.ComponentModel;
using System.Text;
// We include the System.Text namespace so we can use the StringBuilder object later.
namespace BreadCrumbs
{
///
/// Summary description for ctrlBreadCrumbs.
///
public class ctrlBreadCrumbs : System.Web.UI.WebControls.WebControl
{
///
/// The 3 variables below, Separator, RootName, directoryNameSpacer can be changed to meet your needs
/// PageTitle is pulled from the CodeBehind of the page
///
public string Separator = " > ";
public string RootName = "Home Page";
public char directoryNameSpacer = '_';
private string _PageTitle;

// Above are our variables that we can set:
// Separator is the â€˜>â€™ symbol
// RootName is the homepage anchor text
// directoryNameSpacer is the naming scheme for my directories, for example: search_engine_optimization or website_design (notice the URL in the address bar above)

public string PageTitle
{
get
{
return _PageTitle;
}
set
{
_PageTitle = value;
}
}
///
/// Render this control to the output parameter specified.
///
///

The HTML writer to write out to

protected override void Render(HtmlTextWriter output)
{
StringBuilder sbResult = new StringBuilder();
// sbResult StringBuilder will hold the breadcrumb navigation when done

// get the url root, like www.domain.com
string strDomain = Page.Request.ServerVariables["HTTP_HOST"].ToString();
strDomain.Trim(); // Trim removes leading and trailing whitespace
sbResult.Append ( "" + RootName + "" + Separator );

// gets dir(s), like subdirectory/subsubdirectory/file.aspx
string scriptName = Page.Request.ServerVariables["SCRIPT_NAME"].ToString();
// find the last '/' and Remove the text after it as it's the file name
int lastSlash = scriptName.LastIndexOf('/'); // returns the # of chars. from right to /
string pathOnly = scriptName.Remove(lastSlash, (scriptName.Length - lastSlash));

// create breadcrumb HTML for the directory name(s)
// We Remove the first "/" otherwise when you split the string the first item in array is empty
pathOnly = pathOnly.Substring(1);
string[] strDirs = pathOnly.Split('/');
int nNumDirs = strDirs.Length;

// URLs for breadcrumbs
string strURL = "";
for (int i=0; i
{
strURL += "/"+strDirs[i];

// convert underscores to spaces
strDirs[i] = strDirs[i].Replace(directoryNameSpacer,' ');

int counter = i+1;
if (counter != nNumDirs)
{
sbResult.Append ( "" + strDirs[i] + "" + Separator );
}
else
{
// This is the last directory so don't tack on Separator
sbResult.Append ( "" + strDirs[i] + "" ); }
}
// write the PageTitle, pulled from the CodeBehind!
sbResult.Append ( " : " + this.PageTitle );

output.Write ( sbResult.ToString() );

}
}
}

We are going to use an ASP.NET User control (.ascx) so that we may simply add this control to our pages making it easy to maintain and modify later if we should choose to. For example, if we have 100 pages and we want to modify the separator in our breadcrumb navigation from the â€œ>â€ symbol to an image we will only have to modify 1 page, our .ascx page and not all 100 .aspx pages.

Creating Our Web Pages (.aspx). For each page (.aspx) you create for your website use a literal . This allows us to define the actual title for our page in the code behind. By defining the title of the page in the code behind we gain the benefit of only having to assign it once and have it not only be used for the title of our page, but also be used in our breadcrumb navigation.

Your code behind would look like this:

We created a class for our breadcrumb navigation and used that class for an ASP.NET User control (.aspx). This allows us to simply drop the User control into each web page (.aspx) we create. Once we have our User control in our page we assign the PageTitle in the code behind and this gets used for the site.

Copyright @ Abhishek Arya 2007

Post-Plugin Library missing

Friends' Sites

Featured Links

Advertise Here

Apple Blog » Blog Archive » ASP.NET Breadcrumbs with C# November 11, 2007

[...] By utilizing breadcrumb navigation you allow your viewers to easily trace their path taken to the current location and back track if necessary. (more…) [...]

sharma December 23, 2007

send me some projects on .net

9Tutorials to your Inbox

ASP.NET Breadcrumbs with C#

Friends' Sites

Sponsors

Featured Links

2 Comments

Post a Comment »

Comment Guidelines