ASP.NET AjaxControlToolkit TabContainer 多標籤頁面快速建立教學

準備工作

1. NuGet 安裝：Install-Package AjaxControlToolkit
2. 專案參考自動新增 AjaxControlToolkit.dll

頁面引用與使用

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>

<ajax:TabContainer ID="tcMain" runat="server" ActiveTabIndex="0" Width="100%">
    <ajax:TabPanel ID="tp1" runat="server" HeaderText="基本資料">
        <ContentTemplate>
            <!-- 此處放入第一個標籤的內容控制項 -->
            <asp:TextBox ID="txtName" runat="server" />
        </ContentTemplate>
    </ajax:TabPanel>
    <ajax:TabPanel ID="tp2" runat="server" HeaderText="進階設定">
        <ContentTemplate>
            <!-- 第二個標籤內容 -->
            <asp:CheckBoxList ID="cblOptions" runat="server" />
        </ContentTemplate>
    </ajax:TabPanel>
    <ajax:TabPanel ID="tp3" runat="server" HeaderText="記錄歷史">
        <ContentTemplate>
            <asp:GridView ID="gvHistory" runat="server" />
        </ContentTemplate>
    </ajax:TabPanel>
</ajax:TabContainer>

後端動態操作

// 切換至指定標籤
tcMain.ActiveTabIndex = 1;  // 索引從 0 開始

// 動態新增標籤
var newTab = new TabPanel { HeaderText = "動態標籤" };
newTab.ContentTemplate = new DynamicTemplate(() => new Literal { Text = "動態內容" });
tcMain.Tabs.Add(newTab);

// 取得目前啟用標籤
var current = tcMain.ActiveTab;

樣式客製化

• 覆寫 CSS 類別：.ajax__tab_header、.ajax__tab_tab、.ajax__tab_active
• 設定 CssClass 屬性套用自訂主題

注意事項

• Toolkit 版本需與 .NET Framework 版本相容
• ToolkitScriptManager 必須放在頁面最上方（Master Page 或內容頁）
• UpdatePanel 內使用時需確保 ScriptManager 設定正確
• 行動裝置檢測：TabContainer 在小螢幕可能需搭配響應式 CSS 調整

TabContainer 讓複雜表單分頁呈現變得簡單，搭配 UpdatePanel 可實現無刷新切換，提升使用者體驗。