*Using the ASP.NET Panel Control...

原创 2004年10月06日 21:10:00

By: John Kilgo Date: March 6, 2003 Download the code. Printer Friendly Version

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.

Using Templates With the ASP.NET Repeater Control...

The Repeater control is a lightweight control but has many uses and has become a favorite of mine. M...
  • hiyaolee
  • hiyaolee
  • 2004年10月06日 21:07
  • 746

asp.net之panel的一次使用

receiver页面需要有送达仓库,是要用dropdownlist来实现的感觉,可是看了下之前的代码,那部分只有个panel控件,目测是用panel实现的,看看代码吧 这是前台代码 这是后台...
  • tj_2011
  • tj_2011
  • 2015年03月19日 18:03
  • 890

ASP:Panel控件(容器控件)

Panel控件在页面内为其他控件提供了一个容器,可以将多个控件放入一个Panel控件中,作为一个单元进行控制,如隐藏或显示这些控件;同时,也可以使用Panel控件为一组控件创建独特的外观。     P...
  • vjudge
  • vjudge
  • 2014年07月23日 23:38
  • 1420

ASP.NET AJAX里使用Update Panel需要注意的事项

当使用UpdatePanel时,需要注意以下事项,否则会出现PageRequestManagerParserErrorException 的异常1.不能使用Response.Write, 可以用Wri...
  • gaodemin
  • gaodemin
  • 2007年05月23日 18:15
  • 804

C# 自定义panel解决背景出现闪屏

1、创建一个自定义控件. 2、代码如下: using System; using System.Collections.Generic; using System.ComponentModel...
  • a707854407
  • a707854407
  • 2013年06月07日 23:11
  • 655

ASP.NET 如何让单行文本或控件在Panel中垂直居中

解决方案1原文地址 如果你这是web程序的话,建议panel里面套个单行单列的表格width:100%;height:100%,然后在这个单元格里面放你的控件或者文本,通过设置单元格的valign来...
  • csunking
  • csunking
  • 2015年05月08日 17:54
  • 2099

谁能帮我解决这个问题,(急,急.......)

1>ButtonDF.cpp1>正在生成代码...1>e:/lineloadx/linectrl.cpp(341) : warning C4700: 使用了未初始化的局部变量“k”1>正在编译资源.....
  • niuniuli
  • niuniuli
  • 2008年06月11日 09:16
  • 839

asp.net Panel 横向滚动,纵向自动扩展

★Panel 横向滚动,纵向自动扩展 ★回车转换成Tab if(event.keyCode==13 && event.srcElement.type!='button' &...
  • ws670623101
  • ws670623101
  • 2011年12月29日 17:12
  • 339

ASP.NET中使用多个runat=server form

作者:未知ASP.NET 在同一个页面不支持多个 runat=server forms,要解决这个问题,可以把每个 form 放在一个单独的 panel 控件中,这样用户就可以简单地通过单选按钮在不同...
  • 21aspnet
  • 21aspnet
  • 2004年10月30日 19:37
  • 4304

div如何实现左右两个panel并排,而且高度一致

这是左侧的内容这是左侧的内容这是左侧的内容 ...
  • chen_xizhang
  • chen_xizhang
  • 2009年12月26日 10:11
  • 1124
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:*Using the ASP.NET Panel Control...
举报原因:
原因补充:

(最多只允许输入30个字)