The MultiView control enables you to hide and display different areas of a page. This control is useful when you need to create a tabbed page. It is also useful when you need to divide a long form into multiple forms. The MultiView control contains one or more View controls. You use the MultiView control to select a particular View control to render. (The selected View control is the Active View.) The contents of the remaining View controls are hidden. You can render only one View control at a time. The MultiView control supports the following properties (this is not a complete list): The MultiView control also supports the following methods: Finally, the MultiView control supports the following event: The View control does not support any special properties or methods. Its primary purpose is to act as a container for other controls. However, the View control does support the following two events: Displaying a Tabbed Page View When you use the MultiView control in conjunction with the Menu control, you can create a tabbed page view. (To make it look pretty, you need to use some CSS.) For example, the page in Listing 4.17 contains a MultiView control with three View controls. The Menu control is used to switch between the View controls (see Figure 4.10). Figure 4.10. Displaying a tabbed page with the MultiView control. Listing 4.17. MultiViewTabs.aspx [View full width] <%@ Page Language="VB" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR /xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server"> Sub Menu1_MenuItemClick(ByVal sender As Object, ByVal e As MenuEventArgs) Dim index As Integer = Int32.Parse(e.Item.Value) MultiView1.ActiveViewIndex = index End Sub </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <style type="text/css"> html { background-color:silver; } .tabs { position:relative; top:1px; left:10px; } .tab { border:solid 1px black; background-color:#eeeeee; padding:2px 10px; } .selectedTab { background-color:white; border-bottom:solid 1px white; } .tabContents { border:solid 1px black; padding:10px; background-color:white; } </style> <title>MultiView Tabs</title> </head> <body> <form runat="server"> <div> <asp:Menu Orientation="Horizontal" StaticMenuItemStyle-Css StaticSelectedStyle-Css Css OnMenuItemClick="Menu1_MenuItemClick" Runat="server"> <Items> <asp:MenuItem Text="Tab 1" Value="0" Selected="true" /> <asp:MenuItem Text="Tab 2" Value="1" /> <asp:MenuItem Text="Tab 3" Value="2" /> </Items> </asp:Menu> <div > <asp:MultiView ActiveViewIndex="0" Runat="server"> <asp:View runat="server"> <br />This is the first view <br />This is the first view <br />This is the first view <br />This is the first view </asp:View> <asp:View runat="server"> <br />This is the second view <br />This is the second view <br />This is the second view <br />This is the second view </asp:View> <asp:View runat="server"> <br />This is the third view <br />This is the third view <br />This is the third view <br />This is the third view </asp:View> </asp:MultiView> </div> </div> </form> </body> </html> | In Listing 4.17, the Menu control is associated with a CSS class named tabs. This class relatively positions the Menu control down one pixel to merge the bottom border of the Menu control with the top border of the <div> tag that contains the MultiView. Because the selected tab has a white bottom border, the border between the selected tab and the tab contents disappears. Displaying a Multi-Part Form You can use the MultiView control to divide a large form into several sub-forms. You can associate particular commands with button controls contained in a MultiView. When the button is clicked, the MultiView changes the active view. The MultiView control recognizes the following commands: NextViewCauses the MultiView to activate the next View control. PrevViewCauses the MultiView to activate the previous View control. SwitchViewByIDCauses the MultiView to activate the view specified by the button control's CommandArgument. SwitchViewByIndexCauses the MultiView to activate the view specified by the button control's CommandArgument. You can use these commands with any of the button controlsButton, LinkButton, and ImageButtonby setting the button control's CommandName property and, in the case of the SwitchViewByID and SwitchViewByIndex, by setting the CommandArgument property. The page in Listing 4.18 illustrates how you can use the NextView command to create a multiple-part form. Listing 4.18. MultiViewForm.aspx [View full width] <%@ Page Language="VB" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR /xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server"> Sub View3_Activate(ByVal sender As Object, ByVal e As EventArgs) lblFirstNameResult.Text = txtFirstName.Text lblColorResult.Text = txtColor.Text End Sub </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>MultiView Form</title> </head> <body> <form runat="server"> <div> <asp:MultiView ActiveViewIndex="0" Runat="server"> <asp:View runat="server"> <h1>Step 1</h1> <asp:Label Text="Enter Your First Name:" AssociatedControl Runat="server" /> <br /> <asp:TextBox Runat="server" /> <br /><br /> <asp:Button Text="Next" CommandName="NextView" Runat="server" /> </asp:View> <asp:View runat="server"> <h1>Step 2</h1> <asp:Label Text="Enter Your Favorite Color:" AssociatedControl Runat="server" /> <br /> <asp:TextBox Runat="server" /> <br /><br /> <asp:Button Text="Next" CommandName="NextView" Runat="server" /> </asp:View> <asp:View runat="server" OnActivate="View3_Activate"> <h1>Summary</h1> Your First Name: <asp:Label Runat="server" /> <br /><br /> Your Favorite Color: <asp:Label Runat="server" /> </asp:View> </asp:MultiView> </div> </form> </body> </html> | The first two View controls in Listing 4.18 contain a Button control. These Button controls both have a CommandName property set to the value NextView. |