- Introduction
- Declaring a Simple Custom Control
- Extending Existing Web Controls
- Creating ViewState-Enabled Control Properties
- Creating a Composite Control
- Creating a Data-bound Control
- Creating a Templated Control
- Dynamically Adding Controls to a Web Form
- Using the Treeview IE Web Control
- Using the TabControl and PageView IE Web Controls
- Using the ToolBar IE Web Control
- Data-binding a TreeView Control
- Installing a Component in the Global Assembly Cache (GAC)
This chapter is from the book
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.
See Also
Overview of TabStrip Control—http://msdn.microsoft.com/workshop/webcontrols/overview/tabstrip.asp
Overview of MultiPage Control—http://msdn.microsoft.com/workshop/webcontrols/overview/multipage.asp