Home > Articles > Web Development > ASP.NET

  • Print
  • + Share This
This chapter is from the book

This chapter is from the book

3.9. Using the TabControl and PageView IE Web Controls

You want to implement a tabbed interface or a wizard-like form using the IE Web Controls TabControl and PageView.

Technique

The first step is to install the IE Web Controls from Microsoft.

The link to download and install these controls is as follows: http://msdn.microsoft.com/downloads/samples/internet/default.asp? url=/downloads/samples/internet/asp_dot_net_ servercontrols/webcontrols/default.asp

Next, you need to add a reference to the Web Controls on your page:

<%@ Register TagPrefix="ieControls" 
Namespace="Microsoft.Web.UI.WebControls" 
Assembly="Microsoft.Web.UI.WebControls" %> 
<%@ import namespace="Microsoft.Web.UI.WebControls" %>

Then you add your tabstrip. This is the control that generates the tabs that users click to change pages:

<IECONTROLS:TABSTRIP id="myTabStrip" runat="server" TargetID="myMultiPage" 
  Orientation="Vertical">
      <IECONTROLS:Tab Text="Tab 1"></IECONTROLS:Tab>
      <IECONTROLS:TabSeparator></IECONTROLS:TabSeparator>
      <IECONTROLS:Tab Text="Tab 2"></IECONTROLS:Tab>
      <IECONTROLS:TabSeparator DefaultStyle="height:100%;">
      </IECONTROLS:TabSeparator>
</IECONTROLS:TABSTRIP>

Lastly, you need to add your multipage control that contains the different pages that will be viewed when users select each tab:

<IECONTROLS:MULTIPAGE id="myMultiPage" runat="server">
 <IECONTROLS:PAGEVIEW>
        Page 1 
 </IECONTROLS:PAGEVIEW>
 <IECONTROLS:PAGEVIEW>
        Page 2
 </IECONTROLS:PAGEVIEW>
</IECONTROLS:MULTIPAGE>

Comments

Notice that there is a property on the tabstrip control called TargetID. This must be set to the ID of the multipage control that will be working with the tabstrip. When the users click on the tab, the tabstrip will then tell the PageView to show the corresponding page. When working with the multipage control, you can add any type of ASP.NET or HTML between the opening and closing PageView tags. In this example, the tabstrip is running vertically, but you can also set this value to horizontal. To do so, you simply need to set the Orientation property to horizontal.

Overview of MultiPage Control—http://msdn.microsoft.com/workshop/webcontrols/overview/multipage.asp

  • + Share This
  • 🔖 Save To Your Account