TabContainer Component

The TabContainer displays content in a tabbed interface. Each TabPanel child defines a tab with a header and content area. This emulates the Ajax Control Toolkit TabContainer / TabPanel controls.

1. Basic Tabs

A simple tab container with three tabs using HeaderText for tab labels.

HomeProductsContact

Welcome to the Home tab. This is the default active tab.

<TabContainer ActiveTabIndex="0">
    <TabPanel HeaderText="Home">
        <ContentTemplate><p>Home content.</p></ContentTemplate>
    </TabPanel>
    <TabPanel HeaderText="Products">
        <ContentTemplate><p>Products list.</p></ContentTemplate>
    </TabPanel>
</TabContainer>

2. Styled Tabs

Apply CssClass to the container for custom tab styling.

📄 Documents📷 Photos🎵 Music

Your documents are listed here.

<TabContainer ActiveTabIndex="0" CssClass="styled-tabs">
    <TabPanel HeaderText="Documents">
        <ContentTemplate><p>Content.</p></ContentTemplate>
    </TabPanel>
</TabContainer>

3. Disabled Tab

Set Enabled="false" on a TabPanel to disable it. The tab header appears but cannot be selected.

Active TabDisabled TabAnother Active Tab

This tab is active and selectable.

<TabPanel HeaderText="Disabled Tab" Enabled="false">
    <ContentTemplate><p>Cannot reach this.</p></ContentTemplate>
</TabPanel>

4. OnActiveTabChanged Event

Use OnActiveTabChanged to respond when the user switches tabs.

Tab ATab BTab C

Content of Tab A.

<TabContainer ActiveTabIndex="@activeTab" OnActiveTabChanged="OnTabChanged">
    <TabPanel HeaderText="Tab A">...</TabPanel>
    <TabPanel HeaderText="Tab B">...</TabPanel>
</TabContainer>

@code {
    private int activeTab = 0;
    private void OnTabChanged(int index) { activeTab = index; }
}

5. HeaderTemplate

Use HeaderTemplate instead of HeaderText for rich tab headers with custom markup.

✅ Approved⏳ Pending❌ Rejected

Items that have been approved.

<TabPanel>
    <HeaderTemplate><span style="color: green;">✅ Approved</span></HeaderTemplate>
    <ContentTemplate><p>Approved items.</p></ContentTemplate>
</TabPanel>

6. ScrollBars

Set ScrollBars on the container to add scrolling behavior to tab content areas.

Scrollable ContentShort Content

Line 1 of scrollable content.

Line 2 of scrollable content.

Line 3 of scrollable content.

Line 4 of scrollable content.

Line 5 of scrollable content.

Line 6 of scrollable content.

Line 7 of scrollable content.

Line 8 of scrollable content.

Line 9 of scrollable content.

Line 10 of scrollable content.

Line 11 of scrollable content.

Line 12 of scrollable content.

Line 13 of scrollable content.

Line 14 of scrollable content.

Line 15 of scrollable content.

Line 16 of scrollable content.

Line 17 of scrollable content.

Line 18 of scrollable content.

Line 19 of scrollable content.

Line 20 of scrollable content.

<TabContainer ActiveTabIndex="0" ScrollBars="ScrollBars.Vertical">
    <TabPanel HeaderText="Scrollable">
        <ContentTemplate>...long content...</ContentTemplate>
    </TabPanel>
</TabContainer>

Migration Guide: Ajax Control Toolkit to Blazor

Ajax Control Toolkit (Before)

<asp:ScriptManager ID="ScriptManager1" runat="server" />
<ajaxToolkit:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0">
    <ajaxToolkit:TabPanel ID="TabPanel1" runat="server" HeaderText="Tab 1">
        <ContentTemplate>Content 1</ContentTemplate>
    </ajaxToolkit:TabPanel>
    <ajaxToolkit:TabPanel ID="TabPanel2" runat="server" HeaderText="Tab 2">
        <ContentTemplate>Content 2</ContentTemplate>
    </ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>

Blazor with BWFC (After)

<TabContainer ActiveTabIndex="0">
    <TabPanel HeaderText="Tab 1">
        <ContentTemplate>Content 1</ContentTemplate>
    </TabPanel>
    <TabPanel HeaderText="Tab 2">
        <ContentTemplate>Content 2</ContentTemplate>
    </TabPanel>
</TabContainer>

Migration Steps

  1. Remove asp:ScriptManager
  2. Replace <ajaxToolkit:TabContainer> with <TabContainer>
  3. Replace <ajaxToolkit:TabPanel> with <TabPanel>
  4. Remove runat="server" and ID attributes
  5. Keep HeaderText, ContentTemplate, ActiveTabIndex, and Enabled properties unchanged
  6. Ensure the page uses @rendermode InteractiveServer