asp.net 中 wizard的使用

来源：互联网发布：海信h168网络42寸彩电编辑：程序博客网时间：2024/06/05 07:00

-----------------scenario summary-------

1.有确定的步骤，进行一系列简单操作；

2.向导功能；

……(等等)

在以上场景中，可以使用wizard来操作。同时wizard在这些方面比multiview要灵活，当然可以使用multiview来模拟wizard的功能。wizard的导航功能具有：一步一步的导航，也可以从一步跳转到任意一步，即wizard具备了线性和非线性的导航功能

---------------Problem scenario summary-----------

在初次使用wizard，可能会遇到：

1.属性和事件不清晰；

2.如何禁用掉sidebar的点击功能(OnClientClick="return false")

3.如何灵活禁用上一步和下一步(e.cancel=true;)

4.如何控制wizard的大小或者修改sidebar以及wizard的样式

--------------------solution summary------------

1.==》wizard介绍：

Wizard控件负责导航，包括线性导航（从一步转到下一步或上一步）和非线性导航（从一步转到任意其他步）。该控件能够自动创建合适的按钮，例如Next，Previous以及Finish。第一步没有Previous按钮，最后一步没有Next按钮。通过设置可以使得一些步骤只能被导航一次。另外，默认情况下，Wizard控件显示一个包含导航链接的工具栏，这让用户可以从当前步骤转到其他步骤。Wizard控件的所有外观特征几乎都可以通过样式和模板来自定义，包括各种各样的按钮和链接、标题和页脚、工具条和WizardStep。

WizardStepType的枚举值

成员

说明

Auto

声明步骤时的顺序决定了导航的界面，这是默认值

Complete

要显示的最后步骤，它不呈现导航按钮

Finish

最后的数据采集步骤，它只呈现被动完成和上一步两个按钮

Start

第一步，只呈现一个下一步按钮

Step

Start、Finish和Complete之外的任何步骤，它呈现上一步和下一步按钮

WizardStep类还包含一个特别有意思的AllowReturn属性。该属性可以强制线性导航。设置一个步骤的AllowReturn属性为false后，则只能导航到该步骤一次。如果DisplaySideBar属性为true（默认值），那么将显示侧栏。虽然AllowReturn属性设置为false的步骤仍然显示在导航链接中，但单击链接不会有任何反应。

提示：AllowReturn属性只禁止用户交互。即使该步骤的AllowRe- turn属性已经设置为false，程序代码也可以强制返回到一个步骤。

Wizard控件的6个事件，其中一个是ActiveStepChanged事件，在当前步骤改变时触发该事件。另外5个事件都由单击按钮触发。如表5-6所示，除了CancelButtonClick，其他的按钮单击事件都有一个WizardNavigationEventArgs类型的参数，它公开了3个属性：

Cancel

Boolean类型值。如果取消链接到下一步，则该值为true。默认值为false。

CurrentStepIndex

以0开始的WizardSteps集合中当前步骤的索引值。

NextStepIndex

以0开始的将要显示的步骤的索引值。例如，如果单击了“Previous”按钮，则NextStepIndex的值比CurrentStepIndex值小1。

表5-6 Wizard事件

事件

事件参数

说明

ActiveStepChanged

EventArgs

显示新步骤时触发

CancelButtonClick

EventArgs

单击取消按钮时触发

FinishButtonClick

WizardNavigationEventArgs

单击完成按钮时触发

NextButtonClick

WizardNavigationEventArgs

单击下一步按钮时触发

PreviousButtonClick

WizardNavigationEventArgs

单击上一步时触发

SideBarButtonClick

WizardNavigationEventArgs

当单击侧栏区域中的按钮时触发

Wizard的方法

方法名称

返回类型

说明

GetHistory

ICollection

返回一个按被访问的顺序排列的WizardStepBase 对象的集合，索引0 为最近访问的步骤

GetStepType

WizardStepType

步骤的类型，如表5-5所示

MoveTo

void

移动到参数中指定的WizardStep对象

==>禁用掉sidebar的点击功能：更改sidebarTemplate的linkbutton（如果你使用linkbutton）的点击事件：

OnClientClick="return false";

代码如下：

<asp:WizardID="Wizard1"runat="server"ActiveStepIndex="0"
BackColor="#F7F6F3"
Font-Names="Verdana"CellPadding="10"Height="100%"Width="700px">
<StepStyleBorderWidth="0px"ForeColor="#5D7B9D"/>
<NavigationStyleHorizontalAlign="Left"/>
<WizardSteps>
<asp:WizardSteprunat="server"Title="Step1"StepType="Start">
This isStep One<br/>
</asp:WizardStep>


<SideBarTemplate>
<asp:DataListID="SideBarList"runat="server"OnItemDataBound="SideBarList_ItemDataBound">
<ItemTemplate>

<asp:LinkButtonID="SideBarButton"OnClientClick="returnfalse"ForeColor="White"runat="server"></asp:LinkButton>
</ItemTemplate>
<SelectedItemStyleFont-Bold="true"/>
</asp:DataList>
</SideBarTemplate>
</asp:Wizard>

3。===》如何灵活禁用上一步和下一步

       protected void Wizard1_PreviousButtonClick(object sender,WizardNavigationEventArgs e)
       {
           if (e.CurrentStepIndex == 2)
           {
               e.Cancel = true;//禁用上一步
           }
       }

-----------------------demo

利用上述的相关知识点，编写了一个：找回密码的向导的小demo，欢迎指点：

"wizard-----BaseControlPractice.zip"

http://vdisk.weibo.com/s/3oPFM

-------------------------------程序页面代码：
<head runat="server">
   <style type="text/css">
       .style2
       {
           width: 118px;
       }
       .style3
       {
           width: 48px;
       }
       .hidden
       {
           display: none;
       }
       .hidden
       {
           display: inline;
       }
   </style>
</head>
<body>
   <form id="form1"runat="server">
   <asp:Wizard ID="Wizard1" runat="server"ActiveStepIndex="0" DisplayCancelButton="True"
       OnCancelButtonClick="Wizard1_CancelButtonClick"OnFinishButtonClick="Wizard1_FinishButtonClick"
       OnPreviousButtonClick="Wizard1_PreviousButtonClick"BackColor="#FFFBD6" BorderColor="#FFDFAD"
       BorderWidth="1px" Font-Names="Verdana" Font-Size="0.8em"Height="73px" Width="353px"
       OnNextButtonClick="Wizard1_NextButtonClick">
       <HeaderStyle BackColor="#FFCC66"BorderColor="#FFFBD6" BorderStyle="Solid" BorderWidth="2px"
           Font-Bold="True" Font-Size="0.9em" ForeColor="#333333"HorizontalAlign="Center" />
       <HeaderTemplate>
           欢迎使用密码找回模块
       </HeaderTemplate>
       <NavigationButtonStyle BackColor="White"BorderColor="#CC9966" BorderStyle="Solid"
           BorderWidth="1px" Font-Names="Verdana" Font-Size="0.8em"ForeColor="#990000" />
       <SideBarButtonStyle ForeColor="orange"/>
       <SideBarStyle BackColor="#990000" Font-Size="0.9em"VerticalAlign="Top" Width="80px" />
       <SideBarTemplate>
           <asp:DataList ID="SideBarList"runat="server">
               <ItemTemplate>
                   <asp:LinkButton ID="SideBarButton"OnClientClick="return false" runat="server"ForeColor="Orange"
                       Width="80px"></asp:LinkButton>
               </ItemTemplate>
               <SelectedItemStyle Font-Bold="True"/>
           </asp:DataList>
       </SideBarTemplate>
       <WizardSteps>
           <asp:WizardStep ID="WizardStep1" runat="server"Title="Step 1" StepType="Start">
               执行的第一步:输入您的邮箱和用户名：
               <table style="width: 230px; height:40px;">
                   <tr>
                       <td class="style2">
                           <asp:Label ID="Label1" runat="server"Text="用户名："></asp:Label>
                       </td>
                       <td>
                           <asp:TextBox ID="TextBox1"runat="server"></asp:TextBox>
                       </td>
                   </tr>
                   <tr>
                       <td class="style2">
                           <asp:Label ID="Label2" runat="server"Text="邮箱："></asp:Label>
                       </td>
                       <td>
                           <asp:TextBox ID="TextBox2"runat="server"></asp:TextBox>
                       </td>
                   </tr>
               </table>
           </asp:WizardStep>
           <asp:WizardStep ID="WizardStep2" runat="server"Title="Step 2" StepType="Step">
               执行的第二步:输入验证码：
               <table style="width: 230px; height:40px;">
                   <tr>
                       <td>
                           <asp:Label ID="Label3" runat="server"Text="验证码："></asp:Label>
                       </td>
                       <td>
                           <asp:TextBox ID="TextBox3"runat="server"></asp:TextBox>
                       </td>
                   </tr>
                   <tr>
                       <td>
                       </td>
                       <td>
                       </td>
                   </tr>
               </table>
           </asp:WizardStep>
           <asp:WizardStep ID="WizardStep3" runat="server"Title="Step 3" StepType="Step">
               执行的第三步: 修改密码：
               <table style="width: 230px; height:40px;">
                   <tr>
                       <td>
                           <asp:Label ID="Label4" runat="server"Text="新密码："></asp:Label>
                       </td>
                       <td>
                           <asp:TextBox ID="TextBox4"runat="server"></asp:TextBox>
                       </td>
                   </tr>
                   <tr>
                       <td>
                           <asp:Label ID="Label5" runat="server"Text="新密码确认："></asp:Label>
                       </td>
                       <td>
                           <asp:TextBox ID="TextBox5"runat="server"></asp:TextBox>
                       </td>
                   </tr>
               </table>
           </asp:WizardStep>
           <asp:WizardStep ID="WizardStep4" runat="server"Title=" 完成" StepType="Finish">
               <h3>
                   谢谢使用^_^</h3>
           </asp:WizardStep>
           <asp:WizardStep ID="WizardStep5" runat="server"Title=" " StepType="Complete">
               <h3>
                   欢迎下次使用^_^</h3>
           </asp:WizardStep>
       </WizardSteps>
   </asp:Wizard>
   <div>
   </div>
   </form>
</body>
</html>

————————————————————————