JavaScript Editor Javascript validator     Javascripts

Main Page


Previous Section Next Section

5.9 Panel Control

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 properties not inherited from WebControl

Name

Type

Get

Set

Values

Description

BackImageUrl

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

HorizontalAlign

x

x

Center, Justify, Left, NotSet, Right

Specifies the horizontal alignment of the contents of all the cells in the row. Default is NotSet. Note there is no VerticalAlign property.

Wrap

Boolean

x

x

true, false

If true (the default), the contents of the cell wraps. If false, contents do not wrap.

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>&nbsp;</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.

    Previous Section Next Section


    JavaScript Editor Javascript validator     Javascripts 
    Bitcoin Dice Site



    ©