By: John Kilgo
The Panel Control is so easy to use that I hesitated to even write an article about it. But I have received several questions about it so decided to write the article anyway. The Panel Control is a container that allows you to include other server controls on it. It is primarily used for containing labels, textboxes, checkboxes and other controls that you would normally use on a web form. Panels come in handy especially when you have very large forms that become unweildy to deal with. Using panels you can reveal your form one logical section at a time and make it appear less cumbersome. The control has only a few properties, visible being the most useful.
In this example we will use three panels to display our form, along with three button controls to control the visibility of each panel. Our form actually is not very large, but it should serve the purpose of showing what can be done with the panel.
As can be seen in the following .aspx file each section contains a panel opening tag with some properties being set, followed by the server controls to be contained on the panel, followed by the panel's closing tag. All other processing takes place in a code-behind file to be shown further below. At the top of the aspx file are several buttons which will be used to show the various panels. Notice that the three buttons that control the panels raise and OnCommand event which will be handled in the code-behind file. I also place a Submit button on the form although I wrote no code for it.
<%@ Page Language="vb" Src="PanelControl.aspx.vb" Inherits="PanelControl" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>PanelControl</title>
<meta content="Microsoft Visual Studio.NET 7.0" name=GENERATOR>
<meta content="Visual Basic 7.0" name=CODE_LANGUAGE>
<meta content=JavaScript name=vs_defaultClientScript>
<meta content=http://schemas.microsoft.com/intellisense/ie5 name=vs_targetSchema>
</head>
<body MS_POSITIONING="GridLayout">
<form id=Form1 method=post runat="server">
<asp:Button ID="btnName" CommandName="name" OnCommand="button_click" text="Name" Runat="server" />
<asp:Button ID="btnAddress" CommandName="address" OnCommand="button_click" Text="Address" Runat="server" />
<asp:Button ID="btnPhone" CommandName="phone" OnCommand="button_click" Text="Telephone" Runat="server" />
<asp:Button ID="btnSubmit" Text="Submit" Runat="server" />
<asp:Panel id="pnlName"
style="Z-INDEX: 101; LEFT: 20px; POSITION: absolute; TOP: 64px"
runat="server"
Height="182px"
Width="278px">
<TABLE>
<TR>
<TD><asp:Label id="lblFirstName" Runat="server" text="First Name:"></asp:Label></TD>
<TD><asp:TextBox id="txtFirstName" Runat="server"></asp:TextBox></TD></TR>
<TR>
<TD><asp:Label id="lblMiddleName" Runat="server" text="Middle Name:"></asp:Label></TD>
<TD><asp:TextBox id="txtMiddleName" Runat="server"></asp:TextBox></TD>
</TR>
<TR>
<TD><asp:Label id="lblLastName" Runat="server" text="Last Name:"></asp:Label></TD>
<TD><asp:TextBox id="txtLastName" Runat="server"></asp:TextBox></TD>
</TR>
</TABLE>
</asp:Panel>
<asp:Panel id="pnlPhone"
style="Z-INDEX: 102; LEFT: 20px; POSITION: absolute; TOP: 64px"
runat="server"
Height="182px"
Width="278px">
<TABLE>
<TR>
<TD><asp:Label id="lblPhone" Runat="server" text="Telephone:"></asp:Label></TD>
<TD><asp:TextBox id="txtPhone" Runat="server"></asp:TextBox></TD>
</TR>
<TR>
<TD><asp:Label id="lblCellPhone" Runat="server" text="Cell Phone:"></asp:Label></TD>
<TD><asp:TextBox id="txtCellPhone" Runat="server"></asp:TextBox></TD>
</TR>
<TR>
<TD><asp:Label id="lblFax" Runat="server" text="FAX:"></asp:Label></TD>
<TD><asp:TextBox id="txtFax" Runat="server"></asp:TextBox></TD>
</TR>
</TABLE>
</asp:Panel>
<asp:Panel id="pnlAddress"
style="Z-INDEX: 103; LEFT: 20px; POSITION: absolute; TOP: 64px"
runat="server"
Height="182px"
Width="278px">>
<TABLE>
<TR>
<TD><asp:Label id="lblAddr1" Runat="server" text="Address1:"></asp:Label></TD>
<TD><asp:TextBox id="txtAddr1" Runat="server"></asp:TextBox></TD>
</TR>
<TR>
<TD><asp:Label id="lblAddr2" Runat="server" text="Address2:"></asp:Label></TD>
<TD><asp:TextBox id="txtAddr2" Runat="server"></asp:TextBox></TD>
</TR>
<TR>
<TD><asp:Label id="lblCity" Runat="server" text="Cityh:"></asp:Label></TD>
<TD><asp:TextBox id="txtCity" Runat="server"></asp:TextBox></TD>
</TR>
<TR>
<TD><asp:Label id="lblState" Runat="server" text="State:"></asp:Label></TD>
<TD><asp:TextBox id="txtState" Runat="server"></asp:TextBox></TD>
</TR>
<TR>
<TD><asp:Label id="lblZipCode" Runat="server" text="Zip Code:"></asp:Label></TD>
<TD><asp:TextBox id="txtZipCode" Runat="server"></asp:TextBox></TD>
</TR>
</TABLE>
</asp:Panel>
</FORM>
</body>
</html>
It is in the code-behind file, shown below that we control the visibility of the three panels we defined in the aspx file. Depending on which button was clicked we set its corresponding panel's visibility to "True" and the other panels' visibility to false.
Public Class PanelControl : Inherits System.Web.UI.Page
Protected WithEvents pnlName As System.Web.UI.WebControls.Panel
Protected WithEvents pnlAddress As System.Web.UI.WebControls.Panel
Protected WithEvents lblFirstName As System.Web.UI.WebControls.Label
Protected WithEvents txtFirstName As System.Web.UI.WebControls.TextBox
Protected WithEvents lblMiddleName As System.Web.UI.WebControls.Label
Protected WithEvents txtMiddleName As System.Web.UI.WebControls.TextBox
Protected WithEvents lblLastName As System.Web.UI.WebControls.Label
Protected WithEvents txtLastName As System.Web.UI.WebControls.TextBox
Protected WithEvents lblAddr1 As System.Web.UI.WebControls.Label
Protected WithEvents txtAddr1 As System.Web.UI.WebControls.TextBox
Protected WithEvents lblAddr2 As System.Web.UI.WebControls.Label
Protected WithEvents txtAddr2 As System.Web.UI.WebControls.TextBox
Protected WithEvents lblCity As System.Web.UI.WebControls.Label
Protected WithEvents txtCity As System.Web.UI.WebControls.TextBox
Protected WithEvents lblState As System.Web.UI.WebControls.Label
Protected WithEvents txtState As System.Web.UI.WebControls.TextBox
Protected WithEvents lblZipCode As System.Web.UI.WebControls.Label
Protected WithEvents txtZipCode As System.Web.UI.WebControls.TextBox
Protected WithEvents lblPhone As System.Web.UI.WebControls.Label
Protected WithEvents txtPhone As System.Web.UI.WebControls.TextBox
Protected WithEvents lblCellPhone As System.Web.UI.WebControls.Label
Protected WithEvents txtCellPhone As System.Web.UI.WebControls.TextBox
Protected WithEvents lblFax As System.Web.UI.WebControls.Label
Protected WithEvents txtFax As System.Web.UI.WebControls.TextBox
Protected WithEvents pnlPhone As System.Web.UI.WebControls.Panel
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
pnlName.Visible = True
pnlPhone.Visible = False
pnlAddress.Visible = False
End Sub
Public Sub Button_Click (sender As System.Object, e As system.Web.UI.WebControls.CommandEventArgs)
If e.CommandName="address" Then
pnlName.Visible = False
pnlPhone.Visible = False
pnlAddress.Visible = True
ElseIf e.CommandName = "name" Then
pnlPhone.Visible = False
pnlAddress.Visible = False
pnlName.Visible = True
ElseIF e.CommandName = "phone" Then
pnlAddress.Visible = False
pnlName.Visible = False
pnlPhone.Visible = True
End If
End Sub
End Class
In conclusion I hope you can see how easy it is to utilize panel controls and how they can bring some order and organization to your very large web forms.
You may run the example program here.
You may download the code here.
