Welcome to another AJAX tutorial, today we will be demonstrating how to use the TabContainer extender and its many great uses. The TabContainer is an ASP.NET AJAX Control which creates a set of Tabs that can be used to organize page content. A TabContainer is a host for a number of TabPanel controls.

Each TabPanel defines its HeaderText or HeaderTemplate as well as a ContentTemplate that defines its content.

Here is a screen shot of what we will be building.

Here is a quick explanation of the TabsContainer Extender.

  • ActiveTabChanged (Event) – Fired on the server side when a tab is changed after a postback
  • OnClientActiveTabChanged – The name of a javascript function to attach to the client-side tabChanged event
  • CssClass – A css class override used to define a custom look and feel for the tabs. See the Tabs Theming section for more details.
  • ActiveTabIndex – The first tab to show
  • Height – sets the height of the body of the tabs (does not include the TabPanel headers)
  • Width – sets the width of the body of the tabs
  • ScrollBars – Whether to display scrollbars (None, Horizontal, Vertical, Both, Auto) in the body of the TabContainer
  • TabStripPlacement – Whether to render the tabs on top of the container or below (Top, Bottom)

Now Let’s begin building our TabsContainer WebForm.

  1. First things first add a new WebForm to this project and name it Tabs.aspx
  2. Don’t forget to a ToolScript Manager to our WebFrom.aspx
  3. Now let’s insert a TabContainer into our project.
  4. Now we are going to add 3 Tab Panels you can drag and drop these. For the purpose of this tutorial we are going name these Address, Email and Login Details.
  5. Let’s fill our Address tab with some TextBoxes and so insert a content template then insert a table into the content template.
  6. We also wrapped the content panel in an ASP update Panel. The Mark up is below
  7. Now here is our email tab panel. Fairly simple just like the address tab. The Mark up located below.
  8. Now we can build our last tab which we called Login Details. Same set up Just two textboxes for a username and password.
  9. Here are the TabPanel properties to set.

    TabPanel Properties

    • Enabled – Whether to display the Tab for the TabPanel by default. This can be changed on the client.
    • OnClientClick – The name of a javascript function to attach to the client-side click event of the tab.
    • HeaderText – The text to display in the Tab
    • HeaderTemplate – A TemplateInstance.Single ITemplate to use to render the header
    • ContentTemplate – A TemplateInstance.Single ITemplate to use to render the body

    Now lets run our project and see it in its full glory. Now theoretically you can add some form of functionality like having a submit button to then collect all the information and bind it to a database.

    Here’s what our project should look like.

    We have included the full source code to follow along and reference.

    Thank you for reading our AJAX Tutorial based on the TabsContainer Extender.

    Download Source Files