Wizard控件[转载]

可以使用 Wizard 控件执行下列操作：
    1.跨多个步骤收集相关数据。
    2.将用于收集用户输入的较大的网页细分为较小的逻辑步骤。
    3.允许在各步骤之间进行线性导航或非线性导航。

    Wizard 控件由以下部分组成：
    1.标题（Header）：用户可以自定义该区域，以显示用户当前所处步骤的特定信息。
    2.向导步骤集合（WizardSteps）：其中包含页面开发人员所定义的每个步骤的用户界面。
    3.侧边栏（SideBar）：用于快速定位到控件中的步骤。
    4.向导按钮（NavigationButton）：基于 StepType 值确定要显示的相应按钮。
    Wizard 控件中的每个步骤都具有一个 StepType 属性，用于确定该步骤所具有的导航功能的类型。如果没有为 StepType 属性指定值，则默认值为 Auto。下表列出了 StepType 属性的可用设置以及步骤的结果行为。
WizardStepType.Auto ：为该步骤呈现的导航用户界面是由声明该步骤的顺序决定的。
WizardStepType.Complete ：该步骤是要显示的最后一个步骤。不呈现任何导航按钮。
WizardStepType.Finish ：该步骤是收集用户数据的最后一个步骤。呈现用于导航的“完成”按钮。
WizardStepType.Start ：该步骤是要显示的第一个步骤。不呈现“上一步”按钮。
WizardStepType.Step ：该步骤是介于第一个步骤和最后一个步骤之间的任意步骤。呈现用于导航的“上一步”和“下一步”按钮。
    提交模型： 
    使用 Wizard 控件，可以通过线性导航或非线性导航收集数据。跳过不需要的步骤或返回前面已完成的步骤以更改某个值，这种行为就属于非线性导航。Wizard 控件维持它在各步骤之间的状态，以便在 Wizard 控件的所有步骤完成之前，无需将某个步骤中输入的数据保存到数据存储区中。
    或者，如果希望在每个步骤完成（例如在引发 NextButtonClick 事件）后将已收集的数据保存到数据存储区，则应该将 WizardStepBase 对象的 AllowReturn 属性设置为 false，这样用户在提交数据后，将无法返回到前面已经完成的步骤来更改数据。

    应用示例：

Default.aspx

<% @ Page Language = " C# " AutoEventWireup = " true " CodeFile = " Default.aspx.cs " Inherits = " _Default " %>

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< script runat ="server" >
void OnNext(object sender, WizardNavigationEventArgs e)
{
// 在结束页面显示用户信息
if (UserWizard.WizardSteps[e.NextStepIndex].StepType == WizardStepType.Finish)
{
StringBuilder sb = new StringBuilder( "" );
sb.AppendFormat( " 姓名：{0}<br/> " , Name.Text);
sb.AppendFormat( " 职位：{0}<br /> " , Seat.Text);
sb.AppendFormat( " 邮件：{0}<br /> " , Mail.Text);
sb.AppendFormat( " 手机：{0}<br /> " , Mobile.Text);
sb.AppendFormat( " 备注：{0}<br /><hr> " , Notes.Text);
sb.AppendFormat( " <b>是否添加?</b> " );
LabMessage.Text = sb.ToString();
}
}

void OnFinish(object sender, WizardNavigationEventArgs e)
{
// 可以添加向数据库写入的代码
// 显示信息
LabFinish.Text = " 添加成功. " ;
}
</ script >

< html xmlns ="http://www.w3.org/1999/xhtml" >
< head runat ="server" >
< title > 示例8-6 </ title >
< link id ="InstanceStyle" href ="StyleSheet.css" type ="text/css" rel ="stylesheet" />
</ head >
< body >
< form id ="Form1" runat ="server" >
< div >
< fieldset style ="width: 310px" >
< legend class ="mainTitle" > Wizard控件典型应用 </ legend >
< br />
< asp:Wizard ID ="UserWizard" HeaderText ="新增用户" OnNextButtonClick ="OnNext" OnFinishButtonClick ="OnFinish"
ActiveStepIndex ="0" Height ="120px" runat ="server" BackColor ="#FFFBD6" BorderColor ="#FFDFAD"
BorderWidth ="1px" Font-Names ="Verdana" Font-Size ="0.8em" >
< SideBarTemplate >
< div style ="width: 90px;" >
< asp:DataList runat ="Server" ID ="SideBarList" >
< ItemTemplate >
< img src ="Images/point.gif" />
< asp:LinkButton runat ="server" ID ="SideBarButton" ForeColor ="#FFF277" Font-Underline ="false" ></ asp:LinkButton >
</ ItemTemplate >
</ asp:DataList >
</ div >
</ SideBarTemplate >
< WizardSteps >
< asp:WizardStep ID ="WizardStep1" runat ="server" Title ="姓名职位" >
< div style ="width: 220px;" >
< table >
< tr >
< td >
姓名： </ td >
< td >
< asp:TextBox runat ="server" ID ="Name" />
< asp:RequiredFieldValidator runat ="server" ID ="NameValidator" Text ="*" ErrorMessage ="必须输入您的姓名"
SetFocusOnError ="True" ControlToValidate ="Name" />
</ td >
</ tr >
< tr >
< td >
职位： </ td >
< td >
< asp:TextBox runat ="server" ID ="Seat" />
< asp:RequiredFieldValidator runat ="server" ID ="SeatValidator" Text ="*" ErrorMessage ="必须输入您的职位"
SetFocusOnError ="True" ControlToValidate ="Seat" />
</ td >
</ tr >
< tr >
< td height ="60" >
</ td >
< td valign ="bottom" >
< asp:ValidationSummary runat ="server" DisplayMode ="List" ID ="Summary" />
</ td >
</ tr >
</ table >
</ div >
</ asp:WizardStep >
< asp:WizardStep ID ="WizardStep2" runat ="server" Title ="联系方式" >
< div style ="width: 220px;" >
< table >
< tr >
< td >
邮件： </ td >
< td >
< asp:TextBox runat ="server" ID ="Mail" /></ td >
</ tr >
< tr >
< td >
手机： </ td >
< td >
< asp:TextBox runat ="server" ID ="Mobile" /></ td >
</ tr >
< tr >
< td height ="60" >
</ td >
</ tr >
</ table >
</ div >
</ asp:WizardStep >
< asp:WizardStep ID ="WizardStep3" runat ="server" Title ="备注信息" >
< div style ="width: 220px;" >
< table >
< tr >
< td valign ="top" >
备注： </ td >
< td >
< asp:TextBox runat ="server" ID ="Notes" Rows ="6" Columns ="18" TextMode ="MultiLine" /></ td >
</ tr >
</ table >
</ div >
</ asp:WizardStep >
< asp:WizardStep ID ="WizardStep4" runat ="server" StepType ="Finish" Title ="小结" >
< div style ="width: 220px;" >
< asp:Label runat ="server" ID ="LabMessage" />
</ div >
</ asp:WizardStep >
< asp:WizardStep ID ="WizardStep5" runat ="server" StepType ="Complete" Title ="结束" >
< div style ="width: 310px;" >
< asp:Label runat ="server" ID ="LabFinish" />
</ div >
</ asp:WizardStep >
</ WizardSteps >
< SideBarStyle BackColor ="#990000" Font-Size ="0.9em" VerticalAlign ="Top" />
< NavigationButtonStyle Width ="80px" BackColor ="White" BorderColor ="#CC9966" BorderStyle ="Solid"
BorderWidth ="1px" Font-Names ="Verdana" Font-Size ="0.8em" ForeColor ="#990000" />
< SideBarButtonStyle ForeColor ="White" />
< HeaderStyle Height ="24px" BackColor ="#FFCC66" BorderColor ="#FFFBD6" BorderStyle ="Solid"
BorderWidth ="2px" Font-Bold ="True" Font-Size ="0.9em" ForeColor ="#333333" HorizontalAlign ="Center" />
</ asp:Wizard >
</ fieldset >
</ div >
</ form >
</ body >
</ html >

 

转载于:https://www.cnblogs.com/jRoger/articles/1833559.html