Creating a graphical breadcrumb or process trail in .NET MVC 2

Question

I have a breadcrumb structure similar to the image above. It displays the progress trail of the forms, the form names and the current page being displayed and it also gives the user a guide to the start and end of the process.

This was originally put together in classic ASP. What would be the best approach to recreating this in MVC 2 - C#

In reply to one of the answers below: I don't want this to be site-wide, I was looking for a breadcrumb solution for a collection of forms - so for example I might have a set of forms for a complaint or a set for suggestions, etc. So I need to be able to pass the form details into something like a helper or function that will then output a similar result as the image above.

This is the original classic ASP code that generates the trail..

Class BreadCrumb

Private dicCrumbs
Private arrIcons()
Private arrColours()

Public Sub Crumb(Text, Icon)

    dicCrumbs(Text) = Icon

End Sub

Private Sub Class_Initialize()

    Set dicCrumbs = Server.CreateObject("Scripting.Dictionary")

    ReDim arrIcons(2)
    arrIcons(0) = "images/selected-process.gif"
    arrIcons(1) = "images/unselected-process.gif"
    arrIcons(2) = "images/additional-process.gif"

    ReDim arrColours(2)
    arrColours(0) = "#0080C0; font-weight:bold"
    arrColours(1) = "#999999"
    arrColours(2) = "#999999"

End Sub

Public Sub Show()

    Dim strItem, intCrumbs
    %>
    <table style="margin-bottom:10px" class="formbreadcrumbs" cellspacing="0" cellpadding="0" border="0" summary="Bread Crumb Trail">
        <tr>
            <td align="right"><img src="images/left-process30.gif" width="30" height="20" alt=" " /></td>
    <%
    intCrumbs = 0
    For Each strItem In dicCrumbs
        intCrumbs = intCrumbs + 1
        Response.Write "        <td><img src=""" & arrIcons(dicCrumbs(strItem)) & """ width=""25"" height=""20"" alt="" "" /></td>"
        If intCrumbs < dicCrumbs.Count Then
        %>
                <td><img src="images/background-process.gif" width="40" height="20" alt=" " /></td>
                <td><img src="images/background-process.gif" height="20" width="5" alt=" " /></td>
                <td><img src="images/background-process.gif" width="40" height="20" alt=" " /></td>
        <%
        End if
    Next
    %>
            <td align="left"><img src="images/right-process30.gif" width="30" height="20" alt=" " /></td>
        </tr>
        <tr>
    <%
    intCrumbs = 0
    For Each strItem In dicCrumbs
        intCrumbs = intCrumbs + 1
        Response.Write "        <td colspan=""3"" align=""center"" style=""color:" & arrColours(dicCrumbs(strItem)) & "; line-height:0.9em; font-size:x-small"">" & strItem & "</td>"
        If intCrumbs < dicCrumbs.Count Then
        %>
                <td></td>
        <%
        End if
    Next
    %>
        </tr>
    </table>
End Sub

End Class

Many thanks for any suggestions/pointers.

Answer 1

If you want a true breadcrumb, you can have a look at the following Question ( http://stackoverflow.com/questions/1066777/how-can-dynamic-breadcrumbs-be-achieved-with-asp-net-mvc )

Other than that, you could pretty much use logic and partial views to accomplish this and display a particular image at a particular point in the workflow from a partial view.

You could also have a look at some clever jQuery http://plugins.jquery.com/project/jBreadCrumb

Answer 2

We implemented something along the lines of a master page which houses the breadcrumbs, then each MVC page, where necessary, calls some javascript on the document load to set the breadcrumb.

We used jquery so on each page we might have

<script type="javascript">
$(document).ready(function(){
  setBreadCrumb(1);
});
</script>

Or similar.