通过

演练：ASP.NET Wizard 控件的高级用法

  • 项目

更新：2007 年 11 月

ASP.NET Wizard 控件简化了许多与生成窗体以及收集用户输入的操作关联的任务。在本演练中，将使用 Wizard 控件创建收集用户地址信息的窗体，允许用户接收或取消接收电子邮件更新，并在最后的确认步骤中向用户显示数据和所做的选择。本演练涉及以下任务：

  • 编辑向导步骤的布局。

  • 添加自定义的向导步骤。

  • 以编程方式捕获向导事件。

  • 根据用户的选择对向导进行分支。

  • 在完成步骤中显示用户数据。

先决条件

若要完成本演练，您需要：

  • Microsoft Visual Web Developer。

  • .NET Framework。

创建网站

如果已经在 Visual Web Developer 中创建了网站（例如，按照主题 演练：在 Visual Web Developer 中创建基本网页 中的步骤），则可使用该网站并跳转到本演练后面部分的“向页中添加 Wizard 控件”。否则，按照下面的步骤创建一个新的网站和网页。

创建文件系统网站

  1. 打开 Visual Web Developer。

  2. 在**“文件”菜单上单击“新建网站”**。

    出现**“新建网站”**对话框。

  3. 在**“Visual Studio 已安装的模板”之下单击“ASP.NET 网站”**。

  4. 在**“位置”**框中输入要保存网站页面的文件夹的名称。

    例如，键入文件夹名“C:\WebSites”。

  5. 在**“语言”**列表中，单击您想使用的编程语言。

  6. 单击**“确定”**。

    Visual Web Developer 创建该文件夹和一个名为 Default.aspx 的新页。

向页中添加 Wizard 控件

向页中添加 Wizard 控件

  1. 切换到“设计”视图。

  2. 从**“工具箱”的“标准”**组中，将 Wizard 控件拖动到页面上。

收集名称和地址信息

接下来，对向导的各个步骤进行配置以收集用户数据，提示输入电子邮件地址，然后在完成步骤中显示收集到的数据。

首先，收集用户的名称、地址、城市、省/市/自治区和邮政编码。

配置第一步

  1. 拖动**“Wizard”**控件边沿的控制柄之一，将该控件放大到大约其默认大小的两倍。

  2. 单击**“Wizard”控件中带下划线的文本“步骤 1”，然后单击“Wizard”控件中“步骤 1”**右边的编辑区域。

    现在可以编辑步骤 1 的显示区域。

  3. 键入“名称”。

  4. 从**“工具箱”的“标准”组中，将“TextBox”**控件拖动到文本旁边。

  5. 在“属性”窗口中，将**“TextBox”控件的“ID”**由 TextBox1 更改为“Name”。

  6. 重复该过程，添加标题和**“TextBox”**控件（记得为控件命名，因为以后需要引用这些控件）以收集下列信息：

    • 地址

    • 城市

    • 省/直辖市/自治区/特别行政区

    • 邮政编码

  7. 保存该文件。

添加电子邮件更新选项

在本部分演练中，将允许用户选择是否要接收电子邮件更新。

添加电子邮件更新选项

  1. 单击**“步骤 2”**。

  2. 单击**“步骤 2”**右边的可编辑区域，然后键入“是否接收电子邮件更新？”。

  3. 在问题下面键入“是”。

  4. 在**“工具箱”的“标准”组中，将一个“RadioButton”控件拖动到文本“是”**旁边。

  5. 键入“否”。

  6. 从**“工具箱”中，将另一个“RadioButton”拖动到文本“否”**旁边的控件上。

添加自定义步骤以收集电子邮件地址

在本部分中，您将在向导中添加一个自定义步骤，以收集用户的电子邮件地址。稍后，您将添加代码以便在用户决定不获取电子邮件更新的情况下跳过此步骤。

添加自定义步骤以收集用户的电子邮件

  1. 右击**“Wizard”控件中编辑区域外的位置，然后单击“显示智能标记”**。

  2. 在**“向导任务”对话框中，选择“添加/移除向导步骤”**。

    出现**“WizardStep 集合编辑器”**。

  3. 在**“添加”按钮上的“添加”下拉列表中单击“向导步骤”**。

  4. 单击**“确定”**。

    **“Wizard”**控件显示新的步骤。

  5. 单击新的步骤以切换到编辑模式。

  6. 在可编辑区域中键入“电子邮件地址”。

  7. 在**“工具箱”的“标准”组中，将一个“TextBox”控件拖动到文本“电子邮件地址”**旁边的控件上。

  8. 在“属性”中，将**“TextBox”**控件的 ID 更改为“EmailAddress”，因为稍后需要在代码中引用该控件。

添加完成步骤

现在可以添加完成步骤，该步骤将向用户显示用户数据。

添加完成步骤

  1. 右击**“Wizard”控件，然后单击“显示智能标记”**。

  2. 在控件的**“向导任务”菜单中选择“添加/移除向导步骤”**。

    出现**“WizardStep 集合编辑器”**。

  3. 在**“添加”列表中单击“向导步骤”**。

    “属性”区域显示新步骤的属性。

  4. 在“属性”窗口中，将**“StepType”设置为“完成”**。

  5. 单击**“确定”**。

    **“Wizard”**控件添加新的步骤。

  6. 单击控件上的新步骤，然后单击新步骤右边的可编辑区域。

  7. 从**“工具箱”的“标准”组中，将“Label”**控件拖动到新步骤上。

  8. 按 Enter 创建新行。

  9. 重复步骤 7 五次，创建对应于以下内容的六个**“Label”**控件：

    • 名称

    • 地址

    • 城市

    • 省/市/自治区

    • 邮政编码

    • 电子邮件地址

  10. 保存该文件。

在能够运行该向导之前，需要使用在前三个向导步骤中提供的值填充完成步骤中的标签。

为完成步骤添加代码

在此演练中，完成步骤显示用户数据。若要确保显示这些数据，需要以编程形式填充该步骤的标签。若要显示这些数据，您需要为该页的 Load 事件编写代码。

添加代码

  1. 切换到 Default.aspx，然后在“设计”视图中双击设计图面。

    使用代码编辑器打开该页，然后创建 Page_Load 主干方法。

  2. 添加下面突出显示的代码，以填充完成步骤。

    Private Sub Page_Load(ByVal sender As Object, _
    ByVal e As System.EventArgs) Handles Me.Load
    Label1.Text = Name.Text
    Label2.Text = Address.Text
    Label3.Text = City.Text
    Label4.Text = State.Text
    Label5.Text = PostalCode.Text
    Label6.Text = EmailAddress.Text
End Sub

    void Page_Load(object sender, EventArgs e)
{
    Label1.Text = Name.Text;
    Label2.Text = Address.Text;
    Label3.Text = City.Text;
    Label4.Text = State.Text;
    Label5.Text = PostalCode.Text;
    Label6.Text = EmailAddress.Text;
}

  3. 保存该文件。

测试 Wizard 控件

测试 Wizard 控件

  1. 在“设计”视图中显示 Default.aspx。

  2. 打开控件上的**“向导任务”菜单，然后从“步骤”下拉列表中选择“步骤 1”**。

  3. 按 Ctrl+F5 运行该页。

    w7dyf6b5.alert_note(zh-cn,VS.90).gif说明：

    从“设计”视图运行该页时，浏览器可能会从当前活动的向导步骤开始，而不一定从第一步开始。启动页前，确保在“属性”窗口中将向导的“ActiveStepIndex”属性设置为 0。

  4. 键入名称和地址信息。

  5. 单击**“下一步”**。

  6. 选择一个电子邮件选项。

    在本演练的后面部分，您将编写代码以处理电子邮件选项。

  7. 键入电子邮件地址。

  8. 单击**“完成”**。

    输入的数据会显示在页上。

在下一部分中，您将添加必要的代码，以便让用户在选择不提供电子邮件地址时跳过收集电子邮件的第三个步骤。

添加代码以跳过电子邮件步骤

现在已完成向导的数据收集和布局部分，接下来需要添加一些逻辑，以允许用户在不想接收电子邮件更新时跳过收集电子邮件地址的步骤。可以通过处理 Wizard 控件的 NextButtonClick 事件达到这个目的。处理该事件时，应首先检查向导当前是否处于让用户进行选择的步骤。如果是，检查选择的是哪个 RadioButton 控件。如果用户选择了**“否”**，则增加 Wizard 控件的 ActiveStepIndex 属性值，以跳过请求用户电子邮件地址的向导步骤。

添加代码以跳过第三步

  1. 单击**“Wizard”控件。在“属性”窗口中，为“NextButtonClick”**属性键入“Wizard1_NextButtonClick”，并按 Enter。

    代码编辑器窗口打开并显示代码隐藏页。

  2. 添加下面突出显示的代码，这些代码检查正确的步骤，确定选择的是哪个**“RadioButton”**控件，然后确定是否跳过向导的第 3 步。

    Private Sub Wizard1_NextButtonClick( ByVal sender As Object, _
   ByVal e As System.Web.UI.WebControls.WizardNavigationEventArgs) _     
   Handles Wizard1.NextButtonClick
   If Wizard1.ActiveStepIndex = 1 Then
       If RadioButton1.Checked Then
           ' Collect e-mail address.
           Wizard1.ActiveStepIndex = 2
       Else
           Wizard1.ActiveStepIndex = 3
       End If
   End If
End Sub

    void Wizard1_NextButtonClick(object sender, 
    System.Web.UI.WebControls.WizardNavigationEventArgs e)
{
     if (Wizard1.ActiveStepIndex == 1)
     {
        if (RadioButton1.Checked)
            // Collect ee-mail address.
        {
           Wizard1.ActiveStepIndex = 2;
        } 
        else 
        {
           Wizard1.ActiveStepIndex = 3;
        }
     }
}

    设置 ActiveStepIndex 属性可导致向导直接移动到指定的步骤。

  3. 保存该文件。

测试跳过一个步骤的能力

测试以编程方式跳过一个向导步骤

  1. 在“设计”视图中显示 Default.aspx。

  2. 打开控件上的**“向导任务”菜单，然后从“步骤”下拉列表中选择“步骤 1”**。

  3. 按 Ctrl+F5 运行该页。

  4. 键入名称和地址信息。

  5. 单击**“下一步”**。

  6. 在步骤 2 中选择**“否”**复选框。

  7. 单击**“下一步”**。

    转到完成步骤。

  8. 使用浏览器的后退按钮返回到第一步，或者关闭浏览器并按 Ctrl+F5 重新运行该页。

  9. 在第一步中键入名称和地址信息。

  10. 单击**“下一步”**。

  11. 在步骤 2 中选择**“是”**复选框。

  12. 单击**“下一步”**。

  13. 转到收集电子邮件地址的步骤。

  14. 键入电子邮件地址。

  15. 单击**“下一步”**。

  16. 转到完成步骤。

后续步骤

Wizard 控件简化了用于收集用户数据的窗体的创建。除了这里介绍的内容，您可能还有其他有关窗体以及如何使 Wizard 控件具有不同外观的问题。例如，您可能希望：

请参见

参考

Wizard Web 服务器控件概述