一个帮助多步表单的小型向导

• 下载演示项目 - 25 Kb

引言

Web 交互的本质在于给予和索取。您获取用户的，如信息、评论、信用卡信息等，然后您提供您的服务、反馈、产品，等等。在您的编程生涯中，您很可能已经开发了许多 Web 表单，长短不一，多个表单按类别分解并分阶段执行。在 ASP.NET 2.0 之前的日子里，您需要自己处理每一个细节，设计流程，布局表单，预测用户的每一个操作，并为可能触发的每一个事件编写代码。您不知疲倦地反复做着这些。但现在，有一个名为 Wizard 的新的、精巧的 ASP .NET 2.0 控件，它可以帮助您用几行代码和简单的拖放、点击操作来完成一个多步表单。

ASP .NET 2.0 中的 Wizard 控件是什么？

有一些关于这个小 Wizard 的文章。我发现 这篇文章 特别好。本质上，ASP .NET 2.0 的 Wizard 控件使您能够设计一组需要按顺序处理的表单。但是，Wizard 也足够灵活，允许用户跳过或回溯某些步骤。虽然每个步骤看起来像一个独立的页面，但所有步骤实际上都在同一个页面上。Wizard 控件有三个主要组件：左侧的侧边栏，提供指向每个步骤的链接；内容视图，包含任意数量的用户输入表单控件；导航栏，带有“上一步”、“下一步”、“完成”等按钮，供用户来回导航。图 1 是 Wizard 控件的屏幕截图。

图 1：使用 Wizard 控件安排会议应用程序

如何使用 Wizard？

接下来，我将展示一个简单的“安排会议”应用程序，以说明如何使用 Wizard 控件。

如何添加或删除按钮？

您可以将 Wizard 控件拖放到您的设计表单中。要添加或删除步骤，请使用“添加/删除 WizardSteps”命令调出 WizardStep Collection Editor（WizardStep 集合编辑器），如图 2 所示。您还可以调整 wizardsteps 的顺序。

图 2：WizardStep 集合编辑器。

我的 Wizard 控件的 aspx 代码

<asp:wizard runat="server" id="MyWizard" ActiveStepIndex="0">
<wizardsteps>
        <asp:wizardstep ID="Wizardstep1" runat="server" 
                title="Meeting Name and Time">
            <div style="height:200px">
                <table><tr><td>Meeting Subject</td><td>
                         <asp:textbox runat="server" id="Subject" />
                    <asp:requiredfieldvalidator runat="server" 
                        id="SubjectValidator"
                        text="*"
                        errormessage="Please enter a subject for the meeting" 
                        setfocusonerror="True" 
                        controltovalidate="Subject" />
                    </td></tr>
                </td></tr>
                   <!-- More controls go here  --->
                </table>
                <asp:validationsummary runat="server" 
                    displaymode="List" id="Summary" />                
                
           </div>
        </asp:wizardstep>
        <asp:wizardstep ID="Wizardstep2" runat="server" 
                title="Reserve a conference room">
            <div style="height:200px">
            <!-- Web controls go here  --->
            </div>
        </asp:wizardstep>
    <!-- More WizardSteps  --->
  </wizardsteps>
  </asp:wizard>

正如您所见，所有的 wizardsteps 都包含在 wizardsteps 标签内，而 wizardsteps 标签又位于 <asp:wizard> 标签内。您可以直接向每个 wizardstep 添加表单元素。一旦设置好 wizard，左侧的侧边栏菜单和导航功能也会被设置好并默认显示。但是，您可以将 DisplaySideBar 属性设置为 False 来隐藏侧边栏。

Wizard 的取消按钮

您可以通过将 DisplayCancelButton 属性设置为 True 来为每个步骤启用并显示一个 Cancel（取消）按钮，但然后您需要一个过程来处理 CancelButtonClick 事件。以下是我应用程序中处理该事件的 VB .NET 代码。

'When a concel button is clicked, go back to the first step 
and clean all fields
    Protected Sub MyWizard_CancelButtonClick
    (ByVal sender As Object, ByVal e As System.EventArgs) 
    Handles MyWizard.CancelButtonClick
        'go back to step 1
        MyWizard.ActiveStepIndex = 0

        'clean all data
        Subject.Text = ""
        MeetingDate.Text = ""
        MeetingTime.Text = ""
        RoomReserve.SelectedIndex = 0

        AvailableRoom.SelectedIndex = 0

        Dim i As Integer

        For i = 0 To Equipments.Items.Count - 1
            Equipments.Items(i).Selected = False
        Next

        Organizer.Text = ""
        Title.Text = ""

    End Sub 

完成步骤

在 WizardSteps 中，有五种 Step Type（步骤类型）（表 1）。

值	描述
自动	默认步类型。自动设置步骤顺序，1、2、3...
Start	开始步骤，没有“上一步”按钮。
步骤	中间步骤，有“上一步”和“下一步”按钮。
结束	最后一步，有“上一步”和“完成”按钮。
Complete	摘要步骤，没有任何按钮，通常用于将数据插入数据库并显示任何最终声明、感谢信等。

(表 1)

只有当用户点击最后一歩的“完成”按钮时，才会激活完成步骤。您还需要编写一个过程来处理 FinishButtonClick 事件，如下所示。

  Protected Sub MyWizard_FinishButtonClick
 (ByVal sender As Object, ByVal e As System.Web.UI.WebControls.WizardNavigationEventArgs) 
 Handles MyWizard.FinishButtonClick
  FinalMsg.Text = "You have successfully scheduled an meeting" & _
                 "A conference room has been reserved upon your request!"
        '...Other code goes here

  End Sub

Wizard 的事件

上面我提到了 CancelButtonClick 和 FinishButtonClick 事件，然而，Wizard 控件还有更多事件，例如 ActiveStepChanged、NextButtonClick、Previousclick、SidebarButtonClick 事件，供您控制功能和事件流程。非常频繁地，由于对某个特定问题的响应，有必要跳过一两个步骤。例如，在会议安排应用程序中，如果用户不需要预订房间，wizard 应该跳过房间预订步骤，直接到下一步。以下是实现这一点的代码。

    Private Sub skipStep2()

        'if no need to reserve a room then skip step 2
        If RoomReserve.SelectedIndex = 1 Then
            MyWizard.ActiveStepIndex = 2
            'in case a user use the sidebar link to reserve a room
            AvailableRoom.Enabled = False
            Equipments.Enabled = False
        Else
            MyWizard.ActiveStepIndex = 1
            AvailableRoom.Enabled = True
            Equipments.Enabled = True
        End If

    End Sub

Wizard 的模板和样式

所有 Web 控件的外观或功能都可以自定义。您可以理所当然地认为这一点。您可以使用模板和样式来定制控件和格式。Wizard 有几个模板：HeaderTemplate（头部模板）、StartNavigationTemplate（开始导航模板）、StepNavigationTemplate（步骤导航模板）、FinishNavigationTemplate（完成导航模板）和 SidebarTemplate（侧边栏模板）。您可以使用任何模板来美化您的头部、侧边栏，以及一切。

以下是 SidebarTemplate 的 Aspx 代码

  <sidebartemplate>
        <div style="height:300;padding:0;margin:0">
           <img src="images/meeting.gif" border=0 />
            <asp:datalist runat="Server" id="SideBarList">
                <ItemTemplate>
                    <asp:linkbutton runat="server" id="SideBarButton"/>
                 </ItemTemplate>
                 <SelectedItemStyle Font-Bold=true />
            </asp:datalist> 
            </div>
        </sidebartemplate>

如果您使用 SidebarTemplate，则必须使用 Datalist 来显示链接并为其指定 ItemTemplate。

您还可以调整 HeaderStyle、SidebarStyle、SidebarButtonStyle 等来改变 wizard 的外观，如下面的代码所示。

  
<navigationbuttonstyle borderwidth="1px" width="80px"
            borderstyle="Solid" backcolor="#FFFBFF" 
            BorderColor="#CCCCCC" 
            Font-Names="Verdana" Font-Size="0.8em" 
            ForeColor="#284775" /> 
<headerstyle horizontalalign="Left" font-bold="True" 
            font-size="0.9em" BackColor="#5D7B9D" 
            BorderStyle="Solid" ForeColor="White" /> 
<sidebarstyle backcolor="LightYellow"  
            Font-Size="0.9em" 
            VerticalAlign="Top" BorderWidth="0px"  />
<SideBarButtonStyle Font-Names="Verdana" 
           ForeColor="White" BorderWidth="0px"/>

您还可以应用主题来快速美化您的 Wizard 页面。与 ASP .NET 2.0 的许多控件一样，您可以使用 Wizard 的内置格式。要做到这一点，右键单击 Wizard，然后选择 AutoFormat（自动格式化）命令。这将打开如图 3 所示的 AutoFormat 对话框。

图 3：Wizard 控件的 AutoFormat 对话框