Asp.net tabcontrol_aspnet tabcontrol-优快云博客

本文介绍了如何使用ASP.NET的Menu控件和Multiview控件创建TabControl。通过设置Menu控件的不同选项卡和Multiview控件的多个视图，实现了用户界面的选项卡切换效果。在MenuItemClick事件中，动态改变菜单项的图片并切换Multiview的活动视图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下面介绍实现方法：

一、拖拉一个Menu控件

这个控件是负责控件各个选项卡的，也就是最终呈现在用户面前的界面，并且我们指定每个选项卡的图片。

代码：

<asp:Menu ID="Menu1" runat="server" onmenuitemclick="Menu1_MenuItemClick"
            Orientation="Horizontal" StaticEnableDefaultPopOutImage="False">
            <Items>
                <asp:MenuItem Text="1" Value="0" ImageUrl="~/bb.gif"></asp:MenuItem>
                <asp:MenuItem Text="2" Value="1" ImageUrl="~/bb.gif"></asp:MenuItem>
                <asp:MenuItem Text="3" Value="2" ImageUrl="~/bb.gif"></asp:MenuItem>
            </Items>
       </asp:Menu>

二、拖拉一个Multiview控件

在Multiview控件中，分成多个view选项卡，这里我设置3个选项卡

代码：

<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
            <asp:View ID="View1" runat="server">
            <table>
                <tr>
                    <td>tab view 1</td>
                </tr>
            </table>
            </asp:View>
            <asp:View ID="View2" runat="server">
            <table>
                <tr>
                    <td>tab view2</td>
                </tr>
            </table>
            </asp:View>
            <asp:View ID="View3" runat="server">
            <table>
                <tr>
                    <td>tab view 3</td>
                </tr>
            </table>
            </asp:View>

        </asp:MultiView>

三、实现Menu的ItemClick事件

代码：

protected void Menu1_MenuItemClick(object sender, MenuEventArgs e)
    {
        for (int i = 0; i <= Menu1.Items.Count - 1; i++ )
        {
            if (i.ToString() == e.Item.Value)
            {
                Menu1.Items[i].ImageUrl = "aa.gif";
                MultiView1.ActiveViewIndex = i;
            }
            else
            {
                Menu1.Items[i].ImageUrl = "bb.gif";
            }
        }
    }