The Panel control is used as a container for other controls. It serves several functions:
To control the visibility of the controls it contains
To control the appearance of the controls it contains
To make it easier to generate controls programmatically
The Panel control is derived from WebControl and adds the properties shown in Table 5-15.
Table 5-15. Properties of the Panel control not inherited from WebControl
|
Name |
Type |
Get |
Set |
Values |
Description |
|---|---|---|---|---|---|
|
String |
x |
x |
The URL of an image to display behind the table. If the image is smaller than the table, it is tiled. | ||
|
HorizontalAlign |
x |
x |
|
Specifies the horizontal alignment of the contents of all the cells
in the row. Default is Note there is no VerticalAlign property. | |
|
Boolean |
x |
x |
|
If |
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
id="pnl"
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
id="chkHide"
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
id="pnl"
BackColor="DeepPink"
Height="250px"
Width="80%"
Font-Name="Impact"
HorizontalAlign="Center"
runat="server" >
This is static content in the Panel.
<p/>
</asp:Panel>In order 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.