在 .NET MVC 2 中创建图形面包屑或流程跟踪

Question

我有一个类似于上图的面包屑结构。它显示表单的进度轨迹、表单名称和当前显示的页面，并且还为用户提供流程开始和结束的指南。

这最初是在经典 ASP 中组合在一起的。在 MVC 2 - C# 中重新创建此内容的最佳方法是什么

回复以下答案之一：我不希望这是站点范围内的，我一直在寻找表单集合的面包屑解决方案 - 所以对于例如，我可能有一组投诉表单或一组建议表单等。因此，我需要能够将表​​单详细信息传递给类似帮助程序或函数的东西，然后输出与上图类似的结果。

这是生成跟踪的原始经典 ASP 代码。End

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

Class

非常感谢您的任何建议/指示。

Answer 1

如果您想要真正的面包屑，您可以查看以下问题（ 如何使用 ASP.net MVC 实现动态面包屑？）

除此之外，您几乎可以使用逻辑和部分视图来完成此任务，并在工作流程中的特定点显示特定图像从局部来看。

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

Answer 2

我们按照包含面包屑的母版页的方式实现了一些东西，然后每个 MVC 页面在必要时在文档加载上调用一些 javascript 来设置面包屑。

我们使用了jquery，所以在每个页面上我们可能有

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

或类似的。