1.2.2 MultiView控件
在B/S项目的开发中，有时可能要把一个Web页面分成不同的块，而每次只显示其中一块，同时又能方便地在块与块之间导航。这种技术常用于在一个静态页面中引导用户完成多个步骤的操作，如会员注册、在线调查功能的实现。尽管已经有一个专门为此目的设计的Wizard控件，但是仍然可能使用MultiView和View控件来创建类似于向导的应用程序。块是页面中某区域的内容，ASP.NET提供了View控件对块进行管理。每个块对应一个View控件，所有View对象包含在MultiView对象中。MultiView中每次只显示一个View对象。这个对象称为活动视图。
MultiView控件有一个类型为ViewCollection的只读属性View。使用该属性可获得包含在MultiView中的View对象集合。与所有的.NET集合一样，该集合中的元素被编入索引。MultiView控件包含ActiveViewIndex属性，该属性可获取或设置以“0”开始的当前活动视图的索引。如果没有视图是活动的，那么ActiveViewIndex为默认值“－1”。表1-3给出MultiView控件的4个CommandName字段，为按钮的CommandName属性赋值，能够实现视图导航。
表1-3 MultiView控件的CommandName字段
将某些控件如ImageButton的CommandName属性设置为NextView，单击这些按钮后将自动导航到下一个视图，而不需要额外的代码。开发者不需要为按钮编写单击事件处理程序。通过调用MultiView控件的SetActiveView或GetActiveView方法也可以设置或获取活动视图。SetActiveView使用View对象作为参数，而GetActiveView则返回一个View对象。每次视图发生变化时，页面都会被提交到服务器，同时MultiView控件和View控件将触发多个事件。活动视图发生变化时，MultiView控件将触发ActiveViewChanged事件。与此同时，新的活动视图将触发Activate事件，原活动视图则触发Deactivate事件。所有的事件都包含一个EventArgs类型的参数。该参数只是一个占位符，它没有提供与事件相关的附加信息。然而，与所有的事件处理程序一样，对事件源的引用将传递给事件处理程序。View控件包含一个Boolean类型的Visible属性，设置该属性可以控制特定View对象的可见性，或以编程方式确定哪一个View是可见的。MultiView和View控件都没有样式属性。对于MultiView控件而言，这不足为奇。毕竟它只不过是View控件的容器而已。对于View控件而言，如果要使用样式属性，则必须将样式应用到每一个它包含的控件中。还有一种方法是在View控件中嵌入一个Panel控件，并设置Panel的样式属性。
下面的示例演示如何使用MultiView控件来创建基本调查。每个View控件都是一个单独的调查问题。用户单击任何页上的“上一页”按钮时，将减小ActiveViewIndex属性的值，以定位到上一个View控件。用户单击任何页上的“下一页”按钮时，将增大ActiveViewIndex属性的值，以定位到下一个View控件：
＜h3＞MultiView ActiveViewIndex Example＜/h3＞
＜asp:Panel id="Page1ViewPanel"
Width="330px"
Height="150px"
HorizontalAlign =Left
Font-size="12"
BackColor="#C0C0FF"
BorderColor="#404040"
BorderStyle="Double"
runat="Server"＞
＜asp:MultiView id="DevPollMultiView" ActiveViewIndex=0 runat="Server"＞
＜asp:View id="Page1" runat="Server"＞
＜asp:Label id="Page1Label"
Font-bold="true"
Text="What kind of applications do you develop?"
runat="Server"＞
＜/asp:Label＞＜br＞＜br＞
＜asp:RadioButton id="Page1Radio1"
Text="Web Applications"
Checked="False"
GroupName="RadioGroup1"
runat="server" ＞
＜/asp:RadioButton＞＜br＞
＜asp:RadioButton id="Page1Radio2"
Text="Windows Forms Applications"
Checked="False"
GroupName="RadioGroup1"
runat="server" ＞
＜/asp:RadioButton＞＜br＞
＜asp:Button id="Page1Next"
Text = "Next"
OnClick="NextButton_Command"
Height="25"
Width="70"
runat= "Server"＞
＜/asp:Button＞
＜/asp:View＞
＜asp:View id="Page2" runat="Server"＞
＜asp:Label id="Page2Label"
Font-bold="true"
Text="How long have you been a developer?"
runat="Server"＞
＜/asp:Label＞＜br＞＜br＞
＜asp:RadioButton id="Page2Radio1"
Text="Less than five years"
Checked="False"
GroupName="RadioGroup1"
runat="Server"＞
＜/asp:RadioButton＞＜br＞
＜asp:RadioButton id="Page2Radio2"
Text="More than five years"
Checked="False"
GroupName="RadioGroup1"
runat="Server"＞
＜/asp:RadioButton＞＜br＞
＜asp:Button id="Page2Back"
Text = "Previous"
OnClick="BackButton_Command"
Height="25"
Width="70"
runat= "Server"＞
＜/asp:Button＞
＜asp:Button id="Page2Next"
Text = "Next"
OnClick="NextButton_Command"
Height="25"
Width="70"
runat="Server"＞
＜/asp:Button＞
＜/asp:View＞
＜asp:View id="Page3"
runat="Server"＞
＜asp:Label id="Page3Label1"
Font-bold="true"
Text= "What is your primary programming language?"
runat="Server"＞
＜/asp:Label＞＜br＞＜br＞
＜asp:RadioButton id="Page3Radio1"
Text="Visual Basic .NET"
Checked="False"
GroupName="RadioGroup1"
runat="Server"＞
＜/asp:RadioButton＞＜br＞
＜asp:RadioButton id="Page3Radio2"
Text="C#"
Checked="False"
GroupName="RadioGroup1"
runat="Server"＞
＜/asp:RadioButton＞＜br＞
＜asp:RadioButton id="Page3Radio3"
Text="C++"
Checked="False"
GroupName="RadioGroup1"
runat="Server"＞
＜/asp:RadioButton＞＜br＞
＜asp:Button id="Page3Back"
Text = "Previous"
OnClick="BackButton_Command"
Height="25"
Width="70"
runat="Server"＞
＜/asp:Button＞
＜asp:Button id="Page3Next"
Text = "Next"
OnClick="NextButton_Command"
Height="25"
Width="70"
runat="Server"＞
＜/asp:Button＞＜br＞
＜/asp:View＞
＜asp:View id="Page4" runat="Server"＞
＜asp:Label id="Label1"
Font-bold="true"
Text = "Thank you for taking the survey."
runat="Server"＞
＜/asp:Label＞
＜br＞＜br＞
＜asp:Button id="Page4Save"
Text = "Save Responses"
OnClick="NextButton_Command"
Height="25"
Width="110"
runat="Server"＞
＜/asp:Button＞
＜asp:Button id="Page4Restart"
Text = "Retake Survey"
OnClick="BackButton_Command"
Height="25"
Width="110"
runat= "Server"＞
＜/asp:Button＞
＜/asp:View＞
＜/asp:MultiView＞
＜/asp:Panel＞
后台代码如下：
protected void NextButton_Command(object sender, EventArgs e)
{
if (DevPollMultiView.ActiveViewIndex ＞ -1 & DevPollMultiView.ActiveView
-Index ＜ 3)
{
DevPollMultiView.ActiveViewIndex += 1;
}
else if (DevPollMultiView.ActiveViewIndex == 3)
{
Page4Save.Enabled = false;
Page4Restart.Enabled = false;
}
else
{
throw new Exception("An error occurred.");
}
}
protected void BackButton_Command(object sender, EventArgs e)
{
if (DevPollMultiView.ActiveViewIndex ＞ 0 & DevPollMultiView.ActiveView
-Index ＜= 2)
{
DevPollMultiView.ActiveViewIndex -= 1;
}
else if (DevPollMultiView.ActiveViewIndex == 3)
{
DevPollMultiView.ActiveViewIndex = 0;
}
else
{
throw new Exception("An error occurred.");
}
}
实现效果如图1-10和图1-11所示。
图1-10
图1-11
总地来说，MultiView就像＜Table＞＜/Table＞和＜TD＞＜/TD＞一样，View要放在MultiView中，它们两个才能起作用。可以把它们看成一个Panel集合，但是表现为“单选”状态，即当前只显示一个，用起来比Panel要省事得多。