使用MultiView控件实现页签样式的两种最简单方法
目前使用Asp.net来实现页签功能，无一例外地都是靠Css通过样式来完成，甚至还使用到了JavaScript。
有最简单易行的方法吗？
以下两个方法都无需写令人头疼的JavaScript，我感觉已经最为简单，请各位参考：
1.使用Label，button，linkbutton等控件模拟标签。
废话不多说，上例子：
Front Code
1 <asp:MultiView ID="MultiView1" runat="server"> 2 <asp:View ID="View1" runat="server"> 3 <asp:Panel ID="Panel1" runat="server" CssClass="TabContainer"> 4 <asp:Label ID="Label1" runat="server" Text="Tab1" CssClass="TabItemActive"></asp:Label> 5 <asp:LinkButton ID="LinkButton1" runat="server" CssClass="TabItemInactive" 6 CommandName="Tab2Command" oncommand="LinkButton_Command">Tab2</asp:LinkButton> 7 <asp:LinkButton ID="LinkButton2" runat="server" CssClass="TabItemInactive" 8 CommandName="Tab3Command" oncommand="LinkButton_Command">Tab3</asp:LinkButton> 9 </asp:Panel> 10 <asp:Panel ID="Panel2" runat="server" CssClass="ContentPanel"> 11 One 12 </asp:Panel> 13 </asp:View> 14 <asp:View ID="View2" runat="server"> 15 <asp:Panel ID="Panel3" runat="server" CssClass="TabContainer"> 16 <asp:LinkButton ID="LinkButton3" runat="server" CssClass="TabItemInactive" 17 CommandName="Tab1Command" oncommand="LinkButton_Command">Tab1</asp:LinkButton> 18 <asp:Label ID="Label2" runat="server" Text="Tab2" CssClass="TabItemActive"></asp:Label> 19 <asp:LinkButton ID="LinkButton4" runat="server" CssClass="TabItemInactive" 20 CommandName="Tab3Command" oncommand="LinkButton_Command">Tab3</asp:LinkButton> 21 </asp:Panel> 22 <asp:Panel ID="Panel4" runat="server" CssClass="ContentPanel"> 23 Two 24 </asp:Panel> 25 </asp:View> 26 <asp:View ID="View3" runat="server"> 27 <asp:Panel ID="Panel5" runat="server" CssClass="TabContainer"> 28 <asp:LinkButton ID="LinkButton5" runat="server" CssClass="TabItemInactive" 29 CommandName="Tab1Command" oncommand="LinkButton_Command">Tab1</asp:LinkButton> 30 <asp:LinkButton ID="LinkButton6" runat="server" CssClass="TabItemInactive" 31 CommandName="Tab2Command" oncommand="LinkButton_Command">Tab2</asp:LinkButton> 32 <asp:Label ID="Label3" runat="server" Text="Tab3" CssClass="TabItemActive"></asp:Label> 33 </asp:Panel> 34 <asp:Panel ID="Panel6" runat="server" CssClass="ContentPanel"> 35 Three 36 </asp:Panel> 37 </asp:View> 38 </asp:MultiView>
后台相对简单：
Back Code
1 protected void LinkButton_Command(object sender, CommandEventArgs e) 2 { 3 switch(e.CommandName) 4 { 5 case "Tab1Command": 6 this.MultiView1.SetActiveView(this.View1); 7 break; 8 case "Tab2Command": 9 this.MultiView1.SetActiveView(this.View2); 10 break; 11 case "Tab3Command": 12 this.MultiView1.SetActiveView(this.View3); 13 break; 14 } 15 }
相应的Css代码：
Css Code
1 <style type="text/css"> 2 .TabContainer 3 { 4 font:bold 0.75em verdana; 5 width:60em; 6 margin-top:1.5em; 7 padding-top:2em; 8 } 9 .TabItemInactive 10 { 11 border-top:1px solid white; 12 border-left:1px solid white; 13 border-right:1px solid #aaaaaa; 14 border-bottom:none; 15 background-color:#d3d3d3; 16 text-align:center; 17 text-decoration:none; 18 padding:0.75em 0.25em 0 0.25em; 19 } 20 .TabItemInactive:hover 21 { 22 background:#808080; 23 } 24 .TabItemActive 25 { 26 border-top:1px solid white; 27 border-left:none; 28 border-right:1px solid #aaaaaa; 29 border-bottom:none; 30 background-color:#bbbbbb; 31 text-align:center; 32 text-decoration:none; 33 padding:0.75em 0.25em 0 0.25em; 34 } 35 .ContentPanel 36 { 37 background-color:#bbbbbb; 38 }
在前台代码中大家应该可以看出，在MultiView中的每个View中，其实都有一个完整的Tab组（Tab1，Tab2，Tab3），每个View中的被选中的Tab和内容的样式其实已经做了统一，在点击了某个Tab按钮时候转换到指定的View中，而本身这个View的已经具有了标签的样式。
这种方法的缺点就是代码有一定冗余。运行截图：
2.使用Menu+MultiView来实现Asp.net页面中的Tab样式。
还是先上例子：
View Code
1 <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" 2 BackColor="#666666" onmenuitemclick="Menu1_MenuItemClick"> 3 <Items> 4 <asp:MenuItem Text="Tab1" Value="Tab1"></asp:MenuItem> 5 <asp:MenuItem Text="Tab2" Value="Tab2"></asp:MenuItem> 6 <asp:MenuItem Text="Tab3" Value="Tab3"></asp:MenuItem> 7 </Items> 8 </asp:Menu> 9 <asp:MultiView ID="MultiView1" runat="server"> 10 <asp:View ID="View1" runat="server"> 11 <asp:Panel ID="Panel2" runat="server" CssClass="ContentPanel"> 12 One 13 </asp:Panel> 14 </asp:View> 15 <asp:View ID="View2" runat="server"> 16 <asp:Panel ID="Panel4" runat="server" CssClass="ContentPanel"> 17 Two 18 </asp:Panel> 19 </asp:View> 20 <asp:View ID="View3" runat="server"> 21 <asp:Panel ID="Panel6" runat="server" CssClass="ContentPanel"> 22 Three 23 </asp:Panel> 24 </asp:View> 25 </asp:MultiView>
是不是感觉代码精简了不少？
样式表的代码更少：
Css Code
1 <style type="text/css"> 2 .ContentPanel 3 { 4 background-color:#bbbbbb; 5 } 6 </style>
这种方法的关键在后台，通过后台逻辑给选中的Menu施加样式，达到和内容统一的目的，让它看起来具有标签的样子：
Back Code
1 protected void Menu1_MenuItemClick(object sender, MenuEventArgs e) 2 { 3 ((Menu)sender).StaticSelectedStyle.BackColor = Color.FromName("#bbbbbb"); 4 ((Menu)sender).StaticSelectedStyle.Font.Bold = true; 5 ((Menu)sender).StaticSelectedStyle.ForeColor = Color.Red; 6 switch (e.Item.Value) 7 { 8 case "Tab1": 9 this.MultiView1.SetActiveView(this.View1); 10 break; 11 case "Tab2": 12 this.MultiView1.SetActiveView(this.View2); 13 break; 14 case "Tab3": 15 this.MultiView1.SetActiveView(this.View3); 16 break; 17 } 18 }
这种方法的缺点是，至今我还不知道如何让PageLoad的时候让Tab1显示出被选中的样式。
呵呵，如果有高人看到这个问题别忘了告诉我啊！运行截图：
最后谢谢各位！
如有好的建议或意见可以回复评论，大家共同探讨。
