Web版的Tabcontrol控件的製作過程

先看運行後的結果吧：

1.選擇登錄記錄

2.選擇第二個選項卡

主要涉及的控件有：MultiView和一個Menu控件

主要代碼：

前臺：

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="TabControl.ascx.cs" Inherits="Tabcontrol.UserControl.TabControl" %>
<p>
   <asp:Menu
        ID="Menu1"
        Width="220px"
        runat="server"
        Orientation="Horizontal"
        StaticEnableDefaultPopOutImage="False"
        OnMenuItemClick="Menu1_MenuItemClick" BackColor="#E3EAEB"
    BorderStyle="Groove" BorderWidth="1px" DynamicHorizontalOffset="2"
    Font-Bold="False" Font-Names="Verdana" Font-Size="1em" Font-Underline="True"
    ForeColor="#666666" Height="24px" IncludeStyleBlock="False" PathSeparator="\"
    RenderingMode="Table" StaticSubMenuIndent="10px" >
       <DynamicHoverStyle BackColor="#666666" ForeColor="White" />
       <DynamicMenuItemStyle BorderStyle="Double" BorderWidth="1px"
           HorizontalPadding="5px" VerticalPadding="2px" />
       <DynamicMenuStyle BackColor="#E3EAEB" />
       <DynamicSelectedStyle BackColor="#1C5E55" />
       <DynamicItemTemplate>
           <%# Eval("Text") %>
       </DynamicItemTemplate>
    <Items>
        <asp:MenuItem
                      Text="   登錄記錄" Value="0" PopOutImageUrl="~/p_w_picpath/sb_more.png"
            Selected="True"   ></asp:MenuItem>
        <asp:MenuItem
                      Text="   用戶信息" Value="1"
            PopOutImageUrl="~/p_w_picpath/templatemo_more.png"></asp:MenuItem>
        <asp:MenuItem ImageUrl=" "
                      Text="   角色信息" Value="2"
            PopOutImageUrl="~/p_w_picpath/templatemo_more.png"></asp:MenuItem>
    </Items>
       <StaticHoverStyle BackColor="#666666" ForeColor="White" />
       <StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
       <StaticSelectedStyle BackColor="#666666" BorderStyle="Double"
           ForeColor="#CCFFCC" />
</asp:Menu>
<asp:MultiView
    ID="MultiView1"
    runat="server"
    ActiveViewIndex="0"  >
   <asp:View ID="Tab1" runat="server"  >
        <table width="600" height="400" cellpadding=0 cellspacing=0>
            <tr valign="top">
                <td class="TabArea" style="width: 600px">
                    <br />
                    <br />
                    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
                        AutoGenerateSelectButton="True" DataSourceID="SqlDataSource1">
                        <Columns>
                            <asp:BoundField DataField="no" HeaderText="no" InsertVisible="False"
                                ReadOnly="True" SortExpression="no" />
                            <asp:BoundField DataField="id" HeaderText="id" ReadOnly="True"
                                SortExpression="id" />
                            <asp:BoundField DataField="operator" HeaderText="operator"
                                SortExpression="operator" />
                            <asp:BoundField DataField="user_id" HeaderText="user_id"
                                SortExpression="user_id" />
                            <asp:BoundField DataField="last_login_time" HeaderText="last_login_time"
                                SortExpression="last_login_time" />
                            <asp:BoundField DataField="last_login_host_ip" HeaderText="last_login_host_ip"
                                SortExpression="last_login_host_ip" />
                            <asp:BoundField DataField="record_state" HeaderText="record_state"
                                SortExpression="record_state" />
                        </Columns>
                    </asp:GridView>
                    <asp:SqlDataSource ID="SqlDataSource1" runat="server"
                        ConnectionString="<%$ ConnectionStrings:QCS_DBConnectionString %>"
                        SelectCommand="SELECT * FROM [tb_log_user_login_system_operator]">
                    </asp:SqlDataSource>
                </td>
            </tr>
        </table>
     </asp:View>
    <asp:View ID="Tab2" runat="server">
        <table width="600px" height="400px" cellpadding=0 cellspacing=0>
            <tr valign="top">
                <td class="TabArea" style="width: 600px">
                <br />
                <br />
                    TAB VIEW 2
                    INSERT YOUR CONENT IN HERE
                    CHANGE SELECTED IMAGE URL AS NECESSARY
                </td>
            </tr>
        </table>
    </asp:View>
    <asp:View ID="Tab3" runat="server">
        <table width="600px" height="400px" cellpadding=0 cellspacing=0>
            <tr valign="top">
                <td class="TabArea" style="width: 600px">
                <br />
                <br />
                  TAB VIEW 3
                  INSERT YOUR CONENT IN HERE
                  CHANGE SELECTED IMAGE URL AS NECESSARY
                </td>
            </tr>
        </table>
    </asp:View>
</asp:MultiView>
</p>

後臺的Menu1_MenuItemClick( object sender, MenuEventArgs e )的事件：

 

protected void Menu1_MenuItemClick( object sender, MenuEventArgs e )
        {
            MultiView1.ActiveViewIndex=Int32.Parse(e.Item.Value);
            for (int i=0; i<Menu1.Items.Count; i++)
            {
                if (i==Int32.Parse(e.Item.Value))
                {
                    Menu1.Items[i].PopOutImageUrl="~/p_w_picpath/sb_more.png";
                }
                else
                {
                    Menu1.Items[i].PopOutImageUrl="~/p_w_picpath/templatemo_more.png";
                }
            }
        }

然後運行就可以看到剛開始的結果了，謝謝參考！