5.9 Panel Control
| The Panel control is used as a container for other controls. It serves several functions:
The Panel control is derived from WebControl and adds the properties shown in Table 5-15.
Example 5-31 demonstrates how to control the appearance and visibility of child controls and add controls programmatically using C#. Example 5-32 shows the script block of the same program in VB.NET. The HTML section of the code is the same for both the VB.NET and C# versions; consequently, the HTML is shown only in the C# version. Example 5-31. Panel control using C#, csASPPanel.aspx<%@ Page Language="C#" %> <script runat="server"> void Page_Load(Object sender, EventArgs e) { // Show/Hide Panel Contents if (chkHide.Checked) { pnl.Visible=false; } else { pnl.Visible=true; } // Generate label controls int numlabels = Int32.Parse(ddlLabels.SelectedItem.Value); for (int i=1; i<=numlabels; i++) { Label lbl = new Label( ); lbl.Text = "Label" + (i).ToString( ); lbl.ID = "Label" + (i).ToString( ); pnl.Controls.Add(lbl); pnl.Controls.Add(new LiteralControl("<br>")); } // Generate textbox controls int numBoxes = Int32.Parse(ddlBoxes.SelectedItem.Value); for (int i=1; i<=numBoxes; i++) { TextBox txt = new TextBox( ); txt.Text = "TextBox" + (i).ToString( ); txt.ID = "TextBox" + (i).ToString( ); pnl.Controls.Add(txt); pnl.Controls.Add(new LiteralControl("<br>")); } } </script> <html> <body> <form runat=server> <h1>ASP Controls</h1> <h2>Panel Control</h2> <asp:Panel BackColor="DeepPink" Height="250px" Width="80%" Font-Name="Impact" HorizontalAlign="Center" runat="server" > This is static content in the Panel. <p/> </asp:Panel> <table> <tr> <td> Number of Labels: </td> <td> <asp:DropDownList id=ddlLabels runat="server"> <asp:ListItem text="0" value="0" /> <asp:ListItem text="1" value="1" /> <asp:ListItem text="2" value="2" /> <asp:ListItem text="3" value="3" /> <asp:ListItem text="4" value="4" /> </asp:DropDownList> </td> </tr> <tr> <td> Number of TextBoxes: </td> <td> <asp:DropDownList id=ddlBoxes runat="server"> <asp:ListItem text="0" value="0" /> <asp:ListItem text="1" value="1" /> <asp:ListItem text="2" value="2" /> <asp:ListItem text="3" value="3" /> <asp:ListItem text="4" value="4" /> </asp:DropDownList> </td> </tr> <tr> <td colspan=2> </td> </tr> <tr> <td> <asp:CheckBox text="Hide Panel" runat="server"/> </td> <td> <asp:Button text="Refresh Panel" runat="server"/> </td> </tr> </table> </form> </body> </html> This sample is very straightforward. Skipping over the script block at the beginning for the moment, look just past the start of the HTML form, where an ASP Panel control is defined: <asp:Panel BackColor="DeepPink" Height="250px" Width="80%" Font-Name="Impact" HorizontalAlign="Center" runat="server" > This is static content in the Panel. <p/> </asp:Panel> To access the Panel control programmatically, like all ASP controls, it has the id and runat attributes set. You also define several attributes for the Panel, including BackColor, Height (in pixels), Width (in percentage of the browser window), the font name (Font-Name), and the horizontal alignment (HorizontalAlign). Note that this control does not have a property for vertical alignment. The only acceptable value for the Height attribute is an integer representing the number of pixels. The px as part of the value is optional, but does serve to self-document. For example, the following two lines are equivalent: Height="250px" Height="250" The Height attribute does not cause a browser or compiler error if a percentage sign (%) is used, but the Height attribute is ignored in that case. If the Height attribute is either ignored or missing, then the Panel control automatically sizes itself vertically to contain all of its children controls. The Width attribute can be either an integer number of pixels or a percentage of the browser window. The latter is shown in this example. If the Width attribute is missing, then the Panel control will default to a width of 100%. The Panel control in the example also contains static text and HTML before the closing tag. A static HTML table is defined in the example to lay out the controls that will control the contents and visibility of the panel. This table contains two DropDownList controls, a CheckBox control, and a Button control. Note that none of these controls has its AutoPostBack property set. Therefore, in order to see any of the changes take effect, you need to click the button, which posts the form. When the form is posted, the Page_Load method is run. In C# (reproduced here from Example 5-31), this code is: void Page_Load(Object sender, EventArgs e) { // Show/Hide Panel Contents if (chkHide.Checked) { pnl.Visible=false; } else { pnl.Visible=true; } // Generate label controls int numlabels = Int32.Parse(ddlLabels.SelectedItem.Value); for (int i=1; i<=numlabels; i++) { Label lbl = new Label( ); lbl.Text = "Label" + (i).ToString( ); lbl.ID = "Label" + (i).ToString( ); pnl.Controls.Add(lbl); pnl.Controls.Add(new LiteralControl("<br>")); } // Generate textbox controls int numBoxes = Int32.Parse(ddlBoxes.SelectedItem.Value); for (int i=1; i<=numBoxes; i++) { TextBox txt = new TextBox( ); txt.Text = "TextBox" + (i).ToString( ); txt.ID = "TextBox" + (i).ToString( ); pnl.Controls.Add(txt); pnl.Controls.Add(new LiteralControl("<br>")); } } Example 5-32 shows the code in VB.NET. Example 5-32. Panel control script block using VB.NET, vbASPPanel.aspx<%@ Page Language="VB" %> <script runat="server"> sub Page_Load(ByVal Sender as Object, _ ByVal e as EventArgs) ' Show/Hide Panel Contents if chkHide.Checked then pnl.Visible=false else pnl.Visible=true end if ' Generate label controls dim numlabels as integer = Int32.Parse(ddlLabels.SelectedItem.Value) dim i as integer for i=1 to numlabels dim lbl as Label = new Label( ) lbl.Text = "Label" & (i).ToString( ) lbl.ID = "Label" & (i).ToString( ) pnl.Controls.Add(lbl) pnl.Controls.Add(new LiteralControl("<br>")) next ' Generate textbox controls dim numBoxes as integer = Int32.Parse(ddlBoxes.SelectedItem.Value) for i=1 to numBoxes dim txt as TextBox = new TextBox( ) txt.Text = "TextBox" & (i).ToString( ) txt.ID = "TextBox" & (i).ToString( ) pnl.Controls.Add(txt) pnl.Controls.Add(new LiteralControl("<br>")) next end sub </script> First an if-else statement turns on or off the visibility of the panel. Note that when the panel is not visible, its contents are not visible either. Likewise, when the panel is visible, all of its contents are visible. The two for loops, one each for labels and text boxes, generate the contained controls. After converting the entry in the appropriate DropDownList control to an integer, the for loop iterates through the procedure the specified number of times. The procedure is very similar in each of the two cases. A new control is instantiated, then the Text and ID properties assigned. The control is added to the Controls collection of the panel, and finally a LiteralControl containing some HTML is added to the collection as well. The results are shown in Figure 5-17. Note that the font name specified inside the Panel tags affected the static text and labels in the panel, but not the contents of the text boxes. |
EAN: 2147483647
Pages: 156