在 中如果要做一个具有向导式的应用程序是比较麻烦的所谓向导式应用就是说比如一个注册用户的应用是需要若干步完成的用户填完某一步的表单后可以点下一步而进入下一步也可以使用上一步的功能回到刚才的页面而在 中引入了两个新的控件:Multiview和Wizard向导控件大大方便了用户的使用在本文中将以 为例说明如何使用这两个控件来创建应用分别举出两个例子在线调查和注册用户读者可以通过本文加深对这两个控件的认识在这两个例子中我们还将使用到 中的一个新的控件masterpage具体的用法请参考其他文章的介绍
首先我们先用建立一个新的网站工程并且添加一个masterpage模版页设计如下图
)this
style
width=
;
border=
twffan=
done
>
模版页可以看到为了我们的应用演示用在上面的模版页中在左部列出了两个连接分别是在线调查和注册好了接下来我们来介绍如何使用multiview控件了所谓multiview控件其作用是可以将要显示的页面内容分为几个部分进行显示而每个部分的页面之间用比如上一步下一步的导航功能来连接我们先来看下multiview控件有哪些属性
） ActiveViewIndex该属性默认值为为了显示第一个步骤中的页面将其值设置为
） Views一个multiview控件包含多个views对象每个views对象里是可以摆放控件的但注意在每个views对象里所放置的控件的名称ID必须唯一否则会出错
要注意的是multiview控件中不提供任何自动的按钮要实现下一步上一步的按钮必须自己添加
下面开始设计这个在线调查的简单应用这里我们为了简单起见没使用数据库在真实的情况下会用数据库来存储用户的选项这个调查分为下面四个步骤
）第一个页面接受用户输入个人信息
）第二个页面用户选择喜欢的编程语言
）第三个页面用户输入最喜欢的组织
）第个页面显示用户在前三个页面所输入的信息
首先我们新增加一个空白页面并选择刚才建立好的模版页面为模版再往页面里拖拉一个multiview控件在增加multiview控件后再往其中拖拉个view控件最后往每个view控件里添加相关的控件如下图所示
%
align=center>http://img
educity
cn/img_
/
/
/
jpg
onload=
javascript:if(this
width>
)this
style
width=
;
border=
twffan=
done
>
添加相关的控件注意我们在每个view控件中都放置了nextprevious等按钮以方便页面的导航此外可以对每个按钮的commandname属性进行设置如下表
cellPadding=
width=
%
align=center border=
>CommandName NextView 导航到下一个页面
PrevView 导航到前一个页面SwitchViewByID 当command name属性设置为 SwitchViewByID时
必须设置Command Argument属性
比如CommandArgument=
View
表示当点该按钮时
跳转到ID为View
的页面中
在这个例子中我们都设置每个按钮的Command name属性为NextView或者PreView最后我们的代码结构如下（具体代码见附件）
align=center bgColor=#e
e
e
border=
>＜asp:MultiView ID=
MultiView
runat=
server
ActiveViewIndex=
＞
＜asp:View ID=View runat=server＞
＜/asp:View＞
＜asp:View ID=View runat=server＞
＜/asp:View＞
＜/asp:Multiview＞
运行我们的应用首先出现的是第一步要求填入个人信息如下图
% align=center>http://imgeducitycn/img_///jpg onload=javascript:if(thiswidth>)thisstylewidth=; border= twffan=done> 填入个人信息
点Next按钮
则进入下一个页面
% align=center>http://imgeducitycn/img_///jpg onload=javascript:if(thiswidth>)thisstylewidth=; border= twffan=done> 页面
再点Next按钮则同样进入第个页面最后的第个页面如下可以看到输出了用户之前各页面输入的信息
% align=center>http://imgeducitycn/img_///jpg onload=javascript:if(thiswidth>)thisstylewidth=; border= twffan=done> 输出
为了在最后输出用户之前输入的信息在第个页面（view）的Finished按钮中的事件中写入如下代码
align=center bgColor=#eee border=>Partial Class Survey
Protected Sub btnFinish_Click(ByVal sender As Object
ByVal e As SystemEventArgs) Handles btnFinishClick
lblFirstNameText = txtFirstNameText
lblLastNameText = txtLastNameText
lblEmailIdText = txtEmailText
If rdoVBChecked Then
lblLanguageText = VB
ElseIf rdoCSharpChecked Then
lblLanguageText = C#
ElseIf rdoJavaChecked Then
lblLanguageText = Java
End If
If rdoMicrosoftChecked Then
lblOrganizationText = Microsoft
ElseIf rdoSunChecked Then
lblOrganizationText = Sun Microsystems
ElseIf rdoIBMChecked Then
lblOrganizationText = IBM
End If
End Sub
Wizard向导控件在 中wizard向导控件比multiview控件更方便Wizard控件本身已经设置了比如上一步下一步完成等按钮了而且在设计视图状态下可以根据自己需要查看每一步骤的页面的内容而不象multiview控件那样在设计视图下在一个页面中将全部所有的步骤涉及的页面都显示出来下面看下wizard控件的重要属性和事件
ActiveStepIndex 显示当前是向导中的第几个步骤在页面刚开始加载时默认是
DisplaySideBar 当该属性设置为true时则将整个流程的步骤全部显示在页面中
DisplayCancelButton 当该属性设置为true时在每个页面中都将显示一个cancel的按钮要处理取消的事件可以在 CancelButtonClick() 中编写代码
一些重要事件
ActiveStepChanged 当从一个步骤转换到另一个步骤时触发的事件
PreviousButtonClick当按上一步按钮时触发的事件
NextButtonClick 当按下一步按钮时触发的事件
FinishButtonClick当完成按钮时触发的事件
CancelButtonClick 当取消按钮时触发的事件
下面我们重新建立一个空白页面同样使用之前的模版页面作为模版页往页面里拖放一个wizard控件在控件的wizardsteps属性中点击并弹出新窗口如下图所示
% align=center>http://imgeducitycn/img_///jpg onload=javascript:if(thiswidth>)thisstylewidth=; border= twffan=done> wizardsteps属性
在这里通过Add增加步骤在增加若干个步骤后按确定按钮回到wizard控件选择并且点选wizard控件的右上角的智能感知标记在弹出的窗口中的Step下拉列表中可以选择每一个步骤的页面分别为每一个步骤的页面添加相关控件这里我们设计了四个步骤
其中的第一个步骤的页面如下图所示其他步骤的页面和代码见附件的代码
% align=center>http://imgeducitycn/img_///jpg onload=javascript:if(thiswidth>)thisstylewidth=; border= twffan=done> 步骤
最后在最后一个页面的Finish按钮的事件中写入如下代码以显示之前几步用户的输入
align=center bgColor=#eee border=>Protected Sub Wizard_FinishButtonClick(ByVal sender As Object
ByVal e As SystemWebUIWebControlsWizardNavigationEventArgs)
Handles WizardFinishButtonClick
lblFirstNameText = txtFirstNameText
lblLastNameText = txtLastNameText
lblEmailIdText = txtEmailText
lblUserNameText = txtUserNameText
If rdoDailyChecked Then
lblNewslettersText = Daily Updates
ElseIf rdoWeeklyChecked Then
lblNewslettersText = Weekly Summary
ElseIf rdoNoThanksChecked Then
lblNewslettersText = No Thanks
End If
End Sub
运行程序首先看到的是第一个注册步骤如下图
% align=center>http://imgeducitycn/img_///jpg onload=javascript:if(thiswidth>)thisstylewidth=; border= twffan=done> 注册步骤 接下来按Next按钮进入第二个页面如下图
% align=center>http://imgeducitycn/img_///jpg onload=javascript:if(thiswidth>)thisstylewidth=; border= twffan=done> 第二个页面
最后在倒数第二个页面中点选Finish按钮即可出现最后的显示总结页面显示出前几步用户输入的内容
http://imgeducitycn/img_///jpg onload=javascript:if(thiswidth>)thisstylewidth=; border= twffan=done>
总结页面
小结
在本文中简单介绍了在 中如何使用multiview控件和wizard控件来进行简单开发可以看到如果在编写如用户注册等连续步骤的应用中使用wizard控件往往会比使用multiview控件简单方便
