ASP.NET a true bread crumb navigation
ASP.NET has it's own but it does have its issues.
Such as it reads the path form an XML document so you can only have one path to a page.
If you have more than one path to a page then you get a duplicate node error.
It also generates the links as an image, thus making the page larger than it needs to be,
as with most of the drag and drop functionality.
I needed one where I could access the same page from multiple pages,
and depending on the query string it may display different values.
So, with a little thought I came up with this one.
I use this on most of the sites I build.
Here is the client side script.
This one needs a little client side script so when a link is clicked it will post the form.
This is completely dynamic so the vaues are stored in a form variable every time the page is posted.
This code needs to be placed in the master page or in an external file
included in the master page (which is probably better).
<script type="text/javascript">
//ADD A CLICK HANDLER TO THE PAGE
document.onclick = clickHandler;
//ADD THE FUNCTION TO HANDLE THE CLICK EVENT
function clickHandler(evt) {
//REFERENCE TO THE CLICKED OBJECT DEPENING ON THE BROWSER
var obj = window.event? window.event.srcElement : evt.target;
//CHECK IF THE CLICK WAS ON AN ANCHOR TAG
if (obj.tagName == 'A'){
//CHECK IF THE LINK IS POINTING TO THIS DOMAIN
//IF THE FORM IS POSTED TO ANOTHER DOMAIN THE ASP.NET WILL FREAK OUT
if (obj.href.indexOf("your domain") > 0){
//REFERENCE THE FORM ON THE PAGE
with (document.getElementById('aspnetForm')){
//SET THE FORM ACTION TO THE URL OF THE HYPER LINK
action = obj.href;
//SUBMIT THE FORM
submit();
}
//RETURN FALSE TO MAKE SURE THE LINK CLICK DOES NOT HAPPEN
//BEFORE TH SUBMIT OF THE FORM CAN TAKE PLACE
return false;
} }
//WAS NOT A HYPERLINK THAT WAS CLICKED
return true;
}
</script>
Here is the code for the web.config file.
Starting with the web.config file.
In the pages node we need to set the enableViewStateMac to false
and the enableViewState to false to prevent ASP.NET errors.
<pages enableViewStateMac="false"
enableViewState="false">
The rest is done on the master page file.
On the actual page we need to
store the path of where we have been
and display it on the page in the form of links.
Just need a hidden form field to store the path.
<asp:HiddenField runat="server" ID="hidBreadCrumb" />
and a label to display it.
<asp:label runat="server" ID="lblBreadCrumb" />
Here is the server side code.
NOTE:
A way to look up the text for the link is needed
This could be a Database (which I don't recommend)
or it could be an XML file (which I do recommend)
(The Database would have to use a query every time
a page is loaded where the XML file would be cashed to memory.)
I use my sitemap.xml page to store the link text.
Here is the server side code to place in the Page Load event.
(will not work in the Page Init event)
'THE URL OF THIS PAGE
Dim thisUrl As String = Request.ServerVariables("URL")
This is where we look up the text for the link I mentioned earlier.
'THE LINK DISPLAY TEXT OF THIS PAGE
Dim thisPage As String = site.getPageLinkText()
'STRING OF BREAD CRUMBS STORED IN A HIDDEN FORM FIELD
Dim currCrumbs As String = hidBreadCrumb.Value.ToString
'CLEAR THE HIDDEN BREAD CRUMB VALUE AND THE BREAD CRUMB DISPLAY
hidBreadCrumb.Value = ""
lblBreadCrumb.Text = ""
Useing 2 arrays one that holds the crumbs where the values
are seperated with a semicolon.
Each value is using a pipe to seperate the url form the display text.
'ARRAYS THAT HOLD THE BREAD CRUMB VALUES
Dim arrCrumb As Array
Dim arrCrumbs = Split(currCrumbs, ";")
'LOOP THREW EACH PAGE OF THE HIDDEN BREAD CRUMB
For i As Integer = 0 To UBound(arrCrumbs) - 1
'SPLIT THIS BREAD CRUMB IN TO THE URL AND LINK TEXT
arrCrumb = Split(arrCrumbs(i), "|")
'IF THIS IS A REVISIT EXIT ENDING THE VALUE AT THIS PAGE
If InStr(arrCrumb(0), thisUrl) <> 0 Then Exit For
'ADD THIS PAGE AND URL TO THE BREAD CRUMB HOLDER
hidBreadCrumb.Value += arrCrumb(0) & "|" & arrCrumb(1) & ";"
I like the look of this display.
Notice the <i> is on the outside of the anchor tags.
This is so the JavaScript will see the clicked object as
an 'A' instead of an 'I'.
'ADD THIS PAGE AS A LINK TO THE BREAD CRUMB DISPLAY
lblBreadCrumb.Text += " <i><a href='" & arrCrumb(0) & "'>" & arrCrumb(1) & "</a></i> /"
Next
'ADD THIS PAGE TO THE BREAD CRUMB DISPLAY AND HIDDEN FORM VALUE
lblBreadCrumb.Text += " " & thisPage & ""
hidBreadCrumb.Value += thisUrl & "|" & thisPage & ";"
That is it. Pretty simple huh?
Any questions you can contact me from my contact page.