asp.net2.0之Wizard控件再解

最新推荐文章于 2024-02-08 10:46:21 发布

steven_nj

最新推荐文章于 2024-02-08 10:46:21 发布

阅读量1.3k

点赞数

分类专栏： asp.net开发文章标签： wizard asp.net asp server table div

asp.net开发专栏收录该内容

58 篇文章

订阅专栏

本文介绍ASP.NET中的Wizard控件，该控件可帮助开发者创建多步骤表单，提高用户体验。文章详细解释了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，这样用户在提交数据后，将无法返回到前面已经完成的步骤来更改数据。

    应用示例：

<%@ 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">

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>

</head>

<body>

<div>

<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">

<asp:DataList runat="Server" ID="SideBarList">

<asp:LinkButton runat="server" ID="SideBarButton" ForeColor="#FFF277" Font-Underline="false"></asp:LinkButton>

</ItemTemplate>

</asp:DataList>

</div>

</SideBarTemplate>

<asp:WizardStep ID="WizardStep1" runat="server" Title="姓名职位">

<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>

<asp:ValidationSummary runat="server" DisplayMode="List" ID="Summary" />

</td>

</tr>

</table>

</div>

</asp:WizardStep>

<asp:WizardStep ID="WizardStep2" runat="server" Title="联系方式">

<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>

</tr>

</table>

</div>

</asp:WizardStep>

<asp:WizardStep ID="WizardStep3" runat="server" Title="备注信息">

<table>

<tr>

备注：</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="小结">

<asp:Label runat="server" ID="LabMessage" />

</div>

</asp:WizardStep>

<asp:WizardStep ID="WizardStep5" runat="server" StepType="Complete" Title="结束">

<asp:Label runat="server" ID="LabFinish" />

</div>

</asp:WizardStep>

</WizardSteps>

<NavigationButtonStyle Width="80px" BackColor="White" BorderColor="#CC9966" BorderStyle="Solid"

BorderWidth="1px" Font-Names="Verdana" Font-Size="0.8em" ForeColor="#990000" />

<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>

注：SideBarTemplate中必须包含一个ID为“SideBarList”的DataList控件，同时DataList中还必须包含一个IButtonControl类型的控件。本例中设置为ID“SideBraButton”的LinkButton控件。