控件（二）——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" 
            onclick="Button1_Click" CommandArgument="View2" />
        <asp:Button ID="Button2" runat="server" Text="切换到下一个视图" CommandName="NextView" 
            onclick="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);
        }

效果演示：

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