Breadcrumbs in ASP.NET

• Download source files - 2.51 KB

Breadcrumbs without file name appended

Breadcrumbs with file name appended

Introduction

Many popular web sites have a navigational menu near the top of each page so that the user can easily trace his or her steps back through the site. The menu usually looks something like the following (note that these links are inactive):

Home > Products > eWidge

This type of navigation has been named "Breadcrumb" navigation because it is analogous to dropping a trail of breadcrumbs while hiking into the woods, so that you can find your way back out again.

In Version 2, I have converted the script into a custom control.

This article assumes that you have a working knowledge of ASP.NET. To use this control, you must have the ability and knowledge to compile a simple C# script.

Background

I have started to try to learn ASP.NET several times now, but I keep getting sidetracked by my day job. I tackled this little project so that I could continue to learn more about ASP.NET. Since I am just getting started, I would really appreciate feedback on my code: Am I doing anything glaringly wrong? How can I make the script better? Is this code snippet useful to you?

How the code works

Assume we have a web site with the following directory structure:

/
/subdir/
/subdir/subsubdir/

Creating a breadcrumb navigation menu is as simple as extracting the directory names from the path of the current page and substituting the corresponding "friendly" names. (By "friendly" I mean a more human-readable, user-friendly form, so instead of seeing the directory name subdir, you would see the friendly name Sub Directory.) So if we were viewing the page /subdir/subsubdir/Default.aspx, our menu would look like this:

Home > Sub Directory > Sub Sub Directory > Default.aspx

This assumes, we assigned Sub Directory to subdir and Sub Sub Directory to subsubdir. It also assumes that the user has chosen to display the file name at the end of the breadcrumb trail.

During the control's load event, which is handled by the Control_Load event handler, the hyperlinks to each section are generated by appending each directory name to the web site's root URL, in succession.

Finally, after the file's path is parsed and the breadcrumbs are created, the resulting HTML is sent to the browser during the Render method via the HtmlTextWriter object.

Assigning friendly names is addressed in the next section.

Using the code

You will need to modify the directory names and "friendly" names in the HybridDictionary object named labels, located in the BreadCrumbControl constructor. You will need to change them to match the directory structure of your web site.

labels.Add ("subdir", "Sub Directory");
labels.Add ("subsubdir", "Sub Sub Directory");

Whenever you add a new directory to your web site, you must add an entry for it and then recompile the control. If you do not, the page will contain an incomplete breadcrumb trail.

If you have multiple directories with the same name (e.g., images), you only need to make one entry for that directory name.

I elected not to use Visual Studio to create this first version of the control. To compile the code, you may use a command line similar to the following:

csc /out:BreadCrumbs.dll /target:library BreadCrumbs.cs

After successful compilation, place BreadCrumbs.dll in the \bin directory of the web site's root directory.

To use the code, place the following Register directive at the top of your ASP.NET page:

<%@ Register TagPrefix="Sagara" Namespace="Sagara.BreadCrumbs" 
                                            Assembly="BreadCrumbs" %>

To display the breadcrumb control, place a custom control tag in the body of the page where you want the breadcrumbs to appear:

<Sagara:BreadCrumbControl id="breadcrumb" runat="Server" />

You may want to modify one or more of the four public properties to customize the look of the control. These properties have the following functions:

For example, to change the separator character to :, you would change the control's tag to the following:

<Sagara:BreadCrumbControl id="breadcrumb" Separator=":" runat="Server" />

Alternatively, you may modify these properties in the code-behind file prior to compilation.

To-do list

• Per user suggestion, I am investigating the possibility of incorporating data binding into this control.

Conclusion

That's it! As you can see, breadcrumb navigation is very simple in concept and implementation.

If you have any questions, please leave them on the message boards below, and I will respond as soon as possible!

History

• 1.0.0 - 23 Aug 2003

  Initial public release.

• 2.0.0 - 23 Sep 2003

  Converted script into a custom control.