ASP.NET Breadcrumbs with C#

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.

</p> <p>using System;<br /> using System.Web.UI;<br /> using System.Web.UI.WebControls;<br /> using System.ComponentModel;<br /> using System.Text;<br /> // We include the System.Text namespace so we can use the StringBuilder object later.<br /> namespace BreadCrumbs<br /> {<br /> ///<br /> /// Summary description for ctrlBreadCrumbs.<br /> ///<br /> public class ctrlBreadCrumbs : System.Web.UI.WebControls.WebControl<br /> {<br /> ///<br /> /// The 3 variables below, Separator, RootName, directoryNameSpacer can be changed to meet your needs<br /> /// PageTitle is pulled from the CodeBehind of the page<br /> ///<br /> public string Separator = ” > “;<br /> public string RootName = “Home Page”;<br /> public char directoryNameSpacer = ‘_’;<br /> private string _PageTitle;</p> <p>// Above are our variables that we can set:<br /> // Separator is the ‘>’ symbol<br /> // RootName is the homepage anchor text<br /> // directoryNameSpacer is the naming scheme for my directories, for example: search_engine_optimization or website_design (notice the URL in the address bar above)</p> <p>public string PageTitle<br /> {<br /> get<br /> {<br /> return _PageTitle;<br /> }<br /> set<br /> {<br /> _PageTitle = value;<br /> }<br /> }<br /> ///<br /> /// Render this control to the output parameter specified.<br /> ///<br /> ///</p> <p>

The HTML writer to write out to

<br /> protected override void Render(HtmlTextWriter output)<br /> {<br /> StringBuilder sbResult = new StringBuilder();<br /> // sbResult StringBuilder will hold the breadcrumb navigation when done</p> <p>// get the url root, like www.domain.com<br /> string strDomain = Page.Request.ServerVariables["HTTP_HOST"].ToString();<br /> strDomain.Trim(); // Trim removes leading and trailing whitespace<br /> sbResult.Append ( “” + RootName + “” + Separator );</p> <p>// gets dir(s), like subdirectory/subsubdirectory/file.aspx<br /> string scriptName = Page.Request.ServerVariables["SCRIPT_NAME"].ToString();<br /> // find the last ‘/’ and Remove the text after it as it’s the file name<br /> int lastSlash = scriptName.LastIndexOf(’/'); // returns the # of chars. from right to /<br /> string pathOnly = scriptName.Remove(lastSlash, (scriptName.Length - lastSlash));</p> <p>// create breadcrumb HTML for the directory name(s)<br /> // We Remove the first “/” otherwise when you split the string the first item in array is empty<br /> pathOnly = pathOnly.Substring(1);<br /> string[] strDirs = pathOnly.Split(’/');<br /> int nNumDirs = strDirs.Length;</p> <p>// URLs for breadcrumbs<br /> string strURL = “”;<br /> for (int i=0; i<br /> {<br /> strURL += “/”+strDirs[i];</p> <p>// convert underscores to spaces<br /> strDirs[i] = strDirs[i].Replace(directoryNameSpacer,’ ‘);</p> <p>int counter = i+1;<br /> if (counter != nNumDirs)<br /> {<br /> sbResult.Append ( “” + strDirs[i] + “” + Separator );<br /> }<br /> else<br /> {<br /> // This is the last directory so don’t tack on Separator<br /> sbResult.Append ( “” + strDirs[i] + “” ); }<br /> }<br /> // write the PageTitle, pulled from the CodeBehind!<br /> sbResult.Append ( ” : ” + this.PageTitle );</p> <p>output.Write ( sbResult.ToString() );</p> <p>}<br /> }<br /> }<br />

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.

</p> <p><%@ Register TagPrefix=”bc” Namespace=”BreadCrumbs” Assembly=”BreadCrumbs” %></p> <p>protected BreadCrumbs.ctrlBreadCrumbs bc1;</p> <p>private string _strHeaderText;<br /> public string HeaderText<br /> {<br /> get<br /> {<br /> return _strHeaderText;<br /> }<br /> set<br /> {<br /> _strHeaderText = value;<br /> }<br /> }</p> <p>private void Page_Load(object sender, System.EventArgs e)<br /> {<br /> // Put user code to initialize the page here<br /> bc1.PageTitle = HeaderText;<br /> }<br />

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:

</p> <p>public class CodeBehind_for_page: System.Web.UI.Page<br /> {<br /> protected System.Web.UI.WebControls.Literal lblPageTitle;<br /> protected NameSpace.headerBreadCrumb header;</p> <p>private void Page_Load(object sender, System.EventArgs e)<br /> {<br /> // Put user code to initialize the page here<br /> string PageTitle = “ASP.NET Breadcrumbs with C#”;<br /> lblPageTitle.Text = PageTitle;<br /> header.HeaderText = PageTitle;<br /> }<br /> }</p> <p>

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