Wizard控件的使用

Wizard控件的使用：

    Wizard控件使用多个步骤来描绘用户的输入信息，该控件内的每个步骤 均会给一个StepType。可以在当步骤到Complete时，对所有的数据进行处理。
   事件：需要隐藏信息的时候，可以在中间步骤中使用WizardStepChanged事件，其它的事件如点击完成、取消、下一步和上一步的时候的事件等。
   TemplateWizardStep，提供一个允许用户自定义模板生成步骤的方法。对它的访问，不能通过像其它步骤一样的直接访问方式，二是要通过它的模板ID来访问。所以，如果在Wizard中的步骤采用这个方式，访问数据的时候，要注意。

   

下边看看一般的做法：

拖控件到设计视图，点击智能标签的Auto Format为其设置格式。这里采用彩色型，Colorful。然后是添加步骤，在智能标签中选择：Add/Remove WizardSteps...，如图：

        步骤中的title表示名字，其余的，AllowReturn:是否运行步骤间通信，EnableTheming：是否允许使用主题，EnableViewState：是否允许保存往返信息，SkinID：使用的皮肤ID，StepType有好几种，一般来讲，Auto会自动检测为开始步骤还是中间步骤，但是完成步骤一定要手动选择Complete。在这里，第三步，我们使用了一个由模板步骤（TemplatedWizardStep）自定义的步骤，由于访问它的数据，需要通过其ID 来访问，使用设置ID为mb。如图：

       在完成步骤，手动选择Complete，如图：

      完成后，步骤算是添加好了，但是每一步骤还没有具体内容。首先解决向导的字体太小的问题。将Wizard控件拖大，但是，这个时候，发现左边的导航和右边的内容同时增大，需要将SideBarStyle下的Width属性指定宽度，根据具体情况而指定，这里指定100px。然后又有个问题，这个字体也太下了，所以呢，将Wizard控件的Font下的Size属性指定大小，这里指定1.2em。这里要注意，是Wizard控件的Font下的Size属性,不是其它任何自控件或子项目的Font属性。因为这个Wizard的属性实在太多了。

        还有一个问题，那就是，使用英语版本的VS，或是VWD时，默认的上一不，下一步，完成，取消这些按钮都是英语的，就像我。这里要比用中文的麻烦点点，要将StartNextButton设置成“下一步”，StepPreviousButtonText设置成“上一步”，
StepNextButtonText设置成“下一步”，FinishPreviousButtonText设置成“上一步”，FinishCompleteButtonText设置成“完成”，如果要在每一步中显示取消按钮，则要将DisplayCancelButton设置为true，并且把CancelButtonText设置为“取消”。

       现在来为每一步添加内容，首先需要编辑Wizard的模板，做个Header，就是添加个欢迎词。这里是通过智能标签的Edit Templated来做的，如图：

       然后，为“基本信息”添加控件，如图：ID分别是tbname和tbpws

   两个TextBox确实很难对齐，最后只好将前天的“用户名”和“密码”做成Label，然后通过设置Label的Width属性来控制。

   为“详细信息”添加控件，如图：ID分别是ddlsf，tbphoto，rdbgk

   再为兴趣爱好添加控件，如图：chk

   为会员等级添加控件，如图：ddldj

     完成步骤中，随便整了些来表示各步骤中的信息：

也就是几个标签和一个PlaceHolder。各步骤分别添加的什么控件和各控件的ID，就只好对照这代码看了，如下：

1. <asp:Wizard ID="Wizard1" runat="server" BackColor="#FFFBD6" 
2.             BorderColor="#FFDFAD" BorderWidth="1px" Font-Names="Verdana" Font-Size="1.2em" 
3.             Height="210px" StartNextButtonText="下一步" Width="405px" ActiveStepIndex="0" 
4.             FinishCompleteButtonText="完成" FinishPreviousButtonText="上一步" 
5.             StepNextButtonText="下一步" StepPreviousButtonText="上一步" 
6.             CancelButtonText="取消" DisplayCancelButton="True" 
7.             onactivestepchanged="Wizard1_ActiveStepChanged" 
8.             onfinishbuttοnclick="Wizard1_FinishButtonClick" 
9.             oncancelbuttοnclick="Wizard1_CancelButtonClick">
10.             <WizardSteps>
11.                 <asp:WizardStep runat="server" title="基本信息">
12.                     <asp:Label ID="Label1" runat="server" Text="用户名：" Width="92px"></asp:Label>
13.                     <asp:TextBox ID="tbname" runat="server"></asp:TextBox>
14.                     <br />
15.                     <asp:Label ID="Label2" runat="server" Text="密  码：" Width="92px"></asp:Label>
16.                     <asp:TextBox ID="tbpws" runat="server"></asp:TextBox>
17.                 </asp:WizardStep>
18.                 <asp:WizardStep runat="server" title="详细信息">
19.                                     <asp:Label ID="Label5" runat="server" Font-Size="Medium" Height="20px" 
20.                         Text="所在省份：" Width="87px"></asp:Label>
21.                     <asp:DropDownList ID="ddlsf" runat="server" Font-Size="Medium" 
22.                         Width="126px">
23.                         <asp:ListItem>重庆</asp:ListItem>
24.                         <asp:ListItem>北京</asp:ListItem>
25.                         <asp:ListItem>天津</asp:ListItem>
26.                         <asp:ListItem>上海</asp:ListItem>
27.                         <asp:ListItem>广东</asp:ListItem>
28.                         <asp:ListItem>广西</asp:ListItem>
29.                         <asp:ListItem>云南</asp:ListItem>
30.                         <asp:ListItem>浙江</asp:ListItem>
31.                         <asp:ListItem>四川</asp:ListItem>
32.                     </asp:DropDownList>
33.                     <br />
34.                     <asp:Label ID="Label6" runat="server" Font-Size="Medium" Height="20px" 
35.                         Text="电话号码：" Width="87px"></asp:Label>
36.                     <asp:TextBox ID="tbphoto" runat="server"></asp:TextBox>
37.                     <br />
38.                     <asp:Label ID="Label7" runat="server" Font-Size="Medium" 
39.                         style="text-align: center" Text="是否公开详细信息："></asp:Label>
40.                     <br />
41.                     <asp:RadioButtonList ID="rdbgk" runat="server" Font-Size="Medium" 
42.                         RepeatDirection="Horizontal">
43.                         <asp:ListItem>不</asp:ListItem>
44.                         <asp:ListItem>好吧</asp:ListItem>
45.                     </asp:RadioButtonList>
46.                 </asp:WizardStep>
47.                 <asp:TemplatedWizardStep ID="mb" runat="server" Title="兴趣爱好">
48.                     <ContentTemplate>
49.                         <asp:CheckBoxList ID="chk" runat="server" Font-Size="Medium" RepeatColumns="3" 
50.                             RepeatDirection="Horizontal" Width="239px">
51.                             <asp:ListItem>谈天</asp:ListItem>
52.                             <asp:ListItem>说地</asp:ListItem>
53.                             <asp:ListItem>军事</asp:ListItem>
54.                             <asp:ListItem>做梦</asp:ListItem>
55.                             <asp:ListItem>电脑</asp:ListItem>
56.                             <asp:ListItem>想你</asp:ListItem>
57.                         </asp:CheckBoxList>
58.                     </ContentTemplate>
59.                 </asp:TemplatedWizardStep>
60.                 <asp:WizardStep runat="server" Title="会员等级">
61.                     <asp:DropDownList ID="ddldj" runat="server" Font-Size="Medium" Width="130px">
62.                         <asp:ListItem>普通会员</asp:ListItem>
63.                         <asp:ListItem>VIP会员</asp:ListItem>
64.                         <asp:ListItem>超级会员</asp:ListItem>
65.                     </asp:DropDownList>
66.                 </asp:WizardStep>
67.                 <asp:WizardStep runat="server" StepType="Complete" Title="完成">
68.                     注册成功,您的注册信息如下,请牢记:<br />
69.                     用户名:<asp:Label ID="lblname" runat="server" Text="Label"></asp:Label>
70.                     <br />
71.                     密码:<asp:Label ID="lblpws" runat="server" Text="Label"></asp:Label>
72.                     <br />
73.                     <asp:Label ID="lblsf" runat="server" Text="Label"></asp:Label>
74.                     <br />
75.                     <asp:Label ID="lblphoto" runat="server" Text="Label"></asp:Label>
76.                     <br />
77.                     您目前是<asp:Label ID="lbldj" runat="server" Text="Label"></asp:Label>
78.                     <br />
79.                     您订阅了以下相关期刊:<br />
80.                     <asp:PlaceHolder ID="ph" runat="server"></asp:PlaceHolder>
81.                 </asp:WizardStep>
82.             </WizardSteps>
83.             <SideBarButtonStyle ForeColor="White" />
84.             <NavigationButtonStyle BackColor="White" BorderColor="#CC9966" 
85.                 BorderStyle="Solid" BorderWidth="1px" Font-Names="Verdana" Font-Size="0.8em" 
86.                 ForeColor="#990000" />
87.             <SideBarStyle BackColor="#990000" Font-Size="0.9em" VerticalAlign="Top" 
88.                 Width="100px" />
89.             <HeaderStyle BackColor="#FFCC66" BorderColor="#FFFBD6" BorderStyle="Solid" 
90.                 BorderWidth="2px" Font-Bold="True" Font-Size="0.9em" ForeColor="#333333" 
91.                 HorizontalAlign="Center" />
92.             <HeaderTemplate>
93.                 欢迎来到山高月大部落
94.             </HeaderTemplate>
95.         </asp:Wizard>

 

      有点长，对照着做一次了，感觉还是比较简单。

 

      最后，要处理各步骤中的数据，这里只用了ActiveStepChanged和FinishButtonClick事件，其它事件可以在属性面板中看到。代码如下：

1.         protected void Wizard1_ActiveStepChanged(object sender, EventArgs e)
2.         {
3.             lblname.Text = tbname.Text;
4.             lblpws.Text = tbpws.Text;
6.             if (rdbgk.SelectedValue == "不")
7.             {
8.                 lblsf.Text = "用户隐藏了身份信息";
9.                 lblphoto.Visible = false;
10.             }
11.             else
12.             {
13.                 lblsf.Text = "省份是：" + ddlsf.SelectedValue;
14.                 lblphoto.Text = "电话号码是：" + tbphoto.Text;
15.             }
17.             //模板控件中的控件，需要经过这个方式，将里边的控件先取出来，然后再取值。
18.             CheckBoxList cb1 = (CheckBoxList)mb.ContentTemplateContainer.FindControl("chk");
19.             for (int i = 0; i < cb1.Items.Count; i++)
20.             {
21.                 if (cb1.Items[i].Selected)
22.                 {
23.                     Label lbl = new Label();
24.                     lbl.ID = "lbl" + i;
25.                     lbl.Text = cb1.Items[i].Text + "<br>";
26.                     ph.Controls.Add(lbl);
27.                 }
28.             }
30.             lbldj.Text = ddldj.SelectedValue;
31.         }
33.         protected void Wizard1_FinishButtonClick(object sender, WizardNavigationEventArgs e)
34.         {//完成的时候，在这个函数里边将信息写入数据库
35.             string name = "" + tbname.Text;
36.             Response.Write("<script>alert('" + name + ",感谢您注册!')</script>");
37.         }

 

步骤太多，过段时间可能会忘，需要时间和实践来巩固和灵活。