7.6 Wizard向导控件

Wizard向导控件主要的功能是提供导航和用户接口（UI）以收集多个步骤中的相关信息。而Wizard控件可以应用在下列工作中：

l 收集多个步骤中的相关信息。

l 用于收集用户输入的大型Web网页可分割成较小的逻辑步骤。

l 允许线性或非线性地导航各个步骤。

讲白话一点，Wizard控件就是把一个大流程拆解成许多小步骤，如网络的会员帐号申请。一般情况下，网络帐号的申请会有以下几个步骤：

n 会员帐号申请流程说明。

n 填写基本数据。

n 基本数据确认。

n 帐号注册成功。

n 结束帐号注册。

因此，若申请的步骤区分成很明确的Step 1、Step 2、Step 3等，可以让用户很清楚整个流程。而Wizard控件定位就是着眼于此，可以提供良好的流程导航与步骤指引，让用户很明确地知道有哪些步骤，并可建立程序化逻辑来处理或控制比较复杂的步骤，或者是更复杂的设置，所以说Wizard向导控件的出现也算是解决网页设计“重复造轮子”的问题，将常用的网页功能设计成为一个专门的控件，以提高Reuse与生产力，这算是个不错的点子。

Wizard控件可区分成四大区域（Area），说明如下：

（1）SideBar区域：是Wizard向导控件的步骤一、步骤二……项目的区域，点击SideBar可快速导航到不同步骤。

（2）WizardStep区域：是每个步骤实际呈现的控件，如TextBox、Label等等的ASP.NET控件。

（3）Header区域：是Wizard控件的标题。

（4）Navigation区域：是Wizard内置导航功能，它会根据StepType设置值的不同，而呈现不同的导航按钮（见图7-17）。

图7-17 Wizard向导控件

这四大区域不但在属性设置时起作用，程序设计时也必须选取区域，而后才能访问区域中的项目。

范例7-9 以Wizard控件创建会员帐号申请

先来体验一下Wizard控件实际该如何运用，就以上面所提的网络会员帐号申请当作题材，设计一个会员帐号申请流程向导，请参考WizardControl.aspx程序，步骤说明如下：

创建Wizard控件

请拖曳一个Wizard向导控件到Page页面，并将其ID改为“WizardAccount”（见图7-18）。

自动格式化

Wizard控件也提供自动格式化功能，如果您不喜欢系统默认的几个样式，可以自行调整其颜色，Wizard控件左半部的背景色请在SideBarStyle属性的BackColor调整，而右半部的背景色直接调整Wizard控件的BackColor（见图7-19）。

图7-18 拖曳Wizard向导控件

图7-19 Wizard控件的自动格式化

创建WizardSteps步骤项目

Wizard控件的Step1、Step2的步骤项是在WinzardSteps集合项中，故请点击WinzardSteps集合，添加5个WizardStep项，如图7-20所示：

l 请设置第1个步骤项ID为“Step1”，Title为“1.申请帐号流程说明”， StepType为“Start”。

l 请设置第2个步骤项ID为“Step2”，Title为“2.填写基本数据”， StepType为“Step”。

l 请设置第3个步骤项ID为“Step3”，Title为“3.基本数据确认”， StepType为“Step”，AllowReturn为“False”。

l 请设置第4个步骤项ID为“Step4”，Title为“4.帐号注册成功”， StepType为“Finish”。

l 请设置第5个步骤项ID为“Step5”，Title为“5.结束帐号注册”， StepType为“Complete”。

图7-20 创建WizardSteps步骤项目

注

（1）其中ID属性命名为Step1—Step5，而ID属性是可以随意命名的，默认系统并不会替您命名，而要命名的原因是要让程序来调用，相对的如果您不需要在Wizard控件中创建程序的话，则ID属性可以省略不命名。

（2）其中第三个步骤的AllowReturn属性设置为“False”的用意，是不允许步骤四再回到上一步骤。

添加SideBar图片

图7-21是WizardSteps步骤建立完成后的画面，Wizard控件左半部有个专门的名称叫“SideBar”，在SideBar中可以添加一个图片或Logo。在此将加入一个小向导的图片，但在加入图片之前必须将SideBar转换为模板，才能提供给我们加入的自定义图片，故请点击Wizard控件的“SideBarTemplate”。

图7-21 将SideBar转换为模板

在完成SideBar转换为模板后，请点击“编辑模板”，进行模板编辑（见图7-22）。

图7-22 编辑SideBar模板

各位会在SideBarTemplate模板区域中看到一个小方块的控件，千万别把它删掉，它是SideBarList，也就是实际显示步骤项的东西。请在其上方添加一张图片，完成后如图7-23所示。

图7-23 结束Wizard模板编辑

调整Wizard版面区域宽度

设置完格式化后还有一个地方看起来不太顺眼，就是左边的SideBar区域及右边的WizardStep区域显得不太协调。请将Wizard控件的Width属性设为450px，将SideBarStyle的Width宽度设为150px，这样版面就会比较协调。

调整WizardStep水平及垂直对齐

Wizard控件的垂直对齐（VerticalAlign）默认为居中（Middle），水平对齐（HorizationAlign）为靠左对齐。若想要改变对齐的方式，请调整StepStyle属性的HorizontalAlign为Center，最后将Wizard控件的Height（高度）设置为250px。

设置Wizard控件标题

请将Wizard控件的HeaderText属性设为“会员帐号申请向导”。

在步骤1中添加流程说明文字

请点击Wizard控件的第一个步骤项，输入帐号申请流程说明文字（见图7-24）。

图7-24 设计Step1内容

在步骤2添加输入相关控件

请在Wizard控件的步骤2添加让用户输入基本数据控件，并为控件ID取适当的名称，因为后续程序设计将访问控件的ID（见图7-25）。

图7-25 设计Step2内容

在步骤3添加Literal控件

请在Wizard控件的步骤3添加Literal控件，并将其ID改为“txtUserInfo”，这个部分要显示用户所输入的基本信息，并让用户确认是否无误，无误才进行下一步骤（见图7-26）。

图7-26 设计Step3内容

在步骤4添加Label控件

请在Wizard控件的步骤4添加Label控件，并将其ID改为“txtApply”，这个部分要显示用户注册帐号成功消息，并告知系统已发出身份认证E-mail到用户信箱（见图7-27）。

图7-27 设计Step4内容

在步骤5添加Label控件

请在Wizard控件的步骤5添加Label控件，并将其ID改为“txtMsg”，这个部分是整个流程步骤结束的最终消息。然而，一旦点击Wizard最后一个步骤（其StepType为Complete）则会变成一大片空白区域，所有步骤项目都会消失，若想再调出步骤项得在智能标签中选择步骤项（见图7-28）。

图7-28 设计Step5内容

最后所有步骤设置完成后的HTML程序代码如下：

<asp:Wizard ID="WizardAccount" runat="server" BackColor="#FFFFC0" Border- Color="#B5C7DE"

BorderWidth="1px" Font-Names="Verdana" Font-Size="0.8em" Width="450px"

ActiveStepIndex="3" HeaderText="会员帐号申请向导" Height="250px"

OnFinishButtonClick="Wizard1_FinishButtonClick" OnNextButtonClick=

"WizardAccount_NextButtonClick">

<StepStyle Font-Size="0.8em" ForeColor="#333333" HorizontalAlign="Left"

VerticalAlign="Top" />

<SideBarStyle BackColor="#507CD1" Font-Size="0.9em" VerticalAlign="Top"

Width="150px" />

<NavigationButtonStyle BackColor="White" BorderColor="#507CD1"

BorderStyle="Solid"

BorderWidth="1px" Font-Names="Verdana" Font-Size="0.8em" ForeColor=

"#284E98" />

<asp:DataList ID="SideBarList" runat="server">

<asp:LinkButton ID="SideBarButton" runat="server"

BackColor="#507CD1" Font-Names="Verdana" ForeColor="White">

</asp:LinkButton>

</ItemTemplate>

</asp:DataList>

</SideBarTemplate>

<asp:WizardStep ID="Step1" runat="server" Title="1.申请帐号流程说明"

StepType="Start">

欢迎光临本网站，以下是会员帐号申请流程说明：

1.网站会员帐号必须填写基本信息。

2.基本信息申请后会发出身份验证E-Mail到用户信箱。

3.您必须启用E-Mail身份验证，以完成帐号启动。</asp:WizardStep>

<asp:WizardStep ID="Step2" runat="server" Title="2.填写基本信息"

StepType="Step">

帐号：<asp:TextBox ID="txtUserID" runat="server" MaxLength="12"

Width="150px"></asp:TextBox>

密码：<asp:TextBox ID="txtPassword" runat="server" MaxLength="12"

TextMode="Password"

Width="150px"></asp:TextBox>

电子邮件：<asp:TextBox ID="txtMail" runat="server"></asp:TextBox>

省市：<asp:DropDownList ID="dwnCity" runat="server" Width="173px">

<asp:ListItem Value="0">北京</asp:ListItem>

<asp:ListItem Value="1">上海</asp:ListItem>

<asp:ListItem Value="2">武汉</asp:ListItem>

<asp:ListItem Value="3">广州</asp:ListItem>

<asp:ListItem Value="4">成都</asp:ListItem>

<asp:ListItem Value="5">兰州</asp:ListItem>

<asp:ListItem Value="6">昆明</asp:ListItem>

<asp:ListItem Value="7">拉萨</asp:ListItem>

<asp:ListItem Value="8">福州</asp:ListItem>

<asp:ListItem Value="9">西安</asp:ListItem>

<asp:ListItem Value="10">长沙</asp:ListItem>

<asp:ListItem Value="11">南昌</asp:ListItem>

<asp:ListItem Value="12">太原</asp:ListItem>

<asp:ListItem Value="13">合肥</asp:ListItem>

<asp:ListItem Value="14">郑州</asp:ListItem>

</asp:DropDownList>

住址：<asp:TextBox ID="txtAddress" runat="server" Width="238px">

</asp:TextBox>

邮政编码：<asp:TextBox ID="txtZipCode" runat="server" Width=

"99px"></asp:TextBox>

电话：<asp:TextBox ID="txtTel" runat="server"></asp:TextBox>

</asp:WizardStep>

<asp:WizardStep ID="Step3" runat="server" Title="3.基本信息确认"

StepType="Step">

<asp:Literal ID="txtUserInfo" runat="server"></asp:Literal>

</asp:WizardStep>

<asp:WizardStep ID="Step4" runat="server" Title="4.帐号注册成功"

StepType="Finish">

<asp:Label ID="txtApply" runat="server"></asp:Label>

</asp:WizardStep>

<asp:WizardStep ID="Step5" runat="server" Title="5.结束帐号注册"

StepType="Complete">

<asp:Label ID="txtMsg" runat="server"></asp:Label>

</asp:WizardStep>

</WizardSteps>

<SideBarButtonStyle BackColor="#507CD1" Font-Names="Verdana" ForeColor=

"White" />

<HeaderStyle BackColor="#284E98" BorderColor="#EFF3FB" BorderStyle=

"Solid" BorderWidth="2px" Font-Bold="True" Font-Size="0.9em"

ForeColor="White" HorizontalAlign="Center" />

</asp:Wizard>

设置Wizard控件起始项目程序代码

请在WizardControl.aspx程序加入Page_Load事件程序代码：

01 Protected Sub Page_Load(ByVal sender As Object, ByVal e As

System.EventArgs) Handles Me.Load

02 If (Not IsPostBack) Then

03 '设置开始步骤为第0个索引（Step1）

04 WizardAccount.ActiveStepIndex = 0

05 End If

06 End Sub

添加Wizard控件按钮事件程序

请添加Wizard控件的NextButtonClick及FinishButtonClick两个按钮的Click事件程序代码，程序如下：

01 '下一步NextButton按钮的Click事件

02 Protected Sub WizardAccount_NextButtonClick(ByVal sender As Object, ByVal

e As System.Web.UI.WebControls.WizardNavigationEventArgs) Handles

WizardAccount.NextButtonClick

03 '在Step2，准备进入Step3

04 If WizardAccount.ActiveStepIndex =

WizardAccount.WizardSteps.IndexOf(Me.Step2) Then

05 '获取Wizard控件中的txtUserInfo Literal控件的对象引用

06 Dim txtUserInfo As Literal =
CType(WizardAccount.FindControl("txtUserInfo"), Literal)

07 txtUserInfo.Text = "您输入的基本资料如下： "

08 txtUserInfo.Text += "姓名：" & txtUserID.Text & " "

09 txtUserInfo.Text += "电子邮件：" & txtMail.Text & " "

10 txtUserInfo.Text += "省市：" & dwnCity.SelectedItem.Text & " "

11 txtUserInfo.Text += "地址：" & txtAddress.Text & " "

12 txtUserInfo.Text += "邮政编码：" & txtZipCode.Text & " "

13 txtUserInfo.Text += "电话：" & txtTel.Text & " "

15 WizardAccount.StepPreviousButtonText = "回上一步骤重填"

16 WizardAccount.StepNextButtonText = "资料正确"

17 End If

19 '在Step3，准备进入Step4

20 If WizardAccount.ActiveStepIndex =
WizardAccount.WizardSteps.IndexOf(Me.Step3) Then

21 '获取Wizard控件中的txtUserInfo Literal控件的对象引用

22 Dim txtApply As Label =
CType(WizardAccount.FindControl("txtApply"), Label)

23 txtApply.Text = "系统并发出身份验证E-Mail到" & txtMail.Text &

"信箱"

24 End If

25 End Sub

27 '按下Finish按钮Click事件

28 Protected Sub WizardAccount_FinishButtonClick(ByVal sender As Object, ByVal

e As System.Web.UI.WebControls.WizardNavigationEventArgs) Handles

WizardAccount.FinishButtonClick

29 Dim txtMsg As Label = CType(WizardAccount.FindControl("txtMsg"),
Label)

30 txtMsg.Text = "您已注册会员帐号成功，帐号必须通过E-Mail中的超链接才能启用"

31 WizardAccount.StepStyle.VerticalAlign = VerticalAlign.Middle

32 WizardAccount.StepStyle.HorizontalAlign = HorizontalAlign.Center

33 End Sub

完成后请执行程序，Wizard向导控件可以导引用户一步步地阅读与确认信息，而每个步骤又可以通过程序设计添加更为复杂的逻辑判断（见图7-29）。

图7-29 Wizard控件步骤执行画面

有了范例7-29的经验后，后续开始讲解Wizard控件更多深入的知识，大家会比较容易吸收了解。

l StepType

每个WizardStep步骤都会有个StepType属性，它最主要的作用是决定每个步骤中的导航Button按钮会如何被显示，说明如表7-1所示。

表7-1 StepType类型

StepType类型	说明
Start（开始步骤）	这是第一个开始步骤，只会呈现【下一步】按钮
Step（阶段步骤）	在Start及Finish之间的步骤全部归类为Step，Step会同时呈现【上一步】及【下一步】按钮
Finish（完成步骤）	这是最后的数据收集步骤，会呈现【完成】及【上一步】按钮，但若前一个步骤的AllowReturn设置为False，则不显示【上一步】按钮
Complete（结束步骤）	这是Wizard的最后一个步骤画面，完全不会呈现任何按钮，甚至连SideBar区域也会消失；若就英文字面很难区分Complete和Finish两者的差别，但就实质而言，Complete较贴近最后的结束
Auto（自动）	系统会依该步骤的顺序决定其为何种StepType类型

若您想在程序设计阶段指定StepType，通过WizardStepType列举来指定StepType类型，程序代码如下：

WizardAccount.WizardSteps(0).StepType = WizardStepType.Auto;

在解说上面StepType类型后，各位可以再回到上一个范例的Step 3，细细思考为何StepType属性要那样设置，应该就能很快理解了（见图7-30）。

图7-30 StepType类型

l Wizard向导控件的样式（Style）

Wizard向导控件所支持的样式如表7-2所示。

表7-2 Wizard控件样式设置表

样式（Style）	说明
CancelButtonStyle	设置【取消】按钮的样式
FinishCompleteButtonStyle	设置【完成】按钮的样式
FinishPreviousButtonStyle	设置Finish步骤中的【上一步】按钮的样式
HeaderStyle	设置表头样式
NavigationButtonStyle	设置导航区域中所有按钮的样式
NavigateStyle	设置导航区域样式
SideBarStyle	设置SideBar区域样式
StartNextButtonStyle	设置Start步骤中的【下一步】按钮的样式
StepNextButtonStyle	设置Step步骤中的【下一步】按钮的样式
StepPreviousButtonStyle	设置Step步骤中的【上一步】按钮的样式
StepStyle	设置WizardStep区域的样式

l 外观

Wizard控件除可调整样式外，还可调整其外观属性（见图7-31）。

图7-31 Wizard控件外观属性

l 模板编辑

如果您想更进一步定制Wizard控件默认的样式或外观等，可以通过其模板编辑功能来达成深入的定制，Wizard控件提供了5种模板编辑，说明如表7-3所示。

表7-3 Wizard控件模板类型

模板类型（Template）	说明
HeaderTemplate	编辑表头模板
SideBarTemplate	编辑SideBar模板
StartNavigationTemplate	编辑开始步骤导航区域模板
StepNavigationTemplate	编辑阶段Step步骤导航区域模板
FinishNavigationTemplate	编辑完成步骤导航区域模板

范例7-10 编辑Wizard控件模板

请将WizardControl.aspx程序复制成WizardTemplate.aspx，本范例将示范如何编辑Wizard控件模板。在此将自定义HeaderTemplate、StartNavigationTemplate，以及加入自定义的事件程序，请参考Wizard Template.aspx程序，步骤说明如下：

进入模板编辑模式

首先在Wizard控件的智能标签中点击【编辑模板】进入编辑模式（见图7-32）。

图7-32 Wizard控件模板编辑

自定义HeaderTemplate

进入模板编辑模式后，请切换到HeaderTemplate模板，在这里将显示定制的图片，请拖曳Header.jpg图片到HeaderTemplate模板中（见图7-33）。

图7-33 拖曳图片到HeaderTemplate模板

自定义StartNavigationTemplate

接着要自定义开始步骤的导航按钮，请切换到StartNavigationTemplate模板，在模板加入一个ImageButton控件，指定其ImageUrl为“~/Images/ Next.gif”，并将其ID改为btnNext（见图7-34）。

图7-34 拖曳ImageButtonmg到StartNavigationTemplate模板

加入自定义按钮事件程序

如果自定义导航按钮必须自行加入导航程序以切换到不同的步骤，请双击自定义的ImageButton按钮，加入Click事件程序代码：

01 '自定义开始步骤的下一步按钮

02 Protected Sub btnNext_Click(ByVal sender As Object, ByVal e As

System.Web.UI.ImageClickEventArgs)

03 If WizardAccount.ActiveStepIndex =

WizardAccount.WizardSteps.IndexOf(Me.Step1) Then

04 '切换到步骤2 Step2

05 WizardAccount.ActiveStepIndex =

WizardAccount.WizardSteps.IndexOf(Me.Step2)

06 End If

07 End Sub

设置Navigation按钮对齐

由于Navigation按钮默认是靠右对齐的，如果想要改变成为居中对齐请调整NivagationStyle属性的HorizationalAlign为“Center”，或者用程序代码来设置：

WizardAccount.NavigationStyle.HorizontalAlign = HorizontalAlign.Center

完成后执行画面如图7-35所示。

其他如SideBarTemplate、StepNavigationTemplate、FinishNaviga tionTemplate的使用方式也大致相同，请自行参考模仿。

l 行为属性

Wizard支持的属性如表7-4所示。

图7-35 Wizard控件自定义模板

表7-4 Wizard控件为属性

行为	说明
ActiveStepIndex	通过索引值设置WizardSteps集合中哪个步骤项为Active
CancelDestinationPageUrl	设置当用户按一下【取消】按钮时会导向到的网页URL
DisplayCancelButton	是否显示【取消】按钮，默认不显示（False）
DisplaySideBar	是否显示SideBar区域，默认为True
EnableTheme	是否套用Theme
FinishDestinationPageUrl	设置当用户按一下【完成】按钮时会重新导向到的网页URL
SkinID	取得或设置要套用至控件的面板
ToolTip	设置当鼠标指针停留在 Web 服务器控件时显示的文字

l 事件

Wizard支持事件如表7-5所示。

表7-5 Wizard控件事件

事件	说明
ActiveStepChanged	当用户切换至控件中的新步骤时发生
CancelButtonClick	当用户点击【取消】按钮时发生
FinishButtonClick	当用户点击【完成】按钮时发生
NextButtonClick	当用户点击【下一步】按钮时发生
PreviousButtonClick	当用户点击【上一步】按钮时发生
SideBarButtonClick	当用户点击SideBar区域中的项目时发生

范例7-11 Wizard控件事件的应用

前面的Wizard控件范例已使用过NextButtonClick、FinishButton Click两个事件，本范例要扩大事件的应用，再加入ActiveStepChanged、CancelButtonClick、PreviousButtonClick与SideBarButtonClick，通过这些事件及一些程序技巧可以捕捉到更多用户点击Wizard控件的信息。请参考WizardEvent.aspx程序，步骤说明如下：

创建控件及Layout配置

本程序是由WizardControl.aspx程序扩充而来，并多加入了两个Label控件及一个Literal控件，目的是为了显示Wizard控件事件的信息，实际配置请参考程序。

创建ActiveStepChanged事件程序

本事件程序是为了显示步骤变换信息，请在Wizard控件的ActiveStepChanged事件加入下面程序代码：

01 '步骤变更

02 Protected Sub WizardAccount_ActiveStepChanged(ByVal sender As Object,

ByVal e As System.EventArgs) Handles WizardAccount.ActiveStepChanged

03 txtActiveStepChanged.Text = "步骤项目已变动：" &

WizardAccount.ActiveStep.Name

04 End Sub

程序说明：

WizardAccount.ActiveStep.Name是用来显示目前步骤名称的。

创建SideBarButtonClick事件程序

本事件程序是为了显示SideBar区域被点击信息，请在Wizard控件的SideBarButtonClick事件加入下面的程序代码：

01 'SideBarButtonClick事件

02 Protected Sub WizardAccount_SideBarButtonClick(ByVal sender As Object,
ByVal e As System.Web.UI.WebControls.WizardNavigationEventArgs) Handles

WizardAccount.SideBarButtonClick

03 Dim txtStep As String = CType(CType(e.NextStepIndex, Int16) + 1,
String)

04 Dim txtMsg As String = "您点击的SideBar步骤项目为Step" & txtStep &

"，但系统不允许直接用SideBar局部切换步骤！"

05 Dim myMsg As New AlertMessage()

06 myMsg.showMsg(Me.Page, txtMsg)

07 e.Cancel = True

08 End Sub

程序说明：

如果您希望用户按照WizardStep流程一步步进行，可以通过e.Cancel=True的属性设置来取消用户点击步骤的切换，这样用户就无法任意切换了。

创建CancelButtonClick事件程序

本事件程序的作用是当用户按下【取消】按钮后，将会导向另一个网页URL，首先将Wizard控件的“DisplayCancelButton”设置为True，接着在Wizard控件的SideBarButtonClick事件加入下面的程序代码：

01 '当用户按下取消按钮的事件

02 Protected Sub WizardAccount_CancelButtonClick(ByVal sender As Object,

ByVal e As System.EventArgs) Handles WizardAccount.CancelButtonClick

03 WizardAccount.CancelDestinationPageUrl = "~/WizardCancelUrl.aspx"

04 End Sub

程序说明：

当用户无论在哪一个步骤中按下【取消】按钮后，页面会立即被导向指定的网页Url。

此外，还有几个小地方加入了一些设置，在此不一一述说，完整的程序代码列示如下：

01 Partial Class WizardEvent

02 Inherits System.Web.UI.Page

04 Protected Sub Page_Load(ByVal sender As Object, ByVal e As

System.EventArgs) Handles Me.Load

05 If (Not IsPostBack) Then

06 '设置开始步骤为第0个索引（Step1）

07 WizardAccount.ActiveStepIndex = 0

08 End If

09 End Sub

11 '上一步PreviousButtonClick按钮的Click事件

12     Protected Sub WizardAccount_PreviousButtonClick(ByVal sender As
           Object,ByVal e As System.Web.UI.WebControls.WizardNavigationEventArgs)
           Handles WizardAccount.PreviousButtonClick

13 txtSideBar.Text = ""

14 End Sub

16 '下一步NextButton按钮的Click事件

17     Protected Sub WizardAccount_NextButtonClick(ByVal sender As Object,
            ByVal e As System.Web.UI.WebControls.WizardNavigationEventArgs)
            Handles WizardAccount.NextButtonClick

18 '在Step2，准备进入Step3

19 If WizardAccount.ActiveStepIndex =
WizardAccount.WizardSteps.IndexOf(Me.Step2) Then

20 '获取Wizard控件中的txtUserInfo Literal控件的对象参照

21 Dim txtUserInfo As Literal =
CType(WizardAccount.FindControl("txtUserInfo"), Literal)

22 txtUserInfo.Text = "您输入的基本信息如下： "

23 txtUserInfo.Text += "姓名：" & txtUserID.Text & " "

24 txtUserInfo.Text += "电子邮件：" & txtMail.Text & " "

25 txtUserInfo.Text += "省市：" & dwnCity.SelectedItem.Text &
" "

26 txtUserInfo.Text += "地址：" & txtAddress.Text & " "

27 txtUserInfo.Text += "邮政编码：" & txtZipCode.Text & " "

28 txtUserInfo.Text += "电话：" & txtTel.Text & " "

30 WizardAccount.StepPreviousButtonText = "回上一步骤重填"

31 WizardAccount.StepNextButtonText = "信息正确"

32 End If

34 '在Step3，准备进入Step4

35 If WizardAccount.ActiveStepIndex =
WizardAccount.WizardSteps.IndexOf(Me.Step3) Then

36 '获取Wizard控件中的txtUserInfo Literal控件的对象参照

37 Dim txtApply As Label =
CType(WizardAccount.FindControl("txtApply"), Label)

38 txtApply.Text = "系统并发出身份验证E-Mail到" & txtMail.Text &
"信箱"

39 End If

41 txtSideBar.Text = ""

42 End Sub

44 '按下Finish按钮Click事件

45     Protected Sub WizardAccount_FinishButtonClick(ByVal sender As Object,
           ByVal e As System.Web.UI.WebControls.WizardNavigationEventArgs) Handles
           WizardAccount.FinishButtonClick

46 Dim txtMsg As Label = CType(WizardAccount.FindControl("txtMsg"),
Label)

47 txtMsg.Text = "您已注册会员帐号成功，帐号必须通过E-Mail中的超链接才能启用"

48 WizardAccount.StepStyle.VerticalAlign = VerticalAlign.Middle

49 WizardAccount.StepStyle.HorizontalAlign =
HorizontalAlign.Center

50 End Sub

52 '步骤变更更改

53 Protected Sub WizardAccount_ActiveStepChanged(ByVal sender As Object,
ByVal e As System.EventArgs) Handles WizardAccount.ActiveStepChanged

54 txtActiveStepChanged.Text = "步骤项目已变动：" &
WizardAccount.ActiveStep.Name

55 End Sub

57 'SideBarButtonClick事件

58     Protected Sub WizardAccount_SideBarButtonClick(ByVal sender As
            Object, ByVal e As System.Web.UI.WebControls.WizardNavigationEventArgs)
            Handles WizardAccount.SideBarButtonClick

59 Dim txtStep As String = CType(CType(e.NextStepIndex, Int16) + 1,
String)

60 Dim txtMsg As String = "您点击的SideBar步骤项目为Step" & txtStep &
"，但系统不允许直接用SideBar局部切换步骤！"

61 Dim myMsg As New AlertMessage()

62 myMsg.showMsg(Me.Page, txtMsg)

63 e.Cancel = True

64 End Sub

66 '当用户按下取消按钮的事件

67 Protected Sub WizardAccount_CancelButtonClick(ByVal sender As Object,
ByVal e As System.EventArgs) Handles WizardAccount.CancelButtonClick

68 WizardAccount.CancelDestinationPageUrl =
"~/WizardCancelUrl.aspx"

69 End Sub

70 End Class

完成后请执行程序，您可以测试几个项目：（1）按下【下一步】按钮，画面会显示目前步骤名称；（2）点击SideBar项目，系统会告诉您点击了哪个项目，但禁止用户任意变换步骤；（3）按下【取消】按钮，画面会导向WizardCancelUrl.aspx页面（见图7-36）。