ASP.NET - MultiView 和 View Web 服务器控件概述（二）
四、MultiView 类
MultiView 控件是一组 View 控件的容器。使用它可定义一组 View 控件，其中每个 View 控件都包含子控件。然后，应用程序可根据用户标识、用户首选项以及在查询字符串参数中传递的信息等条件，向客户端呈现特定的 View 控件。也可以使用 MultiView 控件创建向导。这种情况下，MultiView 控件包含的每个 View 控件都表示向导中的不同步骤或页。此控件还可用来开发移动设备的多屏幕应用程序。此控件提供的功能与 .NET Framework 1.1 版的 ASP.NET Form 移动控件相同。
在 MultiView 控件中，一次只能将一个 View 控件定义为活动视图。如果某个 View 控件定义为活动视图，它所包含的子控件则会呈现到客户端。可以使用 ActiveViewIndex 属性或 SetActiveView 方法定义活动视图。如果 ActiveViewIndex 属性为空，则 MultiView 控件不向客户端呈现任何内容。如果活动视图设置为 MultiView 控件中不存在的 View，则会在运行时引发 ArgumentOutOfRangeException。
可以通过声明方式或编程方式定义活动视图。如果在定义 MultiView 控件时以声明方式设置 ActiveViewIndex 属性，则会使设置为活动视图的 View 控件在首次调用 MultiView 控件时呈现到客户端。下面的代码示例演示如何以声明方式设置 ActiveViewIndex 属性。
<asp:MultiView id="MultiView1" ActiveViewIndex=0 runat="Server">
如果以编程方式设置 ActiveViewIndex 属性，或调用 SetActiveView 方法，则应用程序可以在运行时根据用户标识或首选项等条件，确定向客户端呈现哪个 View 控件。
若要允许用户在 MultiView 控件中的 View 控件之间进行导航，可将 LinkButton 或 Button 控件添加到每个 View 控件。若要利用 MultiView 控件对当前活动 View 进行自动更新，请将按钮或链接按钮的 CommandName 属性设置为与所需导航行为对应的命令名字段的值，这些命令名字段如下：PreviousViewCommandName、NextViewCommandName、SwitchViewByIDCommandName 或 SwitchViewByIndexCommandName。
示例
1、下面的代码示例演示如何使用 MultiView 控件创建基本调查。每个 View 控件都是一个单独的调查问题。当用户单击任一页上的“上一页”按钮时，ActiveViewIndex 属性递减以导航到上一个 View 控件。当用户单击任一页上的“下一页”按钮时，ActiveViewIndex 属性递增以导航到下一个 View 控件。
说明： 下面的代码示例使用单文件代码模型；在将这些代码示例直接复制到代码隐藏文件中时，它们可能无法正常工作。此代码示例必须被复制到具有 .aspx 扩展名的空文本文件中。
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head>
<title>MultiView ActiveViewIndex Example</title>
<script runat="server">
protected void NextButton_Command(object sender, EventArgs e)
{
// Determine which button was clicked
// and set the ActiveViewIndex property to
// the view selected by the user.
if (DevPollMultiView.ActiveViewIndex > -1 & DevPollMultiView.ActiveViewIndex < 3)
{
// Increment the ActiveViewIndex property
// by one to advance to the next view.
DevPollMultiView.ActiveViewIndex += 1;
}
else if (DevPollMultiView.ActiveViewIndex == 3)
{
// This is the final view.
// The user wants to save the survey results.
// Insert code here to save survey results.
// Disable the navigation buttons.
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.ActiveViewIndex <= 2)
{
// Decrement the ActiveViewIndex property
// by one to return to the previous view.
DevPollMultiView.ActiveViewIndex -= 1;
}
else if (DevPollMultiView.ActiveViewIndex == 3)
{
// This is the final view.
// The user wants to restart the survey.
// Return to the first view.
DevPollMultiView.ActiveViewIndex = 0;
}
else
{
throw new Exception("An error occurred.");
}
}
</script>
</head>
<body>
<form id="Form1" runat="Server">
<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"
AssociatedControlID="Page1">
</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 /><br /><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"
AssociatedControlID="Page2">
</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 /><br /><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"
AssociatedControlID="Page3">
</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 /><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"
AssociatedControlID="Page4">
</asp:Label>
<br /><br /><br /><br /><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>
</form>
</body>
</html>
2、下面的代码示例演示如何创建包含三个 View 控件的基本 MultiView 控件。用户从列表框中选择的视图被设置为活动视图并向用户显示。有关 MultiView 控件的更详细示例，请参见本主题中提供的其他代码示例。
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
font-family: Time