在asp.net網頁中實現tabPage功能（上）
我是個.net新手，所以我寫的東西在好些高手們看來似乎比較粗淺，還請大家海涵！並希望大家多多指導、多提意見，我會十分感激的，謝謝！
前幾天在做一個專案時，專案經理非要讓我在asp.net網頁中實現類似Windows Form程式中類似TabControl(TabPage)那樣的功能，但大家都知道，asp.net中是不提供這種控制元件的，那如何實現呢？
第一種方法是用Menu控制元件+MultiView控制元件實現：
第一步是在網頁中拖入一個Menu控制元件，編輯一下專案，並設定一下它的屬性通常要把Orientation屬性設為Horizontal，每加入一個Item，建議把它的Value設為一個數字，比如1，2，3……，這樣方便我們後面的程式設計：
第二步是在網頁中拖入一個MultiView控制元件（注意它的css定位屬性一定要是相對定位，relative!），它實際上是View控制元件的容器：
第三步是往MultiView控制元件裡面拖入若干個View控制元件，每個View控制元件都相當於一個頁面，我們可以像編輯普通頁面那樣編輯每一個View：
至此，網頁的原型已經做好了，它的原始碼如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>tabPage</title></head><body> <form id="form1" runat="server"> <div> <asp:Menu ID="Menu1" runat="server" BackColor="#E3EAEB" DynamicHorizontalOffset="2" Font-Names StaticSubMenuIndent="10px" Style="position: relative" Width="801px" OnMenuItemClick="Menu1_MenuItemClick"> <StaticSelectedStyle BackColor="#1C5E55"/> <StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px"/> <DynamicHoverStyle BackColor="#666666" ForeColor="White"/> <DynamicMenuStyle BackColor="#E3EAEB"/> <DynamicSelectedStyle BackColor="#1C5E55"/> <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px"/> <StaticHoverStyle BackColor="#666666" ForeColor="White"/> <Items> <asp:MenuItem Text="Page 1" Value="1"></asp:MenuItem> <asp:MenuItem Text="Page 2" Value="2"></asp:MenuItem> <asp:MenuItem Text="Page 3" Value="3"></asp:MenuItem> <asp:MenuItem Text="Page N" Value="4"></asp:MenuItem> </Items> </asp:Menu> </div> <asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0"> <asp:View ID="View1" runat="server"> 這是第 1 頁</asp:View> <asp:View ID="View2" runat="server"> 這是第 2 頁</asp:View> <asp:View ID="View3" runat="server"> 這是第 3 頁</asp:View> <asp:View ID="View4" runat="server"> 這是第 N 頁</asp:View> </asp:MultiView> </form></body></html>
接下來需要加入控制頁面跳轉的程式碼，首先我們預設網頁第一次開啟時，Menu的第一項就自動選中，所以要把MultiView1控制元件的ActiveViewIndex屬性設為0，並且把它第一個Item的Selected屬性設為true。
此外，雙擊Menu1控制元件，新增MenuItemClick事件的程式碼如下：
protectedvoid Menu1_MenuItemClick(object sender, MenuEventArgs e) {
switch (Menu1.SelectedValue)
{
case"1"://這個值是在Menu中加入Item時設定的{ MultiView1.ActiveViewIndex =0; break;
} case"2": { MultiView1.ActiveViewIndex =1; break; } case"3": { MultiView1.ActiveViewIndex =2; break; } case"4": { MultiView1.ActiveViewIndex =3; break; } default: break; }
}
至此，利用Menu+MultiView實現tabPage功能已經做好了，大家看看它的執行效果：
點選Page N：
從功能的角度來講，tabPage的功能已經實現了。在下篇中，將介紹如何用其它控制元件實現tabPage，歡迎關注！