panel控件作为页面上其他控件的容器。它控制它包含的控件的外观和可见性。 它还允许以编程方式生成控件。
面板控件的基本语法如下：
<asp:panel id= "panel1" runat = "server">
</asp:panel>
panel控件是从webcontrol类派生的。 因此，它继承了相同的所有属性，方法和事件。 它没有任何方法或事件。 然而，它具有以下属性：
| 编号 | 属性 | 描述 |
|---|---|---|
| 1 | backimageurl |
面板的背景图像的url。 |
| 2 | defaultbutton |
获取或设置panel控件中包含的默认按钮的标识符。 |
| 3 | direction |
面板中的文字方向。 |
| 4 | groupingtext |
允许将文本分组为一个字段。 |
| 5 | horizontalalign |
面板内容的水平对齐。 |
| 6 | scrollbars |
指定面板内滚动条的可见性和位置。 |
| 7 | wrap |
允许文字换行。 |
这里从具有特定高度和宽度以及边框样式的简单的可滚动面板开始了解学习。scrollbars属性被设置为两个滚动条，因此两个滚动条都被渲染。
源文件具有面板标签的以下代码：
<asp:panel id="panel1" runat="server" bordercolor="#990000" borderstyle="solid"
borderstyle="width:1px" height="116px" scrollbars="both" style="width:278px">
this is a scrollable panel.
<br />
<br />
<asp:button id="btnpanel" runat="server" text="button" style="width:82px" />
</asp:panel>
面板呈现如下：
以下示例演示动态内容生成。用户提供要在面板上生成的标签控件和文本框的数量。 这些控件是以编程方式生成的。
使用属性窗口更改面板的属性。 在设计视图中选择控件时，属性窗口将显示该特定控件的属性，并允许在不输入的情况下进行更改。
首先打开visual studio，创建一个名称为：panelcontrol 的空asp.net网站项目，如下所示 -
在这个项目名称上点击右键，在弹出的选项中选择：添加 -> 添加新项，选择web窗体，创建一个文件：default.aspx 。
该示例的源文件(default.aspx)如下所示：
<%@ page language="c#" autoeventwireup="true" codefile="default.aspx.cs" inherits="_default" %>
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>asp.net面板示例</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:panel id="pnldynamic" runat="server" bordercolor="#990000"
borderstyle="solid" height="150px" scrollbars="auto" style="width:60%" backcolor="#ccccff" font-names="courier" horizontalalign="center">
该面板显示动态控制生成：
<br />
<br />
</asp:panel>
</div>
<table style="width: 51%;">
<tr>
<td class="style2">标签数量:</td>
<td class="style1">
<asp:dropdownlist id="ddllabels" runat="server">
<asp:listitem>0</asp:listitem>
<asp:listitem>1</asp:listitem>
<asp:listitem>2</asp:listitem>
<asp:listitem>3</asp:listitem>
<asp:listitem>4</asp:listitem>
</asp:dropdownlist>
</td>
</tr>
<tr>
<td class="style2"> </td>
<td class="style1"> </td>
</tr>
<tr>
<td class="style2">文本框数量 :</td>
<td class="style1">
<asp:dropdownlist id="ddltextbox" runat="server">
<asp:listitem>0</asp:listitem>
<asp:listitem value="1"></asp:listitem>
<asp:listitem>2</asp:listitem>
<asp:listitem>3</asp:listitem>
<asp:listitem value="4"></asp:listitem>
</asp:dropdownlist>
</td>
</tr>
<tr>
<td class="style2"> </td>
<td class="style1"> </td>
</tr>
<tr>
<td class="style2">
<asp:checkbox id="chkvisible" runat="server"
text="使用面板可视化" />
</td>
<td class="style1">
<asp:button id="btnrefresh" runat="server" text="提交更新生成"
style="width:129px" />
</td>
</tr>
</table>
</form>
</body>
</html>
page_load事件后端的代码(default.aspx.cs)负责动态生成控件：
using system;
using system.collections.generic;
using system.linq;
using system.web;
using system.web.ui;
using system.web.ui.webcontrols;
public partial class _default : system.web.ui.page
{
protected void page_load(object sender, eventargs e)
{
//make the panel visible
pnldynamic.visible = chkvisible.checked;
//generating the lable controls:
int n = int32.parse(ddllabels.selecteditem.value);
for (int i = 1; i <= n; i++)
{
label lbl = new label();
lbl.text = "label" + (i).tostring();
pnldynamic.controls.add(lbl);
pnldynamic.controls.add(new literalcontrol("<br />"));
}
//generating the text box controls:
int m = int32.parse(ddltextbox.selecteditem.value);
for (int i = 1; i <= m; i++)
{
textbox txt = new textbox();
txt.text = "text box" + (i).tostring();
pnldynamic.controls.add(txt);
pnldynamic.controls.add(new literalcontrol("<br />"));
}
}
}
运行上面项目，得到以下结果 -
选择相关选项，并勾选使用面板可视化，然后点击：提交更新生成 ，得到以下结果 -
