7.5 MultiView与View控件

MultiView控件是View控件的容器，因此两者多半一起搭配运作。在MultiView控件中可以拖曳多个View控件，而View控件内才是存放一般ASP.NET服务器控件的，如Image、TextBox等；而虽然MultiView中可包含多个View控件，但在同一时间点只能显示一个View控件，因此也只有一个View控件区域会被显示。MultiView通过ActiveViewIndex属性值（默认值为-1）来决定哪个View要被显示，倘若您要显示第一个View控件则将MultiView的Active- ViewIndex属性值设定为0，若想显示第二个则将ActiveViewIndex属性值设置为1，以此类推，而程序也是利用ActiveViewIndex属性设置来切换不同的View（见图7-11）。

图7-11 MultiView与View控件关系图

范例7-7 使用MultiView与View控件显示图片

本范例将利用MultiView与View控件显示图片，请参考MultiViewControl.aspx程序，步骤说明如下：

创建RadioButtonList控件

请加入一个Label及RadioButtonList控件，将Label控件的Text属性改为“请选择车种：”，而RadioButtonList控件加入四个Itmes项目（见图7-12），具体设置如下。

l 项目0：设置Text属性为“Benz”，Value属性为“0”。

l 项目1：设置Text属性为“BMW”，Value属性为“1”。

l 项目2：设置Text属性为“Jaguar”，Value属性为“2”。

l 项目3：设置Text属性为“全部车种”，Value属性为“3”。

图7-12 RadioButtonList控件Item项目

最后将AutoPostBack属性设为True，RepeatDirection设为Horizontal。

创建MultiView控件

请拖曳一个MultiView控件到Page页面。

创建View控件

接着请拖曳4个View控件到MultiView控件中，且依序将4个View控件的ID改为viewBenz、viewBMW、viewJaguar、viewAllCars（见图7-13）。

图7-13 创建MultiView及View控件

创建Image控件

现在则要在View中加入Image控件：

l 请在viewBenz中加入一个Image控件，并指定其ImageUrl为“~/Images/BENZ.jpg”。

l 请在viewBMW中加入一个Image控件，并指定其ImageUrl为“~/Images/BMW.jpg”。

l 请在viewJaguar中加入一个Image控件，并指定其ImageUrl为“~/Images/Jaguar.jpg”。

l 请在viewJaguar中加入三个Image控件，并分别指定其ImageUrl为“~/Images/BENZ.jpg”、“~/Images/BMW.jpg”、“~/Images/Jaguar.jpg”。

设置完成后HTML程序代码如下：

<%@ Page Language="VB" AutoEventWireup="true" CodeFile="MultiViewControl.aspx.vb" Inherits="MultiViewControl" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>未命名页面</title>

</head>

<body>

<asp:Label ID="txtSelect" runat="server" Text="请选择车种：">

</asp:Label>

<br />

<asp:RadioButtonList ID="rdoCar" runat="server" RepeatDirection=

"Horizontal" AutoPostBack="True" OnSelectedIndexChanged=

"rdoCar_SelectedIndexChanged">

<asp:ListItem Value="0">Benz</asp:ListItem>

<asp:ListItem Value="1">BMW</asp:ListItem>

<asp:ListItem Value="2">Jaguar</asp:ListItem>

<asp:ListItem Value="3">全部车种</asp:ListItem>

</asp:RadioButtonList><asp:MultiView ID="MultiView1" runat="server">

<asp:View ID="viewBenz" runat="server">

<asp:Image ID="Image1" runat="server" ImageUrl="~/Images/

BENZ240.jpg" /></asp:View>

<asp:View ID="viewBMW" runat="server">

<asp:Image ID="Image2" runat="server" ImageUrl="~/Images/

BMW330.jpg" /></asp:View>

<asp:View ID="viewJaguar" runat="server">

<asp:Image ID="Image3" runat="server" ImageUrl="~/Images/

JaguarSTypeR.jpg" /></asp:View>

<asp:View ID="viewAllCars" runat="server">

<asp:Image ID="Image4" runat="server" ImageUrl="~/Images/

BENZ240.jpg" />

<asp:Image ID="Image5" runat="server" ImageUrl="~/Images/

BMW330.jpg" />

<asp:Image ID="Image6" runat="server" ImageUrl="~/Images/

JaguarSTypeR.jpg" /></asp:View>

</asp:MultiView>

</form>

</body>

</html>

创建切换View的程序

其实View切换的程序代码才是关键点，因此，请在MultiView、View及Image控件配置正确后，在RadioButtonList控件的SelectedIndexChanged事件中加入下列程序代码：

01 'View切换程序代码

02 Protected Sub rdoCar_SelectedIndexChanged(ByVal sender As Object, ByVal
e As System.EventArgs) Handles rdoCar.SelectedIndexChanged

For I As Integer = 0 To rdoCar.Items.Count - 1

03 If rdoCar.Items(I).Selected Then

04 MultiView1.ActiveViewIndex = CType(rdoCar.Items(I).Value,
Int16)

05 End If

06 Next

07 End Sub

程序说明：

这段程序的重点就是通过选择到RadioButtonList中第几个项目值，再将此项目值指定给MultiView的ActiveViewIndex属性，若ActiveView Index为0，则显示第一个View；若为1则显示第二个View，只有作用中的View会被显示，其他View都会隐藏起来（见图7-14）。