PDF de programación - Programación avanzada en .NET con C# - CONTROLES DE USUARIO

Programación avanzada en .NET con C#

Servicio de Informática

CONTROLES DE USUARIO

CONTROLES DE USUARIO

Introducción

Además de utilizar controles de servidor Web en las páginas Web ASP.NET, puede crear sus
propios controles personalizados reutilizables con las mismas técnicas que para crear páginas
Web ASP.NET. Estos controles se denominan controles de usuario.

Un control de usuario es un tipo de control compuesto que funciona de forma similar a la de
una página Web ASP.NET: se pueden agregar controles de servidor Web y marcado a un control
de usuario, así como definir propiedades y métodos para el control. A continuación, puede
incrustarlos en páginas Web ASP.NET, donde actúan como una unidad.

Controles de Usuario vs Controles personalizados

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.

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

1

Programación avanzada en .NET con C#

Servicio de Informática

CONTROLES DE USUARIO

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="C#" ClassName="UserControl1" %>
<script runat="server">
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)
{

2

Programación avanzada en .NET con C#

Servicio de Informática

CONTROLES DE USUARIO

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" runat="server"
ReadOnly="True" />
<asp:Button Font-Bold="True" ID="buttonUp" runat="server"
Text="^" OnClick="buttonUp_Click" />
<asp:Button Font-Bold="True" ID="buttonDown" runat="server"
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.

Crear controles de usuario

Los controles de usuario ASP.NET se crean casi de la misma forma en la que se diseñan las
páginas Web ASP.NET. Se pueden usar los mismos elementos y controles HTML en un control
de usuario que en una página ASP.NET estándar. Sin embargo, el control de usuario no tiene
elementos html, body ni form; además, la extensión de nombre de archivo debe ser .ascx.

Para crear un control de usuario ASP.NET:

1. Abra el proyecto de sitio Web al que desee agregar controles de usuario. Si aún no

tiene ningún proyecto de sitio Web, puede crear uno.

2. En el menú Sitio Web, haga clic en Agregar nuevo elemento.

Aparecerá el cuadro de diálogo Agregar nuevo elemento.

3

Programación avanzada en .NET con C#

Servicio de Informática

CONTROLES DE USUARIO

3. En la opción Plantillas instaladas de Visual Studio del cuadro de diálogo Agregar nuevo

elemento, haga clic en Control de usuario Web.

4. En el cuadro Nombre, escriba un nombre para el control.

De forma predeterminada, la extensión de nombre de archivo .ascx se anexa al nombre
de control que escriba.

5. En la lista Lenguaje, seleccione el lenguaje de programación que desee utilizar.

6. Opcionalmente, si desea mantener algún código del control de usuario en un archivo

independiente, active la casilla Colocar el código en un archivo independiente.

7. Haga clic en Agregar.

Se crea el nuevo control de usuario ASP.NET y, a continuación, se abre en el diseñador.
El código de formato para este nuevo control es similar al de una página Web ASP.NET,
salvo que contiene una directiva @ Control en vez de una directiva @ Page; además, el
control no tiene los elementos html, body ni form.

Agregue los códigos de formato y los controles al nuevo control de usuario, así como el
código de las tareas que realizará el control de usuario, como controlar los eventos del
control o la lectura de los datos desde un origen de datos.

Ilustración 1: Crear un control de usuario

4

Programación avanzada en .NET con C#

Servicio de Informática

CONTROLES DE USUARIO

Incluir controles de usuario

Mediante el diseñador
Para agregar un control de usuario ASP.NET a una página Web se sigue un proceso parecido al
de agregar otros controles de servidor. Sin embargo, se debe asegurar de seguir el siguiente
procedimiento para que todos los elementos necesarios se agreguen a la página.

1. Abra la página Web a la que desee agregar el control de usuario ASP.NET.

2. Cambie a la vista Diseño.

3. En el Explorador de soluciones, seleccione el archivo del control de usuario y arrástrelo

a la página.

El control de usuario ASP.NET se agrega a ella. Además, el diseñador crea la directiva
@Register, que se necesita para que la página reconozca el control de usuario. Ya puede
trabajar con las propiedades y métodos públicos del control.

Manualmente

1. En la página Web ASP.NET contenedora, cree una directiva @ Register que incluya lo

siguiente:

• Un atributo TagPrefix, que permite asociar un prefijo al control de usuario. Este

prefijo se incluirá en la etiqueta de apertura del elemento del control de
usuario.

•

Un atributo TagName, que permite asociar un nombre al control de usuario.
Este nombre se incluirá en la etiqueta de apertura del elemento del control de
usuario.

• Un atributo Src, que permite definir la ruta de acceso virtual al archivo del

control de usuario que se va a incluir.
Nota:
El valor del atributo Src puede ser una ruta de acceso relativa o absoluta al
archivo de código fuente del control de usuario partiendo del directorio raíz de
la aplicación. Para mayor flexibilidad, se recomienda utilizar una ruta de acceso
relativa. El carácter tilde (~) representa el directorio raíz de la aplicación. Los
controles de usuario no pueden situarse en el directorio App_Code.

2. En el cuerpo de la página Web, declare el elemento de control de usuario dentro del

elemento form.

5

Programación avanzada en .NET con C#

Servicio de Informática

CONTROLES DE USUARIO

3. Si el control de usuario expone propiedades públicas, también puede establecerlas

mediante declaración.

Ejemplo

En el ejemplo siguiente se muestra una página Web ASP.NET que contiene un control de
usuario. Éste se encuentra en el archivo Spinner.ascx de la carpeta Controls. En la página, el
control se registra para que utilice el prefijo uc y el nombre de etiqueta Spinner. Las
propiedades MinValue y MaxValue del control de usuario se establecen mediante declaración.

<%@ Page Language="C#" %>
<%@ Register TagPrefix="uc"