Información general sobre los controles de usuario ASP.NET
Actualización: noviembre 2007
En ocasiones, es posible que necesite cierta funcionalidad en un control que no está incluida en los controles de servidor Web ASP.NET integrados. En estos casos, puede crear sus propios controles. Dispone de dos opciones. Puede crear:
Controles de usuario. Los controles de usuario son contenedores en los que puede colocar controles de formato y de servidor Web. A continuación puede tratar el control de usuario como una unidad y definir propiedades y métodos para el mismo.
Controles personalizados. Un control personalizado es una clase escrita por un desarrollador que se deriva de Control o WebControl.
Los controles de usuario son mucho más fáciles de crear que los controles personalizados, ya que es posible reutilizar los ya existentes. Esto permite crear con facilidad controles con elementos de interfaz de usuario complejos.
En este tema se proporciona información general sobre el uso de los controles de usuario ASP.NET.
Estructura de los controles de usuario
Un control de usuario Web ASP.NET es similar a una página Web ASP.NET completa (archivo .aspx) e incluye una página de interfaz de usuario y código. El proceso de creación del control de usuario es muy similar al proceso de creación de una página ASP.NET, sólo que al final se agregan el formato y los controles secundarios necesarios. Al igual que una página, un control de usuario puede incluir el código necesario para manipular su contenido e incluso realizar tareas como el enlace de datos.
Un control de usuario se diferencia de una página Web ASP.NET en los siguientes aspectos:
La extensión de nombre de archivo para el control de usuario es .ascx.
En lugar de una directiva @ Page, el control de usuario contiene una directiva @ Control que define la configuración y otras propiedades.
Los controles de usuario no se pueden ejecutar como archivos independientes. En su lugar, debe agregarlos a las páginas ASP.NET, como haría con cualquier otro control.
El control de usuario no contiene elementos html, body o form. Estos elementos deben estar en la página de alojamiento.
En un control de usuario puede utilizar los mismos elementos HTML (excepto html, body y form) y controles Web que en una página Web ASP.NET. Por ejemplo, si está creando un control de usuario para utilizar una barra de herramientas, puede colocar una serie de controles de servidor Web Button en el control y crear controladores de eventos para los botones.
En el ejemplo siguiente se muestra un control de usuario que implementa un control de número en el que los usuarios pueden hacer clic en los botones arriba y abajo para mostrar varias opciones de un cuadro de texto.
<%@ Control Language="VB" ClassName="UserControl1" %>
<script >
Protected colors As String() = {"Red", "Green", "Blue", "Yellow"}
Protected currentColorIndex As Integer = 0
Protected Sub Page_Load(ByVal sender As Object, _
ByVal e As System.EventArgs)
If IsPostBack Then
currentColorIndex = CInt(ViewState("currentColorIndex"))
Else
currentColorIndex = 0
DisplayColor()
End If
End Sub
Protected Sub DisplayColor()
textColor.Text = colors(currentColorIndex)
ViewState("currentColorIndex") = currentColorIndex.ToString()
End Sub
Protected Sub buttonUp_Click(ByVal sender As Object, _
ByVal e As System.EventArgs)
If currentColorIndex = 0 Then
currentColorIndex = colors.Length - 1
Else
currentColorIndex -= 1
End If
DisplayColor()
End Sub
Protected Sub buttonDown_Click(ByVal sender As Object, _
ByVal e As System.EventArgs)
If currentColorIndex = colors.Length - 1 Then
currentColorIndex = 0
Else
currentColorIndex += 1
End If
DisplayColor()
End Sub
</script>
<asp:TextBox ID="textColor"
ReadOnly="True" />
<asp:Button Font-Bold="True" ID="buttonUp"
Text="^" OnClick="buttonUp_Click" />
<asp:Button Font-Bold="True" ID="buttonDown"
Text="v" OnClick="buttonDown_Click" />
<% @ Control Language="C#" ClassName="UserControl1" %>
<script >
protected int currentColorIndex;
protected String[] colors = {"Red", "Blue", "Green", "Yellow"};
protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack)
{
currentColorIndex =
Int16.Parse(ViewState["currentColorIndex"].ToString());
}
else
{
currentColorIndex = 0;
DisplayColor();
}
}
protected void DisplayColor()
{
textColor.Text = colors[currentColorIndex];
ViewState["currentColorIndex"] = currentColorIndex.ToString();
}
protected void buttonUp_Click(object sender, EventArgs e)
{
if(currentColorIndex == 0)
{
currentColorIndex = colors.Length - 1;
}
else
{
currentColorIndex -= 1;
}
DisplayColor();
}
protected void buttonDown_Click(object sender, EventArgs e)
{
if(currentColorIndex == (colors.Length - 1))
{
currentColorIndex = 0;
}
else
{
currentColorIndex += 1;
}
DisplayColor();
}
</script>
<asp:TextBox ID="textColor"
ReadOnly="True" />
<asp:Button Font-Bold="True" ID="buttonUp"
Text="^" OnClick="buttonUp_Click" />
<asp:Button Font-Bold="True" ID="buttonDown"
Text="v" OnClick="buttonDown_Click" />
Tenga en cuenta que el control de usuario es muy similar a una página ASP.NET, ya que contiene varios controles (un control TextBox y dos controles Button) y código que controla los eventos Click de los botones y el evento Load de la página. Sin embargo, el control no contiene ningún formato, excepto para los controles, y en lugar de una directiva @ Page contiene una directiva @ Control.
Agregar un control de usuario a una página
Para agregar un control de usuario a una página es necesario registrarlo primero en la página que aloja el control (o página host). Al hacerlo, se debe especificar el archivo .ascx que contiene el control, así como un prefijo y un nombre de etiqueta que se utilizarán para declarar el control en la página. Para obtener más información, vea Cómo: Incluir un control de usuario en una página Web ASP.NET.
Definir propiedades y métodos para un control de usuario
Puede definir propiedades y métodos para un control de usuario de la misma manera que lo haría para una página. La definición de una propiedad para un control de usuario permite establecer sus propiedades mediante declaración y en el código.
Eventos de los controles de usuario
Si un control de usuario contiene controles de servidor Web, es posible escribir código en dicho control para controlar los eventos producidos por los controles secundarios. Por ejemplo, si su control de usuario contiene un control Button, puede crear un controlador en el control de usuario para el evento Click del botón.
De manera predeterminada, los eventos producidos por los controles secundarios en un control de usuario no están disponibles para la página host. Sin embargo, es posible definir en el control de usuario eventos y producirlos de modo que se notifiquen a la página host. Esto se hace de la misma manera que la definición de eventos para una clase. Para obtener más información, vea Provocar un evento.
Hacer referencia a recursos externos
Cuando se ejecuta un control de usuario, las referencias a recursos externos, como imágenes o delimitadores para otras páginas, se resuelven utilizando la dirección URL del control de usuario como dirección URL base. Por ejemplo, si el control de usuario contiene un control Image cuya propiedad ImageUrl se ha establecido en Images/Button1.gif, la dirección URL de la imagen se agrega a la dirección URL del control de usuario para resolver la ruta de acceso completa a la imagen. Si el control de usuario hace referencia a un recurso que no se encuentra en una subcarpeta del propio control, se debe proporcionar una ruta de acceso que se resuelva en la carpeta correcta en tiempo de ejecución. Para obtener más información sobre cómo especificar rutas de acceso para los controles de servidor ASP.NET, vea Rutas de acceso a sitios Web ASP.NET.
Almacenamiento en caché y controles de usuario
Los controles de usuario pueden admitir el uso de directivas de almacenamiento en caché independientes de la página host. Por consiguiente, puede agregar a las páginas controles de usuario que permitan almacenar en caché partes de una página. Para obtener más información, vea Almacenar en caché partes de una página ASP.NET.