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

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

  • 编辑向导步骤的布局。

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

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

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

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

<script type="text/Javascript"> var ExpCollDivStr = ExpCollDivStr; ExpCollDivStr = ExpCollDivStr + "ctl00_LibFrame_ctl0892da73e,"; var ExpCollImgStr = ExpCollImgStr; ExpCollImgStr = ExpCollImgStr + "ctl00_LibFrame_ctl08img,"; </script>
<script type="text/Javascript"> var ExpCollDivStr = ExpCollDivStr; ExpCollDivStr = ExpCollDivStr + "ctl00_LibFrame_ctl10d541dc3,"; var ExpCollImgStr = ExpCollImgStr; ExpCollImgStr = ExpCollImgStr + "ctl00_LibFrame_ctl10img,"; </script> 向页中添加 Wizard 控件向页中添加 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. 保存该文件。

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

为完成步骤添加代码为完成步骤添加代码
<script type="text/Javascript"> var ExpCollDivStr = ExpCollDivStr; ExpCollDivStr = ExpCollDivStr + "ctl00_LibFrame_ctl1159a7cc9,"; var ExpCollImgStr = ExpCollImgStr; ExpCollImgStr = ExpCollImgStr + "ctl00_LibFrame_ctl11img,"; </script>
<script type="text/Javascript"> var ExpCollDivStr = ExpCollDivStr; ExpCollDivStr = ExpCollDivStr + "ctl00_LibFrame_ctl1238b0a6a,"; var ExpCollImgStr = ExpCollImgStr; ExpCollImgStr = ExpCollImgStr + "ctl00_LibFrame_ctl12img,"; </script>
<script type="text/Javascript"> var ExpCollDivStr = ExpCollDivStr; ExpCollDivStr = ExpCollDivStr + "ctl00_LibFrame_ctl134a44461,"; var ExpCollImgStr = ExpCollImgStr; ExpCollImgStr = ExpCollImgStr + "ctl00_LibFrame_ctl13img,"; </script>
<script type="text/Javascript"> var ExpCollDivStr = ExpCollDivStr; ExpCollDivStr = ExpCollDivStr + "ctl00_LibFrame_ctl14f1d8ac3,"; var ExpCollImgStr = ExpCollImgStr; ExpCollImgStr = ExpCollImgStr + "ctl00_LibFrame_ctl14img,"; </script>
<script type="text/Javascript"> var ExpCollDivStr = ExpCollDivStr; ExpCollDivStr = ExpCollDivStr + "ctl00_LibFrame_ctl15acae01b,"; var ExpCollImgStr = ExpCollImgStr; ExpCollImgStr = ExpCollImgStr + "ctl00_LibFrame_ctl15img,"; </script>
<script type="text/Javascript"> var ExpCollDivStr = ExpCollDivStr; ExpCollDivStr = ExpCollDivStr + "ctl00_LibFrame_ctl1837b97e6,"; var ExpCollImgStr = ExpCollImgStr; ExpCollImgStr = ExpCollImgStr + "ctl00_LibFrame_ctl18img,"; </script> 测试 Wizard 控件测试 Wizard 控件

测试 Wizard 控件

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

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

  3. 按 Ctrl+F5 运行该页。

    Note注意

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

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

  5. 单击“下一步”。

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

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

  7. 键入电子邮件地址。

  8. 单击“完成”。

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

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

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

现在已完成向导的数据收集和布局部分,接下来需要添加一些逻辑,以允许用户在不想接收电子邮件更新时跳过收集电子邮件地址的步骤。可以通过处理 Wizard 控件的

添加代码以跳过第三步

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

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

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

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

     

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

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

  2. 保存该文件。

NextButtonClick 事件达到这个目的。处理该事件时,应首先检查向导当前是否处于让用户进行选择的步骤。如果是,检查选择的是哪个 RadioButton 控件。如果用户选择了“否”,则增加 Wizard 控件的 ActiveStepIndex 属性值,以跳过请求用户电子邮件地址的向导步骤。
<script type="text/Javascript"> var ExpCollDivStr = ExpCollDivStr; ExpCollDivStr = ExpCollDivStr + "ctl00_LibFrame_ctl198d7c101,"; var ExpCollImgStr = ExpCollImgStr; ExpCollImgStr = ExpCollImgStr + "ctl00_LibFrame_ctl19img,"; </script>
<script type="text/Javascript"> var ExpCollDivStr = ExpCollDivStr; ExpCollDivStr = ExpCollDivStr + "ctl00_LibFrame_ctl258d59d49,"; var ExpCollImgStr = ExpCollImgStr; ExpCollImgStr = ExpCollImgStr + "ctl00_LibFrame_ctl25img,"; </script> 测试跳过一个步骤的能力测试跳过一个步骤的能力
<script type="text/Javascript"> var ExpCollDivStr = ExpCollDivStr; ExpCollDivStr = ExpCollDivStr + "ctl00_LibFrame_ctl2610eae45,"; var ExpCollImgStr = ExpCollImgStr; ExpCollImgStr = ExpCollImgStr + "ctl00_LibFrame_ctl26img,"; </script>
 
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值