ASP.NET高级控件——Wizard控件

最新推荐文章于 2024-09-08 10:26:39 发布

steven_nj

最新推荐文章于 2024-09-08 10:26:39 发布

阅读量2.1k

点赞数

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

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

58 篇文章 0 订阅

订阅专栏

Wizard控件

Wizard Control

用户希望新应用程序能提供向导功能，以引导他们完成多步操作。这些用户界面都被施了魔法。抱歉，开个玩笑而已。

Wizards控件为用户提供了呈现一连串步骤的基础架构，这样可以访问所有步骤中包含的数据，并方便地进行前后导航。

与MultiView控件类似，Wizard包含一个WizardStep对象集合。如图5-3所示，WizardStep从View类继承，而且WizardStep和Wizard控件之间的关系与View和MultiView的关系类似。

图5-3：View类的层次

与MultiView控件一样，所有WizardStep中的所有控件都位于页面控件树中，且无论哪个WizardStep可见，都可以在运行时通过代码实现控件访问。当用户单击一个导航按钮或链接时，页面将被提交到服务器。但是，不支持将在第6章描述到的跨页提交。

Wizard控件负责导航，包括线性导航（从一步转到下一步或上一步）和非线性导航（从一步转到任意其他步）。该控件能够自动创建合适的按钮，例如Next，Previous以及Finish。第一步没有Previous按钮，最后一步没有Next按钮。通过设置可以使得一些步骤只能被导航一次。另外，默认情况下，Wizard控件显示一个包含导航链接的工具栏，这让用户可以从当前步骤转到其他步骤。

Wizard控件的所有外观特征几乎都可以通过样式和模板来自定义，包括各种各样的按钮和链接、标题和页脚、工具条和WizardStep。

研究Wizard控件最好的方法是去查看一个示例。在这个示例中，将创建一个奇怪的向导来引导完成早晨醒来后需要做的事。

创建一个名为WizardDemo的网站。将一个Wizard控件拖到页面上。该控件默认包含一个两步的向导。虽然两个步骤有些少，但是功能是完整的。在设计视图中，将看到两个工具条链接和一个Next按钮，如图5-4所示。

图5-4：设计视图中的Wizard控件

查看内容文件的源视图，将看到与以下代码类似的Wizard声明：

<asp:Wizard ID=”Wizard 1” runat=”server”>

<asp:WizardStep ID=”WizardStep 1” runat=”server” Title=”Step 1” >

</asp:WizardStep>

<asp:WizardStep ID=”WizardStep 2” runat=”server” Title=”Step 2” >

</asp:WizardStep>

</WizardSteps>

</asp:Wizard>

<asp:Wizard>标签的内容是一对<WizardSteps>标签。WizardStep控件在这些标签中声明。

如果运行该页，那么将看到如图5-5所示的页面。因为这是第一步，所以只显示一个“Next”按钮，但工具条显示了两个步骤的链接。

图5-5：默认的Wizard控件

现在让我们把这个示例打扮一下。单击WizardStep的内容区域，并输入一些文本，例如使用<h2>标签设置标题内容为“Wake Up”，如图5-6所示。

图5-6：将内容添加到一个Wizard步骤

接下来，单击Wizard控件的智能标记并选择“Add/Remove”WizardStep，此时将打开WizardStep集合编辑器，如图5-7所示。再添加5个步骤后，总数将达到7个。为每一个步骤（包括前两个）输入一个标题值和ID值，如表5-2所示。

表5-2 WizardDemo的WizardSteps

ID	标题
stpWakeUp	Step1
stpShower	Step2
stpTakeMeds	Step3
stpBrushTeeth	Step4

续表5-2 WizardDemo的WizardSteps

ID	标题
stpGetDressed	Step5
stpEatBreakfast	Step6
stpFinish	Step7

图5-7：WizardStep集合编辑器

尽管可以单击智能标记，依次选择每个步骤，并如同上面添加第一步一样添加内容，但是切换到源视图直接编辑WizardStep声明会更容易些。完成之后，Wizard控件的声明看起来类似于示例5-6。

示例5-6：添加步骤后的Wizard控件声明

<asp:Wizard ID=”wzrdMorning” runat=”server”>

<asp:WizardStep ID=”stpWakeUp” runat=”server” Title=”Step 1” >

</asp:WizardStep>

<asp:WizardStep ID=”stpShower” runat=”server” Title=”Step 2” >

<h2>Shower</h2>

</asp:WizardStep>

<asp:WizardStep ID=”stpTakeMeds” runat=”server” Title=”Step 3” >

<h2>Take Medicine</h2>

</asp:WizardStep>

<asp:WizardStep ID=”stpBrushTeeth” runat=”server” Title=”Step 4” >

<h2>Brush Teeth</h2>

</asp:WizardStep>

<asp:WizardStep ID=”stpGetDressed” runat=”server” Title=”Step 5” >

<h2>Get Dressed</h2>

</asp:WizardStep>

<asp:WizardStep ID=”stpEatBreakfast” runat=”server” Title=”Step 6” >

<h2>Eat Breakfast</h2>

</asp:WizardStep>

<asp:WizardStep ID=”stpFinish” runat=”server” Title=”Step 7” >

</asp:WizardStep>

</WizardSteps>

</asp:Wizard>

Wizard控件有许多外观和行为属性。表5-3列出了一些除与按钮外观相关的属性之外的、最重要的属性。按钮外观相关的属性在表5-4中列出。在后面的WizardDemo示例中，将看到更多的属性。

表5-3 与按钮外观无关的属性

名称	类型	读	写	说明
ActiveStep	WizardStepBase	×		WizardsSteps集合中当前显示的步骤
ActiveStepIndex	Integer	×	×	WizardsSteps集合中当前显示的从0开始的步骤
CancelDestinationPageUrl	String	×	×	当用户单击取消按钮时要链接到的URL
CellPadding	Integer	×	×	单元格的内容与边框间的像素间距。默认值为0
CellSpacing	Integer	×	×	单元格间的像素间距。默认值为0
DisplayCancelButton	Boolean	×	×	如果为true，则显示一个取消按钮。默认值为false
DisplaySideBar	Boolean	×	×	如果为true，则显示一个工具条。默认值为false
FinishDestinationPageUrl	String	×	×	当用户单击完成按钮时要链接到的URL
FinishNavigationTemplate	ITemplate	×	×	用于指定完成步骤的导航区域的样式和内容的模板，包括最后的步骤和Step- Type=Finish的步骤
HeaderStyle	TableItemStyle	×		标题区域的样式属性
HeaderTemplate	ITemplate	×	×	用于指定标题区域的内容和样式的模板，标题区域位于每个步骤的顶部

续表5-3 与按钮外观无关的属性

名称	类型	读	写	说明
HeaderText	string	×	×	在标题区域显示的文本
NavigationButtonStyle	Style	×		导航区域按钮的样式属性
NavigationStyle	TableItemStyle	×		导航区域的样式属性
SideBarButtonStyle	Style	×		用于指定侧栏上按钮外观的样式属性
SideBarStyle	TableItemStyle	×		侧栏区域的样式
SideBarTemplate	ITemplate	×	×	用于指定侧栏区域内容和样式的模板
SkipLinkText	string	×	×	为不可见图像呈现替换文本，以配合辅助技术。默认为“Skip Navigation Links”，默认值将根据服务器当前的区域设置进行本地化
StartNavigationTemplate	ITemplate	×	×	用于指定Start步骤的导航区域的内容和样式的模板。Start步骤是第一步或是StepType=Start的步骤
StepNavigationTemplate	ITemplate	×	×	用于指定一般步骤(Start、Finish或Complete以外的步骤)中导航区域内容和样式的模板
StepStyle	TableItemStyle	×		WizardStep对象的样式属性
WizardSteps	WizardStepCollection	×		WizardStep对象的集合

表5-4 与按钮的显示相关的Wizard属性

名称

类型

读

写

值

说明

CancelButtonImageUrl

FinishStepButtonImageUrl

FinishStepPreviousButtonImageUrl

NextStepButtonImageUrl

PreviousStepButtonImageUrl

StartStepNextButtonImageUrl

String

按钮上所显示图像的URL

CancelButtonStyle

FinishStepButtonStyle

FinishStepPreviousButtonStyle

NextStepButtonStyle

PreviousStepButtonStyle

StartStepNextButtonStyle

Style

用于指定按钮外观的样式属性

续表5-4 与按钮的显示相关的Wizard属性

名称

类型

读

写

值

说明

CancelButtonText

FinishStepButtonText

FinishStepPreviousButtonText

NextStepButtonText

PreviousStepButtonText

StartStepNextButtonText

String

按钮上显示的文本

CancelButtonType

FinishStepButtonType

FinishStepPreviousButtonType

NextStepButtonType

PreviousStepButtonType

StartStepNextButtonType

ButtonType

Button、Image、Link

按钮类型

大部分属性是TableItemStyle类型。该类从System.Web.UI.WebControls.Style继承，它包含用于格式化组成Wizard控件的表格行和单元格的属性。TableItemStyle类有许多属性，包括BackColor、BorderColor、BorderStyle、BorderWidth、CssClass、Font、ForeColor、Height、HorizonalAlign、VerticalAlign、Width和Wrap。

当在VS2005设计视图中设置Wizard控件的属性时，属性窗口中的TableItemStyle类型的属性旁边会显示一个加号。单击这个加号展开TableItemStyle子属性列表，如图5-8所示。在内容文件的Wizard控件声明中，以这种方式设置的属性包含在单独的元素中，如下面代码段中高亮显示的代码。

<asp:Wizard ID=”Wizard 1” runat=”server” ActiveStepIndex=” 0” >

<asp:WizardStep ID=”stpWakeUp” runat=”server” Title=”Step 1” >

<h2>

Wake Up</h2>

</asp:WizardStep>

<asp:WizardStep ID=”WizardStep 2” runat=”server” Title=”Step 2” >

</asp:WizardStep>

</WizardSteps>

<HeaderStyle

BackColor=”Gray”

BorderColor=”Black”

BorderStyle=”Solid”

BorderWidth=”2px”

Font-Size=”0.9em”

ForeColor=”White”

HorizontalAlign=”Center” />

</asp:Wizard>

图5-8：设计视图中TableItemStyle类型的属性

在源视图中操作时，TableItemStyle类型的属性被列出并直接嵌入到Wizard控件声明中，它的格式如图5-9所示，下面的代码段高亮显示了嵌入式的属性声明。

<asp:Wizard ID=”Wizard 1” runat=”server”

ActiveStepIndex=” 0”

SideBarStyle-BackColor=”Yellow”

SideBarStyle-BorderStyle=”Dashed”

SideBarStyle-Font-Bold=”true”

SideBarStyle-ForeColor=”Black”>

<asp:WizardStep ID=”stpWakeUp” runat=”server” Title=”Step 1” >

<h2>

Wake Up</h2>

</asp:WizardStep>

<asp:WizardStep ID=”WizardStep 2” runat=”server” Title=”Step 2” >

</asp:WizardStep>

</WizardSteps>

</asp:Wizard>

WizardStep有一个StepType属性，这个属性的值是一个WizardStepType枚举值，该枚举在表5-5中列出。StepType默认为Auto，这时导航界面由WizardStep集合中步骤的顺序决定。第一步只有一个“Next”按钮，最后一步只有一个“Previous”按钮，其他的StepType值是Auto的步骤包含“Previous”和“Next”两个按钮。

此外，可以为StepType设置一个不同的值以修改默认行为，表5-5列出了这些值。例如，把StepType设置为Complete，就可以创建一个不包含任何导航按钮的确认页。

图5-9：源视图中TableItemStyle类型的属性。

表5-5 WizardStepType的枚举值

成员	说明
Auto	声明步骤时的顺序决定了导航的界面，这是默认值
Complete	要显示的最后步骤，它不呈现导航按钮
Finish	最后的数据采集步骤，它只呈现被动完成和上一步两个按钮
Start	第一步，只呈现一个下一步按钮
Step	Start、Finish和Complete之外的任何步骤，它呈现上一步和下一步按钮

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

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

表5-6列出了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控件包含3个特别有意思的方法，如表5-7所示。

表5-7 Wizard的方法

方法名称	返回类型	说明
GetHistory	ICollection	返回一个按被访问的顺序排列的WizardStepBase 对象的集合，索引0 为最近访问的步骤
GetStepType	WizardStepType	步骤的类型，如表5-5所示
MoveTo	void	移动到参数中指定的WizardStep对象

现在回到WizardDemo示例。在该示例中，将应用刚才列出并讨论过的多个属性、方法和事件。

首先，为WizardStep中的每个WizardStep添加一些文本。每个步骤的内容可以包含文本和HTML，以及其他ASP.NET服务器控件和用户控件，以方便重用界面和代码。

接下来，设置第一步的StepType属性为Start，设置第7步的StepType属性为Finish。设置第3步的AlowReturn属性为false，这样只能访问该步骤一次。最后，再添加一个WizardStep到WizardStep集合中，并设置StepType属性为Complete。Wizard控件声明中的WizardStep部分看起来类似于示例5-7，修改的代码被高亮显示（除了添加的文本内容）。

示例5-7：WizardSteps声明

<asp:WizardStep ID=”stpWakeUp” runat=”server”

Title=”Step 1”

StepType=”Start”>

Rise and shine sleepy head.

</asp:WizardStep>

<asp:WizardStep ID=”stpShower” runat=”server”

Title=”Step 2” >

<h2>Shower</h2>

Make it cold!

</asp:WizardStep>

<asp:WizardStep ID=”stpTakeMeds” runat=”server”

Title=”Step 3”

AllowReturn=”False”>

<h2>Take Medicine</h2>

Only do this once.

</asp:WizardStep>

<asp:WizardStep ID=”stpBrushTeeth” runat=”server”

Title=”Step 4” >

<h2>Brush Teeth</h2>

Don’t forget to floss.

</asp:WizardStep>

<asp:WizardStep ID=”stpGetDressed” runat=”server”

Title=”Step 5” >

<h2>Get Dressed</h2>

Got to look good.

</asp:WizardStep>

<asp:WizardStep ID=”stpEatBreakfast” runat=”server”

Title=”Step 6” >

<h2>Eat Breakfast</h2>

The most important meal of the day.

</asp:WizardStep>

<asp:WizardStep ID=”stpFinish” runat=”server”

Title=”Step 7”

StepType=”Finish”>

Meet the world!

</asp:WizardStep>

<asp:WizardStep ID=”stpComplete” runat=”server”

StepType=”Complete”

Title=”Complete”>

<h2>Complete!</h2>

Your morning routine is now complete.

</asp:WizardStep>

</WizardSteps>

接下来，在页面上添加一个下拉列表控件和几个标签。这些标签将用于显示变量，下拉列表将用于说明如何在Wizard控件之外，以编程方式控制步骤导航。示例5-8中内容文件的代码段声明了这些控件。

示例5-8：WizardDemo中的附加控件

<br />

Select a step: 

<asp:DropDownList ID=”DropDownList 1” runat=”server”

AutoPostBack=”True”

OnSelectedIndexChanged=”DropDownList1_SelectedIndexChanged” >

<asp:ListItem>1</asp:ListItem>

<asp:ListItem>2</asp:ListItem>

<asp:ListItem>3</asp:ListItem>

<asp:ListItem>4</asp:ListItem>

<asp:ListItem>5</asp:ListItem>

<asp:ListItem>6</asp:ListItem>

<asp:ListItem>7</asp:ListItem>

</asp:DropDownList>

<br />

Active Step: 

<asp:Label ID=”lblActiveStep” runat=”server” />

<br />

ActiveStepIndex: 

<asp:Label ID=”lblActiveStepIndex” runat=”server” />

<br />

StepType: 

<asp:Label ID=”lblStepType” runat=”server” />

<br />

Button Info: 

<asp:Label ID=”lblButtonInfo” runat=”server” />

<br />

<u>History</u>

<br />

<asp:Label ID=”lblHistory” runat=”server” />

回到“Design View”，单击“Wizard”控件的“Smart tag”，并选择“Auto Format”。在方案列表中选择一个方案。在本示例中，选择了“Simple”方案。正如将要看到的，该操作将会自动应用许多格式化属性。

在Wizard控件的属性窗口中，设置DisplayCancelButton属性为true。

在设计视图下选中Wizard控件，单击属性窗口中的事件图标（一个小闪电）。双击ActiveStepChanged旁边的单元格以便生成该事件的事件处理程序，并以默认名称（wzrdMorning_ActiveStepChanged）命名。以同样的方法为CancelButtonClick创建事件处理程序。对于FinishButtonClick事件，输入名称Button_Click，这将会在代码隐藏文件中插入以该名称命名的事件处理程序。最后，为每个NextButtonClick、PreviousButtonClick和SideBarButtonClick事件都输入Button_Click。

切换到代码隐藏文件Default.aspx.cs。在文件顶部添加如下using声明：

using System.Collections;

这样，不用输入完整命名空间就可以使用ICollection对象，该对象是Wizard控件的GetHistory方法的返回值类型。

在VS2005生成的事件处理程序的代码框架中，添加示例5-9中高亮显示的代码。

示例5-9：WizardDemo中Default.aspx.cs的事件处理程序

protected void wzrdMorning_ActiveStepChanged(object sender, EventArgs e)

{

lblActiveStep.Text = wzrdMorning.ActiveStep.Title;

lblActiveStepIndex.Text = wzrdMorning.ActiveStepIndex.ToString( );

lblStepType.Text = wzrdMorning.ActiveStep.StepType.ToString( );

// 获取历史访问记录

Icollection steps = wzrdMorning.GetHistory( );

string str = “”;

foreach(WizardStep step in steps)

{

str += step.Title + “<br/>”;

}

lblHistory.Text = str;

}

protected void Button_Click(object sender, WizardNavigationEventArgs e)

{

string str = “Current Index: “ +

e.CurrentStepIndex.ToString( ) +

“. Next Step: “ + e.NextStepIndex.ToString( );

lblButtonInfo.Text = str;

}

protected void wzrdMorning_CancelButtonClick(object sender, EventArgs e)

{

lblActiveStep.Text = “”;

lblActiveStepIndex.Text = “”;

lblStepType.Text = “”;

lblButtonInfo.Text = “Canceled”;

wzrdMorning.Visible = false;

}

protected void DropDownList1_SelectedIndexChanged(object sender,

EventArgs e)

{

DropDownList ddl = (DropDownList)sender;

int index = ddl.SelectedIndex;

WizardStepBase step = wzrdMorning.WizardSteps[index];

wzrdMorning.MoveTo(step);

}

无论由用户操作触发还是由程序触发，当每次改变当前步骤时，都将执行ActiveStepChanged的事件处理程序wzrdMorning_ActiveStepChanged。该方法将获取

的3个数据填充到标签中，并显示已访问步骤的历史记录。

第一个标签显示当前的活动步骤。Wizard控件的ActiveStep属性返回一个WizardStep对象。该对象的Title属性可获取活动步骤的标题。第二个标签由ActiveStepIndex属性值填充。由于它是整型值，所以必须将其转换为字符串。第三个标签显示WizardStep类的StepType属性，该属性是WizardStepType类型，因此，也要转换为一个字符串，才能赋值给TextBox的Text属性。

然后，WizrdMorning_ActiveStepChanged方法调用Wizard类的GetHistory方法，该方法返回一个WizardStep对象的集合（准确地说，应该是WizardStepBase对象的集合，WizardStep从它继承）。遍历该集合并把每个步骤的Title属性添加到稍后要赋给lblHistory标签的字符串中。最近一次访问的步骤索引为0，它的上一个步骤索引为1，以此类推。

除了Cancel按钮以外，其他按钮和链接都使用同一个事件处理程序：Button_Click。该方使用当前步骤索引和下一个步骤索引填充lblButtonInfo标签，两个索引值都来自事件参数的属性。

Cancel按钮的单击事件处理程序wizrdMorning_CancelButtonClick，能够清空所有标签信息并隐藏Wizard控件。

页面上的DropDownList控件可以使您转到任何一个步骤。在它的SelectedIndex- Changed事件中，首先将sender对象转换为DropDownList类型，然后获取SelectedIndex属性值。该值被用作WizardStep集合中的索引来获取目标WizardStep对象的引用（实际上是WizardStepBase对象，WizardStep从它继承）。调用Wizard的MoveTo方法，实现以编程方式转到该步骤。有意思的是，它可以多次转到一个步骤，如步骤3，它的AllowReturn属性设置为false。