Controls You Can Use on Web Forms   ASP.NET IE WebControls   TabStrip WebControl

---

The TabStrip control, when used in conjunction with a MultiPage control, provides a very powerful and effective solution for organizing and presenting subsets of information without the need for complex coding.

The TabStrip class includes a TargetID attribute that, when set to the ID of the MultiPage control, enables automatic linking of Tab elements to the PageView elements of the associated MultiPage control.

The first Tab links to the first PageView; the second Tab to the second PageView, and so on. If there are more Tabs than PageViews, the Tabs with no corresponding PageViews can be activated, but the MultiPage will not change the selected PageView.

Let us briefly explore how that is done.

1. Add the processing directives. See Adding TabStrip Controls to a Web Forms Page.
2. Declare the <ie:tabstrip> element and optionally set the control’s base properties. Ensure that the value of the control’s TargetID property is set to the ID of the associated MultiPage control.

<ie:tabstrip id="tabstrip1" runat="server" targetid="multipage1" ... >

   ... individual tabs markup goes here ...

</ie:tabstrip>

3. Add the Tab elements as child elements of the TabStrip.

<ie:tabstrip id="tabstrip1" runat="server" targetid="multipage1" ... >

   <ie:tab text="Page 1" />

   <ie:tab text="Page 2" />

</ie:tabstrip>

4. Next, declare the MultiPage element and add PageView elements as child elements of the MultiPage in the same order as the Tab elements in the TabStrip. Ensure that the ID of the MultiPage corresponds to the value set for the TargetID of the TabStrip.

   <ie:multipage id="multipage1" runat="server">
   
      <ie:pageview id="page1">
   
         ... page1 content goes here ...
   
      </ie:pageview>
   
      <ie:pageview id="page2">
   
         ... page2 content goes here ...
   
      </ie:pageview>
   
   </ie:multipage>

The below examples show using a TabStrip with the MultiPage control, both of which are nested within a data control.

Using the TabStrip with the MultiPage Control Run Sample | View Source

Using the MultiPage with the TabStrip Control Run Sample | View Source

The MultiPage and TabStrip combo can even be further extended by nesting one MultiPage and TabStrip combo within another. To see this in action, view our sample Destination Guides application, and click on either the Divisions or Tourism tabs, each of which nests another set of tabs.

Adding TabStrip Controls to a Web Forms Page   Customizing the TabStrip Control User Interface