控件（二）——multiview和view控件联合使用显示视图

mulitiview控件，它类似于VB中的tabcontrol控件。它在页面中，可以放置多个“view”（也就是选项卡），可以实现让用户在同一页面中，通过切换到每个选项卡，从而看到要看的内容，而不用每次都重新打开一个新的。

mulitiview主要是通过ActiveViewIndex属性设置为要显示View控件的索引值，可以在视图间移动。mulitiview控件还支持可以添加到每个View控件的导航按钮。

要创建导航按钮，可以向每个view控件添加一个按钮控件（Button、LinkButton、ImageButton）。然后可以将每个按钮的CommandName和CommandArgument属性设置为保留值以使Mutiview控件移动到另一个视图。

下表列出了保留的CommandName值和相应的CommandArgument值。

下面将一个应用的例子，前台设计演示：

上图控件的前台代码是：

<div> <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" onselectedindexchanged="DropDownList1_SelectedIndexChanged" Height="16px" Width="72px"> <asp:ListItem Value="0">1</asp:ListItem> <asp:ListItem Value="1">2</asp:ListItem> <asp:ListItem Value="2">3</asp:ListItem> <asp:ListItem Value="3">4</asp:ListItem> </asp:DropDownList> <asp:MultiView ID="MultiView1" runat="server"> <asp:View ID="View1" runat="server"> 111111111111111111111<br /> <asp:Button ID="Button1" runat="server" Text="切换到第二个视图" CommandName="SwitchViewByID" οnclick="Button1_Click" CommandArgument="View2" /> <asp:Button ID="Button2" runat="server" Text="切换到下一个视图" CommandName="NextView" οnclick="Button2_Click" /> </asp:View> <asp:View ID="View2" runat="server"> 222222222222222222222<br /> <asp:Button ID="Button3" runat="server" Text="切换到第三个视图" CommandArgument="View3" CommandName="SwitchViewByID" /> <asp:Button ID="Button4" runat="server" Text="切换到下一个视图" CommandName="NextView" /> </asp:View> <asp:View ID="View3" runat="server"> 333333333333333333333 <br /> <asp:Button ID="Button5" runat="server" Text="切换到第四个视图" CommandArgument="View4" CommandName="SwitchViewByID" /> <asp:Button ID="Button6" runat="server" Text="切换到下一个视图" CommandName="NextView" /> </asp:View> <asp:View ID="View4" runat="server"> 444444444444444444444 </asp:View> </asp:MultiView> </div>

后台代码演示：

/// <summary> /// multiview 控件和view控件 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> protected void Page_Load(object sender, EventArgs e) { if (Request.QueryString["id"]!=null ) { MultiView1.ActiveViewIndex = Convert.ToInt32(Request.QueryString["id"]); } } protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e) {//设置当前被显示的控件为下拉列表被选中的值 MultiView1.ActiveViewIndex = Convert.ToInt32(DropDownList1.SelectedValue); }

效果演示：

当你点击相应的按钮，会跳到相应的视图。