c# - 如何在ASP.NET MVC 2应用程序中实现向导类型的页面导航？

Question

我在Visual Studio 2008中使用ASP.NET MVC 2和.Net 3.5。

好的，我所说的“向导类型页面导航”是一个站点，您可以在其中找到给定流程或工作流程中的各个阶段。有某种视觉上的表示来指示您处于舞台的哪一部分。我已经通过以下方式实现了这一部分（尽管它闻起来像是hack）：

CSS类当前表示活动页面。
css class notcurrent表示活动页面（即您不在的页面）

我在名为NavigationTracker的类中声明了以下方法。

public static String getCss(String val, String currView)
{
    String result = String.Empty;
    String trimmedViewName = currView.Substring(currView.LastIndexOf("/") + 1).Replace(".aspx", "");
    if (val.ToLower().Equals(trimmedViewName.ToLower()))
        result = "current";
    else
        result = "notcurrent";

    return result;
}

我的阶段处于这样的控件中：

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<%@ Import Namespace="TheProject.Models" %>

<link href="../../Content/custom.css" rel="stylesheet" type="text/css" />
<% 
   String currentView = ((WebFormView)ViewContext.View).ViewPath;
%>
<table width="100%">
    <tr>       
        <td class="<%= NavigationTracker.getCss("LogIn",currentView)%>"  style="width:18%;">Log In</td>
        <td class="<%= NavigationTracker.getCss("YearSelect",currentView)%>"  style="width:18%;">Year Section</td>
        <td class="<%= NavigationTracker.getCss("GoalEntry",currentView)%>"  style="width:18%;">Goals</td>
        <td class="<%= NavigationTracker.getCss("AssessmentEntry",currentView)%>"  style="width:18%;">Assessment</td>
        <td class="<%= NavigationTracker.getCss("SummaryEntry",currentView)%>"  style="width:18%;">Summary</td>                
    </tr>
</table>

*******************这是我需要帮助的地方***********

为了补充此过程，我想创建一个仅具有“上一个”和“下一个”按钮的用户控件，以管理该过程。到目前为止，我遇到的一个麻烦是不能将此控件放在母版页中，而必须在表单结束之前将其包含在每个视图中。我不太在乎。单击上一个或下一个按钮，将包含表单提交给适当的操作；但是，我不确定如何执行以下操作：

1）检测是否单击了上一个或下一个按钮
2）在过程的开始和结束分别显示“上一个”和“下一个”按钮的显示/隐藏逻辑。

通常，我在应用程序中注意到的另一个奇怪之处是，在浏览了过程的几页之后，如果单击“后退”按钮，则模型中的某些值会填充在页面上，而其他值不会填充。例如，显示为文本区域输入的文本，但是未选择为单选按钮选择的值，但是当直接检查模型时，适当的对象确实具有要绑定到单选按钮的值。

我可能只需要将最后一部分放在一个新问题中。我的主要问题是导航控件。有关处理该逻辑并检测是否单击了“下一个”或“上一个”的任何指示或技巧将最有帮助。

编辑1

我想过要在显示上一个和下一个按钮的控件中放置一个隐藏字段。根据单击的按钮，我将使用JavaScript更新隐藏字段的值。现在的问题似乎在于，从未创建隐藏字段，也从未与表单一起提交过隐藏字段。我已经修改了控制器发布参数以接受附加字段，但是它永远不会提交，也不会在FormCollection中。

这是隐藏字段的代码。请注意，它是在用户控件中生成的，该控件在父视图的表单内部被调用（希望如此）。

<% Html.Hidden("navDirection", navDirection); %>

有什么想法吗？

编辑2

我已经解决了所有这些问题。我将最迟在星期二详细发布代码。下面介绍的解决方案可能会被选为答案，这使我进入了正确的思考过程。

简而言之，解决方案是要有一个类似于导航类的Navigation类，并根据当前视图和所有视图的字符串列表来确定下一页或上一页。创建了部分视图/用户控件以显示“上一个” /“下一个”按钮。用户控件具有2个隐藏字段：1）一个具有当前视图值的字段2）一个指示导航方向（上一个或下一个）的字段。根据单击的按钮，使用JavaScript来更新隐藏的导航字段值。与当前视图相比，用户控件中的逻辑确定是根据向导中的第一个视图还是最后一个视图来确定是否显示“上一个”或“下一个”按钮。

所有人都说，我对结果非常满意。当我回到这一点时，我可能会发现一些代码异味的问题，但是目前，它仍然有效。

谢谢大家的帮助！

编辑3-解决方案

这是我用来显示“下一个”和“上一个”导航按钮的控件的代码：

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<%@ Import Namespace="Project.Models" %>
<link href="../../Content/custom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" >
    function setVal(val) {
        var nav = document.getElementById("NavigationDirection");
        nav.value = val;
    }
</script>

<% 
   String currentView = ((WebFormView)ViewContext.View).ViewPath;    
   String navDirection = "empty";
   currentView = NavigationTracker.getShortViewName(currentView);
%>

<input type="hidden" value="<%= currentView %>" name="CurrentView" id="CurrentView" />
<input type="hidden" value="<%= navDirection %>" name="NavigationDirection" id="NavigationDirection" />

<% if( currentView != NavigationTracker.FirstPage) {  %>
    <div style="float:left;">        
        <input type="submit" value="Previous" onclick="setVal('previous')" />      <!-- On click set navDirection = "previous" -->
    </div>
<% } %>

<% if (currentView != NavigationTracker.LastPage)
   {  %>
<div style="float:right;">
    <input type="submit" value="Next" onclick="setVal('next')"  />              <!-- On click set navDirection = "next" -->
</div>    
<% } %>

从那里，您可以在所需的视图上，在窗体的结束标记之前呈现控件，如下所示：

<% Html.RenderPartial("BottomNavControl"); %>
    <% } %>

现在，我无法真正发布所有NavigationTracker代码，但是可以根据当前视图和方向（从上一个或下一个下一个）。

public String NextView
{
    get
    {
        if (String.IsNullOrEmpty(this.NavigationDirection)) return string.Empty;
        int index = this.MyViews.IndexOf(this.CurrentView);
        String result = string.Empty;
        if (this.NavigationDirection.Equals("next") && (index + 1 < MyViews.Count ))
        {
            result = this.MyViews[index + 1];
        }
        else if (this.NavigationDirection.Equals("previous") && (index > 0))
        {
            result = this.MyViews[index - 1];
        }
        return result;
    }
}

现在，执行所有这些操作会带来一些副作用，这些副作用很容易被视为代码异味。首先，我必须修改所有标记为[HTTPPOST]的控制器方法，以接受NavigationTracker对象作为参数。该对象包含辅助方法以及CurrentView和NavigationDirection属性。完成此操作后，我可以在所有操作中以相同的方式获得下一个视图：

return RedirectToAction(nav.NextView);

其中nav是NavigationTracker类型。

另一个注意事项是NavigationTracker的FirstPage和LastPage属性是静态的，因此我实际上是在global.asax.cs文件中使用NavigationTracker.FirstPage进行路由。这意味着我可以转到我的NavigationTracker类，并在整个应用程序的一个位置更改流。

我很乐意对此解决方案提出任何意见或批评。我承认这可能不是一个很棒的解决方案，但是乍看之下，我对此感到非常满意。

希望能帮助到你。

Answer 1

您应该实现强类型视图或控件。在此类型中，定义一个属性，指示您所处的位置以及其他逻辑。例如：

public class WizardView
{
     public List<string> Steps { get; set; }
     public int CurrentStepNumber {get;set;}

     public bool ShowNextButton
     {
         get
         {
             return CurrentStepNumber < this.Steps.Count-1;
         }
     }  

     public bool ShowPreviousButton
     {
         get
         {
             return CurrentStepNumber > 0;
         }
     }  
}

和您的控制权：

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<WizardView>" %>


    <table width="100%">
       <tr>    

         <% 
            int index=0;
            foreach(string step in Model.Steps)
            {
            %>   
                <td class='<%=Model.CurrentStep==index?"current":"notcurrent" %> style="width:18%;">
                       <%= step %>
               </td>
           <%
                index++;  
             } %>
        </tr>
</table>

在您的控制器中

public ActionResult MyAction(int step)
{
    return View (new WizardControl {
       Steps = Myrepository.getSteps();
       CurrentStep = step
     });
}

}