使用MultiView控件实现页签样式的两种最简单方法

目前使用Asp.net来实现页签功能，无一例外地都是靠Css通过样式来完成，甚至还使用到了JavaScript。

有最简单易行的方法吗？

以下两个方法都无需写令人头疼的JavaScript，我感觉已经最为简单，请各位参考：

1.使用Label，button，linkbutton等控件模拟标签。

废话不多说，上例子：

<asp:MultiView ID="MultiView1" runat="server">
            <asp:View ID="View1" runat="server">
                <asp:Panel ID="Panel1" runat="server" CssClass="TabContainer">
                    <asp:Label ID="Label1" runat="server" Text="Tab1" CssClass="TabItemActive"></asp:Label>
                    <asp:LinkButton ID="LinkButton1" runat="server" CssClass="TabItemInactive" 
                        CommandName="Tab2Command" oncommand="LinkButton_Command">Tab2</asp:LinkButton>
                    <asp:LinkButton ID="LinkButton2" runat="server" CssClass="TabItemInactive" 
                        CommandName="Tab3Command" oncommand="LinkButton_Command">Tab3</asp:LinkButton>
                </asp:Panel>
                <asp:Panel ID="Panel2" runat="server" CssClass="ContentPanel">
                    One
                </asp:Panel>
            </asp:View>
            <asp:View ID="View2" runat="server">
                <asp:Panel ID="Panel3" runat="server" CssClass="TabContainer">
                    <asp:LinkButton ID="LinkButton3" runat="server" CssClass="TabItemInactive" 
                        CommandName="Tab1Command" oncommand="LinkButton_Command">Tab1</asp:LinkButton>
                    <asp:Label ID="Label2" runat="server" Text="Tab2" CssClass="TabItemActive"></asp:Label>
                    <asp:LinkButton ID="LinkButton4" runat="server" CssClass="TabItemInactive" 
                        CommandName="Tab3Command" oncommand="LinkButton_Command">Tab3</asp:LinkButton>
                </asp:Panel>
                <asp:Panel ID="Panel4" runat="server" CssClass="ContentPanel">
                    Two
                </asp:Panel>
            </asp:View>
            <asp:View ID="View3" runat="server">
                <asp:Panel ID="Panel5" runat="server" CssClass="TabContainer">
                    <asp:LinkButton ID="LinkButton5" runat="server" CssClass="TabItemInactive" 
                        CommandName="Tab1Command" oncommand="LinkButton_Command">Tab1</asp:LinkButton>
                    <asp:LinkButton ID="LinkButton6" runat="server" CssClass="TabItemInactive" 
                        CommandName="Tab2Command" oncommand="LinkButton_Command">Tab2</asp:LinkButton>
                    <asp:Label ID="Label3" runat="server" Text="Tab3" CssClass="TabItemActive"></asp:Label>
                </asp:Panel>
                <asp:Panel ID="Panel6" runat="server" CssClass="ContentPanel">
                    Three
                </asp:Panel>
            </asp:View>
        </asp:MultiView>

后台相对简单：

protected void LinkButton_Command(object sender, CommandEventArgs e)
        {
            switch(e.CommandName)
            {
                case "Tab1Command":
                    this.MultiView1.SetActiveView(this.View1);
                    break;
                case "Tab2Command":
                    this.MultiView1.SetActiveView(this.View2);
                    break;
                case "Tab3Command":
                    this.MultiView1.SetActiveView(this.View3);
                    break;
            }
        }

 

相应的Css代码：

<style type="text/css">
        .TabContainer
        {
            font:bold 0.75em verdana;
            width:60em;
            margin-top:1.5em;
            padding-top:2em;
            }
        .TabItemInactive
        {
            border-top:1px solid white;
            border-left:1px solid white;
            border-right:1px solid #aaaaaa;
            border-bottom:none;
            background-color:#d3d3d3;
            text-align:center;
            text-decoration:none;
            padding:0.75em 0.25em 0 0.25em;
            }
        .TabItemInactive:hover
        {
            background:#808080;
            }
        .TabItemActive
        {
            border-top:1px solid white;
            border-left:none;
            border-right:1px solid #aaaaaa;
            border-bottom:none;
            background-color:#bbbbbb;
            text-align:center;
            text-decoration:none;
            padding:0.75em 0.25em 0 0.25em;
            }
       .ContentPanel
       {
           background-color:#bbbbbb;
           }

在前台代码中大家应该可以看出，在MultiView中的每个View中，其实都有一个完整的Tab组（Tab1，Tab2，Tab3），每个View中的被选中的Tab和内容的样式其实已经做了统一，在点击了某个Tab按钮时候转换到指定的View中，而本身这个View的已经具有了标签的样式。

这种方法的缺点就是代码有一定冗余。运行截图：

2.使用Menu+MultiView来实现Asp.net页面中的Tab样式。

还是先上例子：

<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" 
            BackColor="#666666" onmenuitemclick="Menu1_MenuItemClick">
            <Items>
                <asp:MenuItem Text="Tab1" Value="Tab1"></asp:MenuItem>
                <asp:MenuItem Text="Tab2" Value="Tab2"></asp:MenuItem>
                <asp:MenuItem Text="Tab3" Value="Tab3"></asp:MenuItem>
            </Items>
        </asp:Menu>
        <asp:MultiView ID="MultiView1" runat="server">
            <asp:View ID="View1" runat="server">
                <asp:Panel ID="Panel2" runat="server" CssClass="ContentPanel">
                    One
                </asp:Panel>
            </asp:View>
            <asp:View ID="View2" runat="server">
                <asp:Panel ID="Panel4" runat="server" CssClass="ContentPanel">
                    Two
                </asp:Panel>
            </asp:View>
            <asp:View ID="View3" runat="server">
                <asp:Panel ID="Panel6" runat="server" CssClass="ContentPanel">
                    Three
                </asp:Panel>
            </asp:View>
        </asp:MultiView>

是不是感觉代码精简了不少？

样式表的代码更少：

<style type="text/css">
       .ContentPanel
       {
           background-color:#bbbbbb;
           }
    </style>

这种方法的关键在后台，通过后台逻辑给选中的Menu施加样式，达到和内容统一的目的，让它看起来具有标签的样子：

protected void Menu1_MenuItemClick(object sender, MenuEventArgs e)
        {
            ((Menu)sender).StaticSelectedStyle.BackColor = Color.FromName("#bbbbbb");
            ((Menu)sender).StaticSelectedStyle.Font.Bold = true;
            ((Menu)sender).StaticSelectedStyle.ForeColor = Color.Red;
            switch (e.Item.Value)
            {
                case "Tab1":
                    this.MultiView1.SetActiveView(this.View1);
                    break;
                case "Tab2":
                    this.MultiView1.SetActiveView(this.View2);
                    break;
                case "Tab3":
                    this.MultiView1.SetActiveView(this.View3);
                    break;
            }
        }

这种方法的缺点是，至今我还不知道如何让PageLoad的时候让Tab1显示出被选中的样式。

呵呵，如果有高人看到这个问题别忘了告诉我啊！运行截图：

最后谢谢各位！

如有好的建议或意见可以回复评论，大家共同探讨。