Displaying Different Page Views


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):

  • ActiveViewIndexEnables you to select the View control to render by index.

  • ViewsEnables you to retrieve the collection of View controls contained in the MultiView control

The MultiView control also supports the following methods:

  • GetActiveViewEnables you to retrieve the selected View control.

  • SetActiveViewEnables you to select the active view.

Finally, the MultiView control supports the following event:

  • ActiveViewChangedRaised when a new View control is selected.

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:

  • ActivateRaised when the view becomes the selected view in the MultiView control.

  • DeactivateRaised when another view becomes the selected view in the MultiView control.

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.




ASP. NET 2.0 Unleashed
ASP.NET 2.0 Unleashed
ISBN: 0672328232
EAN: 2147483647
Year: 2006
Pages: 276

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net