<asp:Panel id="id" Runat="Server"
  BackImageUrl="url"
  HorizontalAlign="Center|Justify|Left|NotSet|Right"
  ScrollBars="Auto|Horizontal|Vertical|Both|None"
  Wrap="False|True"
    property="value"...
>

  ...XHTML, text, and server controls
		
</asp:Panel>

<asp:Panel Runat="Server"
  Font-Name="Times New Roman"
  Font-Size="11pt"
  Width="300px"
  Height="100px"
  BorderStyle="Solid"
  BorderWidth="1px"
  ScrollBars="Auto"
  Style="padding:10px">

  <h3 style="text-align:center">Panel Control</h3>

  <p>A Panel control encloses text, XHTML, and other server controls for 
  the purpose of arranging them on the page and styling them through its 
  property settings. This text, for example, is contained inside a Panel 
  control with specified width and height settings along with indication 
  of how text overflow should be handled with scroll bars.</p>

</asp:Panel>

<asp:Panel Runat="Server" Font-Name="Times New Roman" Font-Size="11pt"
  Width="300px" Height="100px" HorizontalAlign="Left" BorderStyle="Solid"
  BorderWidth="1px" ScrollBars="Auto" Style="padding:10px">

<%@ Import Namespace="System.Drawing" %>

<SCRIPT Runat="Server">

Sub Change_Text (Source As Object, Args As EventArgs)

  TheLabel.Text  = "<p>Now the contents of the Panel have changed. "
  TheLabel.Text &= "This new information is generated by a script "
  TheLabel.Text &= "which replaces the text inside a Label control "
  TheLabel.Text &= "inside the Panel.</p>"

  ThePanel.BackColor = Color.FromName("#F0F0F0")
  ThePanel.ForeColor = Color.Fromname("#000000")

  TheButton.Visible = "False"
	
End Sub

</SCRIPT>

<form Runat="Server">

<asp:Panel id="ThePanel" Runat="Server"
BackColor="#CC9999" ForeColor="#FFFFFF" Width="200px" Height="200px" 
BorderStyle="Solid" BorderWidth="1px" Style="padding:10px">

  <h3 style="text-align:center">Panel Control</h3>

  <asp:Label id="TheLabel" Runat="Server"
    Text="<p>Here is a Panel control containing text along with a button. 
    When the button is clicked, the text in this Panel is changed.</p>"/>

  <p style="text-align:center">
    <asp:Button id="TheButton" Text="Change Text" Runat="Server"
    OnClick="Change_Text"/>
  </p>

</asp:Panel>

</form>

Server style properties are used to style the original Panel and to script restyles. Therefore, the System.Drawing namespace must be imported to this page for conversion of colors to ASP.NET values.

Display Visibility

One of the most useful properties of the Panel control, and of all controls for that matter, is its Visible property. Page displays can be hidden from view until they are made visible by a script. Visibility settings are needed especially when XHTML and text is pre-coded on the page but should not be viewable until a user or page event occurs.

Below is an XHTML table that is coded on a page. The table provides the structure for displaying output that is generated by a script. You cannot see the table since it appears inside a Panel control with a Visible="False" setting. Only after the script creates the table is it displayed by changing the Panel's Visible property to "True".

<SCRIPT Runat="Server">

Sub ShowDateTime (Src As Object, Args As EventArgs)

  TheDate.Text = DateString
  TheTime.Text = TimeString
  DateAndTime.Visible = True

End Sub

</SCRIPT>

<form Runat="Server">

<asp:Panel id="DateAndTime" Visible="False" Runat="Server">

  <table border="1" cellpadding="3">
  <caption><b>Current Date/Time</b></caption>
  <tr style="background-color:#F0F0F0">
    <th>Date</th>
    <th>Time</th>
  </tr>
  <tr>
    <td align="center"><asp:Label id="TheDate" Runat="Server"/></td>
    <td align="center"><asp:Label id="TheTime" Runat="Server"/></td>
  </tr>
  </table>

</asp:Panel>

<asp:Button Text="Show Date/Time" OnClick="ShowDateTime" Runat="Server"/>

</form>

CSS Visibility Styles

In the above example, the server property Visible is used to set and change the Panel's visibility. This property is equivalent to the CSS display property, and either can be used.

You might recall that visibility of page elements is controlled by two different CSS style settings: display and visibility. The display property can take on the values "none" (the element is not displayed), "block" (the element is displayed with line breaks before and after the element), or "inline" (the element is displayed with no line breaks before or after the element). When display:none is set for an element, it becomes invisible and, importantly, surrounding content on the page is closed up to take over the position of the hidden element. When display:block or display:inline is specified, surrounding content opens up to display the visible element. This is the way the server property Visible works.

You can use the CSS display property instead of the server Visible property. This alternate code for the previous example is shown below.

<SCRIPT Runat="Server">

Sub ShowDateTime (Src As Object, Args As EventArgs)

  TheDate.Text = DateString
  TheTime.Text = TimeString
  DateAndTime.Style("display") = "block"

End Sub

</SCRIPT>

<form Runat="Server">

<asp:Panel id="DateAndTime" Style="display:none" Runat="Server">
  ...
</asp:Panel>

</form>

An alternative to the CSS display property is the visibility property. Its value can be "visible" or "hidden". This style setting differs from display in that the element occupies space on the page even when it is hidden. Blank lines appear where the invisible element is positioned. Normally, you will prefer to use the display property (or the server Visible property) over the visibility property in order to close up page content when elements are invisible. However, you wish to reserve space on the page where elements will be revealed. This tactic is taken in the following rewrite of the previous Panel.

<SCRIPT Runat="Server">

Sub ShowDateTime (Src As Object, Args As EventArgs)

  TheDate.Text = DateString
  TheTime.Text = TimeString
  DateAndTime.Style("visibility") = "visible"

End Sub

</SCRIPT>

<form Runat="Server">

<asp:Panel id="DateAndTime" Style="visibility:hidden" Runat="Server">

  <table border="1" cellpadding="3">
  <caption><b>Current Date/Time</b></caption>
  <tr style="background-color:#F0F0F0">
    <th>Date</th>
    <th>Time</th>
  </tr>
  <tr>
    <td align="center"><asp:Label id="TheDate" Runat="Server"/></td>
    <td align="center"><asp:Label id="TheTime" Runat="Server"/></td>
  </tr>
  </table>

</asp:Panel>

<asp:Button Text="Show Date/Time" OnClick="ShowDateTime" Runat="Server"/>

</form>

Displaying Alternate Output

Often times scripts make decisions about which of two or more alternative outputs to display. The Visible property (or CSS display property) can assist in implementing these decisions. The following example is a rewrite of the example in Figure 4-13. In this case, rather than having script produce the changed text, it simply switches visibility of two pre-coded Panel controls.

<SCRIPT Runat="Server">

Sub Show_Next (Src As Object, Args As EventArgs)
  Panel1.Visible = False
  Panel2.Visible = True
End Sub

Sub Show_Previous (Src As Object, Args As EventArgs)
  Panel1.Visible = True
  Panel2.Visible = False
End Sub

</SCRIPT>

<form Runat="Server">

<!-- First Panel -->
<asp:Panel id="Panel1" Visible="True" Runat="Server"
  Width="200px" Height="200px" BackColor="#CC9999" ForeColor="#FFFFFF"
  BorderStyle="Solid" BorderWidth="1px" Style="padding:10px">

  <h3 style="text-align:center">Panel Control</h3>

  <asp:Label Runat="Server"
    Text="<p>Here is a Panel control containing text along with a button. 
    When the button is clicked, this Panel is made invisible.</p>"/>

  <p style="text-align:center">
  <asp:Button Text="Show Next" OnClick="Show_Next" Runat="Server"/>
  </p>

</asp:Panel>

<!-- Second Panel -->
<asp:Panel id="Panel2" Visible="False" Runat="Server"
  Width="200px" Height="200px" BackColor="#F0F0F0" ForeColor="#000000"
  BorderStyle="Solid" BorderWidth="1px" Style="padding:10px">

  <h3 style="text-align:center">Panel Control</h3>

  <asp:Label Runat="Server"
    Text="<p>Now the contents of the Panel have changed, but not really.
    This new information is presented in a second Panel that is made 
    visible.</p>"/>

  <p style="text-align:center">
  <asp:Button Text="Show Prev" OnClick="Show_Previous" Runat="Server"/>
  </p>

</asp:Panel>

</form>

It is noteworthy that these two Panels appear as overlays of each another. When the Visible="False" property is set for one Panel and Visible="True" is set for the other Panel, the visible Panel occupies the space taken up by the hidden Panel; therefore, both appear at the same location on the page. This is characteristic of a control with a Visible property which, like the CSS display property, closes up the space occupied by the control.

Of course, it is not necessary to show and hide two different Panel controls when only their contents are changed. A better solution is to code a single Panel control and use script to provide its different content and styling.

Scrolling Database Information

One of the most useful properties of the Panel control when it comes to displaying database information or other lengthy content is the ScrollBars property. By enclosing the output display inside a sized Panel with scroll bars, you can save precious page real estate and still make all information viewable. This technique is used in the following example, which displays all records from the BooksDB.mdb database inside a scrollable Panel.

The script for this application is not much different from previous scripts to display database information in an output Label. The main difference is in enclosing the Label inside a scrollable Panel.

<%@ Import Namespace="System.Data.OleDb" %>

<SCRIPT Runat="Server">

Sub Page_Load
  
  Dim DBConnection As OleDbConnection
  Dim DBCommand As OleDbCommand
  Dim DBReader As OleDbDataReader
  Dim SQLString As String
	
  DBConnection = New OleDbConnection( _
    "Provider=Microsoft.Jet.OLEDB.4.0;" & _
    "Data Source=" & Server.MapPath("../Databases/BooksDB.mdb"))
  DBConnection.Open()
  SQLString = "SELECT BookID, BookType, BookTitle, BookAuthor, " & _
              "BookPrice, BookQty FROM Books ORDER BY BookID"
  DBCommand = New OleDbCommand(SQLString, DBConnection)
  DBReader = DBCommand.ExecuteReader()
  If DBReader.HasRows Then
    
    Output.Text  = "<table border=""1"">"
    Output.Text &= "<tr>"
    Output.Text &= "<th>ID</th>"
    Output.Text &= "<th>Type</th>"
    Output.Text &= "<th>Title</th>"
    Output.Text &= "<th>Author</th>"
    Output.Text &= "<th>Price</th>"	
    Output.Text &= "<th>Qty</th>"
    Output.Text &= "</tr>"
    
    While DBReader.Read()
      Output.Text &= "<tr>"
      Output.Text &= "<td>" & DBReader("BookID") & "</td>"
      Output.Text &= "<td>" & DBReader("BookType") & "</td>"
      Output.Text &= "<td>" & DBReader("BookTitle") & "</td>"
      Output.Text &= "<td>" & DBReader("BookAuthor") & "</td>"
      Output.Text &= "<td>" & DBReader("BookPrice") & "</td>"
      Output.Text &= "<td>" & DBReader("BookQty") & "</td>"
      Output.Text &= "</tr>"
    End While
    
    Output.Text &= "</table>"
    
  End If
  DBReader.Close()
  DBConnection.Close()

End Sub

</SCRIPT>

<form Runat="Server">

<h4>Book.mdb Database</h4>

<asp:Panel Height="188" Width="504" ScrollBars="Vertical" Runat="Server">
  <asp:Label id="Output" Runat="Server"/>
</asp:Panel>

</form>

Here, the width of the Panel (504px) is given by the width of its enclosed table. This width is derived by trial and error to just enclose the table. If no Width setting is specified, the Panel is a wide as its container, that is, as wide as the Web page, leaving a blank area between the table and the scroll bar. This is not a particular problem, simply avoided in this case. The height of the Panel (188px) is arbitrary depending on how many table rows to make visible. Only Vertical scroll bars are applied since the width of the Panel makes it unnecessary to offer horizontal scrolling.

Scrolling a Label

Although a Label control does not provide a ScrollBars property, you can set it up as a scrollable area by using the CSS overflow property. A setting of overflow:scroll displays horizontal and vertical scroll bars whether needed or not to view hidden text; overflow:auto displays a vertical scroll bar if needed to view hidden text.

The following example of a scrollable database uses the same script as before, the difference being that a scrollable Label is used for display rather than enclosing the Label inside a scrollable Panel.

Since the database access script is identical to the previous application, only the control code is shown below.

<form Runat="Server">

<h4>Book.mdb Database</h4>

<asp:Label id="Output" Runat="Server"
Style="height:188px; width:504px; overflow:auto"/>

</form>

A scrollable Label is functionally equivalent to a scrollable Panel. However, the Panel is better suited to enclosing additional and multiple kinds of content. As a "block-level" control, versus the "in-line" Label, it is designed for just this purpose.