asp.net.ph

Skip Navigation Links

Using the MultiPage with the TabStrip WebControl

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


The MultiPage control, when used in conjunction with a TabStrip 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.

To use a MultiPage with a TabStrip control

  1. Add the processing directives. See Adding MultiPage 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.
  3. <ie:tabstrip id="tabstrip1" runat="server" targetid="multipage1" ... >
    
       ... individual tabs markup goes here ...
    
    </ie:tabstrip>
  4. Add the Tab elements as child elements of the TabStrip.
  5. <ie:tabstrip id="tabstrip1" runat="server" targetid="multipage1" ... >
    
       <ie:tab text="Page 1" />
    
       <ie:tab text="Page 2" />
    
    </ie:tabstrip>
  6. 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 MultiPage with the TabStrip control, both of which are nested within a data control.

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

The TabStrip and MultiPage combo can even be further extended by nesting one TabStrip and MultiPage 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.

See Also

Nesting MultiPage Controls   Using MultiPage Controls in a Templated Control



© 2025 Reynald Nuñez and asp.net.ph. All rights reserved.

If you have any question, comment or suggestion
about this site, please send us a note