Creación de una ruta de navegación gráfica o sendero proceso en .NET MVC 2

Question

tengo una estructura de miga de pan similar a la imagen de arriba. Muestra el recorrido de progreso de los formularios, los nombres de los formularios y la página actual que se muestra y también le da al usuario una guía para el inicio y el final del proceso.

Esto se creó originalmente en ASP clásico. ¿Cuál sería el mejor enfoque para recrear esto en MVC 2 - C#

En respuesta a una de las siguientes respuestas: No quiero que esto se encuentre en todo el sitio, estaba buscando una solución de ruta de exploración para una colección de formularios, así que, por ejemplo, podría tener un conjunto de formularios para una queja o un conjunto de sugerencias, etc. Por lo tanto, debo ser capaz de pasar los detalles del formulario a algo así como a un ayudante o función que luego arrojará un resultado similar al imagen arriba.

Este es el código ASP clásico original que genera el rastro ..

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

Muchas gracias por cualquier sugerencia/punteros.

Answer 1

Si desea una verdadera ruta de navegación, se puede echar un vistazo a la siguiente pregunta (How can dynamic breadcrumbs be achieved with ASP.net MVC?)

Aparte de eso, se puede más o menos lógica de uso y vistas parciales para lograr esto y mostrar una imagen en particular a una punto particular en el flujo de trabajo de una vista parcial.

También puede echar un vistazo a algunos inteligente jQuery http://plugins.jquery.com/project/jBreadCrumb

Answer 2

Implementamos algo en la línea de una página principal que alberga el pan rallado, a continuación, cada página MVC, cuando sea necesario, llama a algunos javascript en la carga de documentos para establecer la ruta de navegación

Hemos utilizado jQuery por lo que en cada página que podríamos tener

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

o similares.