Javascript validator
Javascripts
|
|
5.9 Panel ControlThe 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
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>
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.  |
|
|
Javascript validator
Javascripts