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

 

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值