可以使用 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,这样用户在提交数据后,将无法返回到前面已经完成的步骤来更改数据。
应用示例:
<%@ 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}
", Name.Text);
sb.AppendFormat("职位:{0}
", Seat.Text);
sb.AppendFormat("邮件:{0}
", Mail.Text);
sb.AppendFormat("手机:{0}
", Mobile.Text);
sb.AppendFormat("备注:{0}
", Notes.Text);
sb.AppendFormat("是否添加?");
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-6title>
<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>