創建圖形麪包屑或過程線索在.NET MVC 2

Question

我有類似於上面的圖像的麪包屑結構。它顯示錶單的進度軌跡，表單名稱和正在顯示的當前頁面，並且還爲用戶提供了過程開始和結束的指南。

這是最初放在經典的ASP。什麼是在MVC 2重新創建這個最好的方法 - C＃

在回答下面的答案之一：我不希望這是整個網站，我正在尋找麪包屑解決方案的集合形式 - 例如，我可能有一組投訴表單或一組建議，因此我需要能夠將表​​單細節傳遞給像助手或函數，然後會輸出類似結果上面的圖像。

這是原來的傳統ASP代碼生成蹤跡..

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 

末級

非常感謝任何建議/指針。

Answer 1

如果你想有一個真正的麪包屑，你可以看看下面的問題（How can dynamic breadcrumbs be achieved with ASP.net MVC?）

除此之外，你可以非常使用邏輯和局部視圖來實現這一點，並在顯示特定圖像從部分視圖看工作流中的特定點。

你也可以看看一些聰明的jQuery http://plugins.jquery.com/project/jBreadCrumb

Answer 2

我們實現了沿着裏面有面包屑，那麼每個MVC頁面，在必要時母版頁線的東西，呼籲文檔加載一些JavaScript設置麪包屑。

我們使用的jQuery所以每一頁上，我們可能有

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

或同級。