Asp.net 简明教程

ASP.NET - Panel Controls

面板控件用作页面上其他控件的容器。它控制其包含的控件的外观和可见性。它还允许以编程方式生成控件。

面板控件的基本语法如下所示：

<asp:Panel ID= "Panel1"  runat = "server">
</asp:Panel>

面板控件衍生自 WebControl 类。因此，它继承了代码中的所有属性、方法和事件。它没有自己的任何方法或事件。但它有自己的以下属性：

Properties

Description

BackImageUrl

面板的背景图像的 URL。

DefaultButton

获取或设置包含在面板控件中的默认按钮的标识符。

Direction

面板中文本的方向。

GroupingText

允许分组文本作为字段。

HorizontalAlign

面板中内容的水平对齐方式。

ScrollBars

指定面板内滚动条的可见性和位置。

Wrap

Allows text wrapping.

Working with the Panel Control

让我们从一个特定高度和宽度以及边框样式的简单可滚动面板开始。将 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>

面板的呈现方式如下：

panel

Example

以下示例演示动态内容生成。用户提供要生成的标签控件和文本框的数量。控件以编程方式生成。

使用属性窗口更改面板的属性。当您在设计视图上选择一个控件时，属性窗口会显示该特定控件的属性并允许您进行更改而不进行输入。

panel2

示例源文件如下：

<form id="form1" runat="server">
   <div>
      <asp:Panel ID="pnldynamic" runat="server" BorderColor="#990000"
         BorderStyle="Solid" Borderstyle="width:1px" Height="150px"  ScrollBars="Auto" style="width:60%" BackColor="#CCCCFF"  Font-Names="Courier" HorizontalAlign="Center">

         This panel shows dynamic control generation:
         <br />
         <br />
      </asp:Panel>
   </div>

   <table style="width: 51%;">
      <tr>
         <td class="style2">No of Labels:</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">No of Text Boxes :</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="Make the Panel Visible" />
         </td>

         <td class="style1">
            <asp:Button ID="btnrefresh" runat="server" Text="Refresh Panel"
               style="width:129px" />
         </td>
      </tr>
   </table>
</form>

Page_Load 事件背后的代码负责动态生成控件：

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 />"));
      }
   }
}

执行之后，面板将呈现为：

panel3