Using the Panel Control
Using the Panel ControlThe Panel control enables you to work with a group of ASP.NET controls. For example, you can use a Panel control to hide or show a group of ASP.NET controls. The page in Listing 2.29 contains a list of RadioButton controls which can be used to select your favorite programming language. The last RadioButton is labeled Other. If you select the Other radio button, the contents of a Panel control are revealed (see Figure 2.18). Figure 2.18. Hiding and displaying controls with the Panel control. Listing 2.29. ShowPanel.aspx
Notice that the Panel control is declared with a Visible property that has the value False. Because the Visible property is set to the value False, the Panel control and any controls contained in the Panel control are not rendered when the page is requested. If you select the RadioButton control labeled Other, then the Visible property is set to the value true and the contents of the Panel control are displayed. Note Every control in the ASP.NET framework supports the Visible property. When Visible is set to the value False, the control does not render its contents. The Panel control supports the following properties (this is not a complete list):
By default, a Panel control renders a <div> tag around its contents. If you set the GroupingText property, however, the Panel control renders a <fieldset> tag. The value that you assign to the GroupingText property appears in the <fieldset> tag's <legend> tag. Listing 2.30 demonstrates how you can use the GroupingText property (see Figure 2.19). Figure 2.19. Setting the GroupingText property. Listing 2.30. PanelGroupingText.aspx
Web Standards Note According to the accessibility guidelines, you should use <fieldset> tags when grouping related form fields in long forms. The ScrollBars property enables you to display scrollbars around a panel's contents. For example, the page in Listing 2.31 contains a Panel control that contains a BulletedList control that displays 100 items. The panel is configured to scroll when its contents overflow its width or height (see Figure 2.20). Figure 2.20. Displaying scrollbars with a Panel control. Listing 2.31. PanelScrollBars.aspx
Web Standards Note Don't use the values Horizontal or Vertical with the ScrollBars property when you want the scrollbars to appear in browsers other than Microsoft Internet Explorer. If you want the scrollbars to appear in FireFox and Opera, use either the value Auto or Both. When enabling scrollbars with the Panel control, you must specify a particular width and height to display the scrollbars. In Listing 2.31, the width and height are specified in a Cascading Style Sheet class. Alternatively, you can specify the width and height with the Panel control's Width and Height properties. |
/xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server"> Sub btnSubmit_Click(ByVal sender As Object, ByVal e As EventArgs) If rdlOther.Checked Then pnlOther.Visible = True Else pnlOther.Visible = False End If End Sub </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Show Panel</title> </head> <body> <form runat="server"> <div> Select your favorite programming language: <br /><br /> <asp:RadioButton GroupName="language" Text="Visual Basic" Runat="server" /> <br /><br /> <asp:RadioButton GroupName="language" Text="C#" Runat="server" /> <br /><br /> <asp:RadioButton GroupName="language" Text="Other Language" Runat="server" /> <br /> <asp:Panel Visible="false" Runat="server"> <asp:Label Text="Other Language:" AssociatedControl Runat="server" /> <asp:TextBox Runat="server" /> </asp:Panel> <br /><br /> <asp:Button Text="Submit" OnClick="btnSubmit_Click" Runat="server" /> </div> </form> </body> </html> 