Los controles del panel pueden servir como contenedores para otros controles en una página. Controla la apariencia y visibilidad de los controles que contiene. También permite la programación del control generado.
La sintaxis básica de los controles del panel es la siguiente:
<asp:Panel ID= "Panel1" runat = "server"></asp:Panel>
Los controles del panel derivan de la clase WebControl. Por lo tanto, hereda todas las propiedades, métodos y eventos por igual. No tiene ningún método o evento propio. Sin embargo, tiene las siguientes propiedades propias:
propiedad | describir |
---|---|
AtrásImagenUrl | La dirección de la imagen de fondo del panel. |
Botón predeterminado | Obtiene o establece el identificador del botón predeterminado contenido en el control Panel. |
Dirección | La dirección del texto en el panel. |
Texto de agrupación | Permitir que el texto se agrupe como un campo. |
Alineación horizontal | Alinea el contenido del panel horizontalmente. |
Barras de desplazamiento | Especifica la visibilidad y posición de las barras de desplazamiento dentro del panel. |
Envoltura | Permitir que el texto se ajuste. |
Comencemos con un panel de desplazamiento con una altura y un ancho específicos y un estilo de borde simple. Las propiedades de la barra de desplazamiento están configuradas en dos barras de desplazamiento, por lo que ambas barras de desplazamiento se representan al mismo tiempo.
El archivo fuente tiene el siguiente código de etiqueta de panel:
<asp:Panel ID="Panel1" runat="server" BorderColor="#990000" BorderStyle="Solid" Borderstyle="width:1px" Height="116px" ScrollBars="Both"> This is a scrollable panel. <br /> <br /> <asp:Button ID="btnpanel" runat="server" Text="Button" /></asp:Panel>
El panel aparece de la siguiente manera:
El siguiente ejemplo demuestra la generación de contenido dinámico. El usuario proporciona el número de controles de etiquetas y cuadros de texto que se generarán en el panel. Los controles se generan mediante programación.
Utilice la ventana Propiedades para cambiar las propiedades del panel. Cuando selecciona un control en la vista Diseño, la ventana Propiedades muestra las propiedades del control específico y le permite cambiarlas sin escribir.
El archivo fuente del ejemplo es el siguiente:
<form id="form1" runat="server"> <div> <asp:Panel ID="pnldynamic" runat="server" BorderColor="#990000" BorderStyle="Solid" Borderstyle="width:1px" Height="150px" ScrollBars="Auto" BackColor="#CCCCFF" Font-Names="Courier" HorizontalAlign="Center"> This panel shows dynamic control generation: <br /> <br /> </asp:Panel> </div> <table> <tr> <td>No of Labels:</td> <td> <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> </td> <td> </td> </tr> <tr> <td>No of Text Boxes :</td> <td> <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> </td> <td> </td> </tr> <tr> <td> <asp:CheckBox ID="chkvisible" runat="server" Text="Make the Panel Visible" /> </td> <td> <asp:Button ID="btnrefresh" runat="server" Text="Refresh Panel" /> </td> </tr> </table></form>
El código fuente del control generado dinámicamente detrás del evento Page_Load es:
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 />")); } }}
Cuando se ejecuta, el panel se representa como: