Tutorial: Crear elementos reutilizables con controles de usuario ASP.NET

  • Artículo

Actualización: noviembre 2007

Los controles de usuario ASP.NET permiten encapsular la funcionalidad de varios controles de servidor en una unidad. Los controles de usuario constan de uno o varios controles de servidor ASP.NET (controles Button, TextBox, etc.) junto con cualquier código necesario para que los controles realicen la función deseada. El control de usuario también puede incluir propiedades o métodos personalizados que revelan la funcionalidad del control de usuario a un contenedor, que normalmente es una página ASP.NET.

En este tutorial, creará un control de usuario ASP.NET que actúa como control selector. El control selector tiene dos listas con un conjunto de opciones en una lista (el origen). Los usuarios pueden seleccionar elementos en la lista SourceList y, a continuación, agregar elementos a la lista TargetList.

Este tutorial tiene las tres partes siguientes:

  • En la primera parte, creará el control de usuario básico y agregará controles y código.

  • En la segunda parte, creará una nueva página ASP.NET (la página host) y, a continuación, agregará el control de usuario a la página ASP.NET.

  • En la tercera parte, agregará propiedades y métodos personalizados al control de usuario para poder interactuar con el control desde la página host.

Entre las tareas ilustradas en este tutorial se incluyen las siguientes:

  • Crear un control de usuario y agregar controles de servidor ASP.NET al control de usuario.

  • Crear propiedades y un método en el control de usuario.

  • Agregar un control de usuario a una página host.

  • Agregar código a la página host para administrar el control de usuario.

Requisitos previos

Para poder completar este tutorial, necesitará lo siguiente:

  • Herramienta de desarrollo Web Microsoft Visual Web Developer.

  • Microsoft .NET Framework.

En este tutorial se da por supuesto que tiene conocimientos generales del trabajo en Visual Web Developer. Para obtener una introducción, vea Tutorial: Crear una página Web básica en Visual Web Developer.

Crear el sitio Web

Si ya ha creado un sitio Web en Visual Web Developer (por ejemplo, siguiendo los pasos que se describen en Tutorial: Crear una página Web básica en Visual Web Developer), puede utilizar ese sitio Web y pasar a la siguiente sección. De lo contrario, cree un sitio Web y una página nuevos siguiendo estos pasos.

Para crear un sitio Web del sistema de archivos

  1. Abra Visual Web Developer.

  2. En el menú Archivo, elija Nuevo y, a continuación, haga clic en Sitio Web.

    Aparece el cuadro de diálogo Nuevo sitio Web.

  3. En Plantillas instaladas de Visual Studio, haga clic en Servicio Web ASP.NET.

  4. En el cuadro Ubicación situado más a la derecha, escriba el nombre de la carpeta dónde desea guardar las páginas del sitio Web.

    Por ejemplo, escriba el nombre de carpeta C:\WebSites.

  5. En la lista Lenguaje, haga clic en el lenguaje de programación con el que prefiera trabajar.

  6. Haga clic en Aceptar.

    Visual Web Developer crea la carpeta y una nueva página denominada Default.aspx.

Crear el control de usuario

Crear un control de usuario es similar a crear una página Web ASP.NET. De hecho, un control de usuario es efectivamente un subconjunto de una página ASP.NET e incluye la mayoría de los tipos de elementos que se pueden colocar en una página ASP.NET.

Para crear un control de usuario

  1. En el Explorador de soluciones, haga clic con el botón secundario del mouse en el nombre del sitio Web y, a continuación, seleccione Agregar nuevo elemento.

  2. En el cuadro de diálogo Agregar nuevo elemento <Ruta de acceso>, en Plantillas instaladas de Visual Studio, haga clic en Control de usuario Web.

  3. En el cuadro Nombre, escriba ListPicker.

    El archivo de control de usuario tendrá una extensión .ascx, que se agrega automáticamente a ListPicker.

  4. En la lista Lenguaje, seleccione el lenguaje de programación con el que prefiera trabajar.

  5. Haga clic en Agregar.

    Se crea el nuevo control y se abre en el diseñador. El formato del control es similar al de una página, con una excepción importante: no hay una directiva @ Page en la parte superior de la página. Sí hay una directiva @ Control, que identifica el archivo como un control de usuario ante ASP.NET.

Agregar controles de servidor al control de usuario

En esta parte del tutorial, agregará los controles que componen la interfaz del control de usuario.

Para agregar controles de servidor

  1. Pase a la vista Diseño. (Si está trabajando con una página de código subyacente, cambie al control ListPicker.ascx y después a la vista Diseño).

  2. En el menú Tabla, haga clic en Insertar tabla.

  3. Utilice el cuadro de diálogo Insertar tabla para crear una tabla con una fila y tres columnas, y después, haga clic en Aceptar.

    Está creando la tabla que contendrá los controles; es decir, una tabla de diseño.

  4. En la tabla, en la columna izquierda, escriba Available y, a continuación, presione ENTRAR para crear una nueva línea.

  5. En la columna derecha, escriba Selected y, a continuación, presione ENTRAR para crear una nueva línea.

  6. En el grupo Estándar del Cuadro de herramientas, arrastre los controles siguientes a la tabla y establezca sus propiedades como se indica.

    Control

    Propiedades

    Arrastre un control ListBox a la columna izquierda y colóquelo bajo Available.

    Height: 200px

    ID: SourceList

    Width: 200px

    Arrastre un control Button a la columna central.

    ID: AddAll

    Text: >>

    Arrastre un control Button a la columna central.

    ID: AddOne

    Text: (BARRA ESPACIADORA)>(BARRA ESPACIADORA)

    Arrastre un control Button a la columna central.

    ID: Remove

    Text: (BARRA ESPACIADORA)X(BARRA ESPACIADORA)

    Arrastre un control ListBox a la columna izquierda y colóquelo bajo Selected.

    Height: 200px

    ID: TargetList

    Width: 200px

    Se pueden utilizar controles ImageButton en lugar de controles Button para que se muestre una imagen que responde a los clics del mouse. Sin embargo, para este tutorial, es suficiente utilizar texto que emule el tipo de gráfico que se suele emplear para indicar Agregar todo, Agregar y Quitar, que son dos corchetes angulares a la derecha (>>), un corchete angular a la derecha (>) y X, respectivamente.

  7. Si lo desea, ajuste el ancho y alto de las columnas de la tabla como prefiera.

  8. Haga clic en la lista SourceList y, a continuación, en Propiedades haga clic en el botón de puntos suspensivos (…) correspondiente a la propiedad Items.

    Aparecerá el cuadro de diálogo Editor de la colección de ListItem.

  9. Haga clic en Agregar tres veces para agregar tres elementos.

  10. Para el primer, segundo y tercer elemento, bajo Propiedades de ListItem, establezca Texto como A, B y C, respectivamente.

    Por ahora, va a crear datos de prueba. Más adelante en el tutorial, en "Agregar propiedades y métodos personalizados al control de usuario", quitará los datos de prueba y agregará código para cargar dinámicamente la lista SourceList.

Agregar código para controlar las selecciones de los usuarios

Los usuarios seleccionarán elementos mediante los botones que están en la columna central de la tabla. Por consiguiente, la mayor parte del código del control está en controladores de eventos Click.

Para agregar el código que controla las selecciones de los usuarios

  1. En la vista Diseño, haga doble clic en el botón >> (AddAll) para crear un controlador de eventos para el evento Click y, a continuación, agregue el código resaltado siguiente.

    Protected Sub AddAll_Click(ByVal sender As Object, _
        ByVal e As EventArgs) Handles AddAll.Click
   TargetList.SelectedIndex = -1   Dim li As ListItem   For Each li In SourceList.Items      AddItem(li)   Next
End Sub

    protected void AddAll_Click(object sender, EventArgs e)
{
    TargetList.SelectedIndex = -1;    foreach(ListItem li in SourceList.Items)    {        AddItem(li);    }
}

    El código recorre todos los elementos de la lista SourceList. En cada elemento, llama al método AddItem y le pasa el elemento actual. Más adelante en este procedimiento, escribirá el código para el método AddItem.

  2. Cambie a la vista Diseño, haga doble clic en el botón > (AddOne) para crear un controlador de eventos para el evento Click y, a continuación, agregue el código resaltado siguiente:

    Protected Sub AddOne_Click(ByVal sender As Object, _
       ByVal e As EventArgs) Handles AddOne.Click
   If SourceList.SelectedIndex >= 0 Then      AddItem(SourceList.SelectedItem)   End If
End Sub

    protected void AddOne_Click(object sender, EventArgs e)
{
    if(SourceList.SelectedIndex >= 0)    {        AddItem(SourceList.SelectedItem);    }
}

    Este código comprueba en primer lugar si se ha seleccionado un elemento en la lista SourceList. En tal caso, el código llama al método AddItem, que escribirá más adelante en este procedimiento, y le pasa el elemento actualmente seleccionado en la lista SourceList.

  3. Cambie a la vista Diseño, haga doble clic en el botón X (Remove) para crear un controlador de eventos para el evento Click y, a continuación, agregue el código resaltado siguiente:

    Protected Sub Remove_Click(ByVal sender As Object, _
      ByVal e As EventArgs) Handles Remove.Click
   If TargetList.SelectedIndex >= 0 Then     TargetList.Items.RemoveAt(TargetList.SelectedIndex)     TargetList.SelectedIndex = -1   End If
End Sub

    protected void Remove_Click(object sender, EventArgs e)
{
    if (TargetList.SelectedIndex >= 0)    {        TargetList.Items.RemoveAt(TargetList.SelectedIndex);        TargetList.SelectedIndex = -1;      }
}

    El código comprueba en primer lugar si se ha seleccionado un elemento en la lista TargetList. En tal caso, el código quita el elemento seleccionado de la lista y cancela la selección.

  4. Agregue el método AddItem siguiente:

    Protected Sub AddItem(ByVal li As ListItem)
   TargetList.SelectedIndex = -1
   TargetList.Items.Add(li)
End Sub

    protected void AddItem(ListItem li)
{
    TargetList.SelectedIndex = -1;
    TargetList.Items.Add(li);
}

    Este código agrega incondicionalmente un elemento a la lista TargetList. Más adelante en este tutorial, en "Agregar propiedades y métodos personalizados al control de usuario", mejorará este código agregando la opción de determinar si puede haber duplicados.

Un control de usuario no se puede probar directamente porque tiene que estar hospedado en una página. En la sección siguiente, creará una página Web ASP.NET donde podrá trabajar con el control.

Utilizar el control de usuario

Como cualquier control, un control de usuario se debe hospedar en una página. En esta parte del tutorial, creará una página host para el control y, a continuación, agregará un control de usuario a la página.

Para crear una página host

  1. En el Explorador de soluciones, haga clic con el botón secundario del mouse en el nombre del sitio Web y, a continuación, seleccione Agregar nuevo elemento.

  2. En Plantillas instaladas de Visual Studio, haga clic en Web Forms.

  3. En el cuadro Nombre, escriba HostUserControl.

  4. En la lista Lenguaje, seleccione el lenguaje con el que prefiere trabajar y, a continuación, haga clic en Agregar.

    La nueva página aparece en el diseñador.

Para agregar el control de usuario a la página

  1. Cambie a la vista Diseño.

  2. En el Explorador de soluciones, arrastre el archivo de control de usuario (ListPicker.ascx) a la página.

    Nota:

    Asegúrese de que está en la vista Diseño cuando arrastra ListPicker.ascx a la página.

    El control aparece en el diseñador.

  3. Cambie a la vista Código fuente.

    Al colocar el control de usuario, se crean dos nuevos elementos en la página:

    • En la parte superior de la página hay una nueva directiva @ Register que tiene una apariencia similar a lo siguiente:

      <%@ Register Src="ListPicker.ascx" TagName="ListPicker"
   TagPrefix="uc1" %>

      Se requiere la directiva @ Register porque el control de usuario es un componente externo. Los valores que están en la directiva proporcionan la información necesaria para que ASP.NET encuentre el control cuando compile y ejecute la página. Los atributos TagPrefix y TagName juntos especifican cómo se declara el control de usuario en la página. El atributo Src especifica el archivo y, si es necesario, la ruta de acceso donde está ubicado el archivo de código fuente.

    • El segundo nuevo elemento es el control de usuario, que tiene una apariencia similar a lo siguiente:

      <uc1:ListPicker id="ListPicker1" Runat="server" />

      El elemento para un control de usuario es similar al elemento para un control de servidor ASP.NET normal. La diferencia consiste en que el control de usuario tiene un prefijo de etiqueta diferente (uc1) y un nombre de etiqueta único (ListPicker). Aunque la directiva @ Registerestablece automáticamente los valores cuando el control de usuario se coloca en la página, se puede utilizar cualquier prefijo de etiqueta y nombre de etiqueta para el control de usuario, siempre y cuando los valores no se utilicen ya en la página.

Probar el control de usuario

Ahora, puede probar la versión preliminar del control de usuario.

Para probar el control de usuario

  1. Presione CTRL+F5 para ejecutar la página.

    La página aparece en el explorador con las dos listas y tres botones que constituyen su control de usuario.

  2. Haga clic en el botón >> (AddAll).

    Todos los valores de la lista SourceList se copian en la lista TargetList.

  3. Haga clic en cada elemento de la lista TargetList, de uno en uno, y luego haga clic en el botón X (Remove) hasta que haya quitado todos los elementos.

  4. Seleccione un valor único en la lista SourceList y, a continuación, haga clic el botón > (AddOne).

    El valor único se copia en la lista TargetList.

  5. Si lo desea, experimente más con el control hasta que esté seguro de que funciona como esperaba.

  6. Cuando finalice, cierre el explorador.

Agregar propiedades y métodos personalizados al control de usuario

Ahora, el control de usuario funciona, pero no es todavía útil como un control de uso general. Una versión más práctica del control de usuario le permitiría hacer lo siguiente:

  • Especificar una lista de elementos que se mostrarán dinámicamente en la lista SourceList.

  • Obtener la lista de elementos que el usuario ha seleccionado en la lista TargetList.

  • Especificar opcionalmente si desea permitir valores duplicados en la lista TargetList.

  • Proporcionar a los usuarios una manera de borrar rápidamente todos los elementos de la lista TargetList.

La realización de estas tareas requiere que la página host pueda comunicarse con el control de usuario para compartir valores (establecer y leer propiedades) y emitir comandos (llamar a métodos). En esta parte del tutorial, cambiará el control de usuario y le agregará algunos miembros (propiedades y métodos).

Agregará dos propiedades al control de usuario. La primera propiedad recupera todos los elementos que están en la lista TargetList. La segunda propiedad permite especificar si la lista TargetList acepta valores duplicados. Más adelante en esta sección, agregará un método que le permitirá rellenar la lista SourceList.

Para agregar el código que define las propiedades personalizadas

  1. Para el control ListPicker, abra o cambie al archivo de código fuente.

  2. Utilice el código siguiente para crear la propiedad SelectedItems:

    Public ReadOnly Property SelectedItems() As ListItemCollection
   Get
      Return TargetList.Items
   End Get
End Property

    public ListItemCollection SelectedItems
{
   get { return TargetList.Items ; }
}

    La propiedad SelectedItems recupera los valores que están en la lista TargetList. Puede ser de sólo lectura, porque nunca tendrá que establecer los valores de la lista TargetList mediante programación.

  3. Utilice el código siguiente para crear la propiedad AllowDuplicates:

    Public Property AllowDuplicates() As Boolean
   Get
      Return CType(ViewState("allowDuplicates"), Boolean)
   End Get
   Set(ByVal value As Boolean)
      ViewState("allowDuplicates") = value
   End Set
End Property

    public Boolean AllowDuplicates
{
    get
    {
        return (Boolean)ViewState["allowDuplicates"];
    }
    set
    {
        ViewState["allowDuplicates"] = value;
    }
}

    La propiedad AllowDuplicates es de lectura y escritura. El valor de la propiedad AllowDuplicates se debe guardar explícitamente en Ver estado para que se conserve entre recorridos de ida y vuelta. (La propiedad SelectedItems no tiene que guardarse explícitamente en Ver estado porque la lista TargetList guarda los valores en Ver estado.)

Ahora tiene las propiedades definidas. Sin embargo, todavía debe modificar el código existente en el control de usuario para aprovechar el valor de la propiedad AllowDuplicates.

Para modificar el código existente para utilizar la propiedad AllowDuplicates

  • Busque el método AddItem que escribió en la sección "Agregar código para controlar las selecciones de los usuarios", anteriormente en este tutorial, y reemplace el contenido por el siguiente código resaltado:

    Protected Sub AddItem(ByVal li As ListItem)
   TargetList.Selectedindex = -1   If Me.AllowDuplicates = True Then      TargetList.Items.Add(li)   Else      If TargetList.Items.FindByText(li.Text) Is Nothing Then         TargetList.Items.Add(li)      End If   End If
End Sub

    protected void AddItem(ListItem li)
{
    TargetList.SelectedIndex = -1;    if (this.AllowDuplicates == true)    {        TargetList.Items.Add(li);    }    else    {        if (TargetList.Items.FindByText(li.Text) == null)        {            TargetList.Items.Add(li);        }    }
}

    El código realiza la misma función que antes (agrega un elemento a la lista TargetList), pero ahora también comprueba si la propiedad AllowDuplicate está establecida en true. Si la propiedad AllowDuplicate se establece en true, el elemento se agrega. Si la propiedad AllowDuplicate se establece en false, el código busca un elemento existente que tenga el mismo valor que el nuevo elemento propuesto y, a continuación, agrega el nuevo elemento si no encuentra ningún elemento existente.

Como va a establecer el contenido de la lista SourceList utilizando una propiedad, puede quitar los datos de prueba que introdujo en "Agregar controles de servidor al control de usuario", anteriormente en este tutorial.

Para quitar los datos de prueba de la lista SourceList

  1. Cambie a la vista Diseño.

  2. Haga clic en el control SourceList y, a continuación, en Propiedades haga clic en el botón de puntos suspensivos (…) correspondiente a Items.

    Aparecerá el Editor de la colección de ListItem.

  3. Haga clic en el botón Quitar para eliminar cada elemento de ejemplo y, a continuación, haga clic en Aceptar.

Agregar un método al control de usuario

También puede agregar métodos que realicen tareas en el control de usuario cuando el código llame a métodos de la página host. Para mostrar esto, en este tutorial, agregará dos métodos. Se puede llamar al primer método para agregar elementos a la lista SourceList. El segundo método borra el contenido de la lista TargetList.

Para agregar un método que borre la lista TargetList

  1. Utilice el código siguiente para agregar el método AddSourceItem:

    Public Sub AddSourceItem(ByVal sourceItem As String)
    SourceList.Items.Add(sourceItem)
End Sub

    public void AddSourceItem(String sourceItem)
{
    SourceList.Items.Add(sourceItem);
}

  2. Utilice el código siguiente para agregar el método ClearAll:

    Public Sub ClearAll()
    SourceList.Items.Clear()
    TargetList.Items.Clear()
End Sub

    public void ClearAll()
{
    SourceList.Items.Clear();
    TargetList.Items.Clear();
}

  3. En el menú Archivo, haga clic en Guardar todo para guardar los cambios que realizó en el control de usuario.

Probar las propiedades y el método del control de usuario

La tarea final de este tutorial es mejorar la página host para poder compartir los valores con el control de usuario. Puede establecer algunas de las propiedades del control de usuario mediante declaración. (No puede establecer el contenido de la lista SourceList utilizando directamente el código de este tutorial, pero puede establecerlo mediante programación.) En este procedimiento, establecerá la propiedad AllowDuplicates en un valor predeterminado de true.

Para establecer las propiedades del control de usuario mediante declaración

  1. Cambie a la página HostUserControl.aspx o ábrala.

  2. En la vista Código fuente, establezca AllowDuplicates mediante declaración utilizando una sintaxis similar a la siguiente:

    <uc1:ListPicker id="ListPicker1" Runat="server"
    AllowDuplicates="true" />

    Observe que obtiene la funcionalidad de Microsoft IntelliSense para AllowDuplicates.

Trabajar con el control de usuario mediante programación

También puede trabajar mediante programación con el control de usuario y establecer o recuperar propiedades y llamar a métodos. Para ver cómo trabajar mediante programación con el control de usuario, agregará algunos controles a la página host.

Para trabajar mediante programación con el control de usuario

  1. Cambie a la vista Diseño.

  2. En el grupo Estándar del Cuadro de herramientas, arrastre los controles siguientes a la tabla en la página host y establezca las propiedades como se indica.

    Control

    Propiedades

    TextBox

    ID: NewItem

    Text: (vacío)

    Button

    ID: AddItem

    Text: Add Item

    Button

    ID: LoadFiles

    Text: File List

    Button

    ID: ClearSelection

    Text: Clear All

    CheckBox

    AutoPostBack: True

    Checked: True

    ID: AllowDuplicates

    Text: Allow duplicates

    Button

    ID: ShowSelection

    Text: Show Selection

    Label

    ID: Selection

    Text: (vacío)

  3. En la vista Diseño, haga doble clic en AllowDuplicates a fin de crear un controlador para el evento CheckedChanged y, a continuación, agregue el código resaltado siguiente:

    Protected Sub AllowDuplicates_CheckedChanged( _
ByVal sender As Object, _
ByVal e As EventArgs) Handles AllowDuplicates.CheckedChanged
    ListPicker1.AllowDuplicates = AllowDuplicates.Checked
End Sub

    protected void AllowDuplicates_CheckedChanged(Object sender, EventArgs e)
{
    ListPicker1.AllowDuplicates = AllowDuplicates.Checked;
}

  4. Cambie a la vista Diseño, haga doble clic en AddItem a fin de crear un controlador para el evento Click y, a continuación, agregue el código resaltado siguiente:

    Protected Sub AddItem_Click(ByVal sender As Object, _
ByVal e As EventArgs) Handles AddItem.Click
    Dim sourceItem As String = Server.HtmlEncode(NewItem.Text)    ListPicker1.AddSourceItem(sourceItem)
End Sub

    protected void AddItem_Click(object sender, EventArgs e)
{
    ListPicker1.AddSourceItem(Server.HtmlEncode(NewItem.Text));
}

    El código crea una colección ListItemCollection en el código y la rellena con datos de ejemplo. A continuación, el código establece la propiedad SourceItems en la colección.

  5. Cambie a la vista Diseño, haga doble clic en LoadFiles a fin de crear un controlador para el evento Click y, a continuación, agregue el código resaltado siguiente:

    Protected Sub LoadFiles_Click(ByVal sender As Object, _
ByVal e As EventArgs) Handles LoadFiles.Click
   Dim path As String = Server.MapPath(Request.ApplicationPath)   Dim files() As String = System.IO.Directory.GetFiles(path)   Dim filename As String   For Each filename in Files      ListPicker1.AddSourceItem(filename)   Next
End Sub

    protected void LoadFiles_Click(object sender, EventArgs e)
{
   String path = Server.MapPath(Request.ApplicationPath);   String[] files = System.IO.Directory.GetFiles(path);   foreach(String filename in files)   {      ListPicker1.AddSourceItem(filename);   }
}

    Este código es similar al código de AddItem, excepto en que agrega una lista de archivos al directorio raíz del sitio Web.

  6. Cambie a la vista Diseño, haga doble clic en ShowSelection a fin de crear un controlador para el evento Click y, a continuación, agregue el código resaltado siguiente:

    Protected Sub ShowSelection_Click(ByVal sender As Object, _
      ByVal e As EventArgs) Handles ShowSelection.Click
   Dim lItem As ListItem   Dim selectedItemsString As String = ""   For Each lItem in ListPicker1.SelectedItems      selectedItemsString &= "<br>" & lItem.Text   Next   Selection.Text = selectedItemsString
End Sub

    protected void ShowSelection_Click(object sender, EventArgs e)
{
   String selectedItemsString = "";   foreach(ListItem lItem in ListPicker1.SelectedItems)   {      selectedItemsString += "<br>" + lItem.Text;   }   Selection.Text = selectedItemsString;
}

    Este código recupera un objeto que se muestra como un objeto ListItemCollection, lee todos los elementos de la colección y, a continuación, muestra los resultados en Selection.

  7. Cambie a la vista Diseño, haga doble clic en ClearSelection a fin de crear un controlador para el evento Click y, a continuación, agregue el código resaltado siguiente:

    Protected Sub ClearSelection_Click(ByVal sender As Object, _
ByVal e As EventArgs) Handles ClearSelection.Click
   ListPicker1.ClearAll()
End Sub

    protected void ClearSelection_Click(object sender, EventArgs e)
{
   ListPicker1.ClearAll();
}

    Este código invoca al método ClearAll para que el control de usuario quite todos los elementos de TargetList.

Probar los controles de usuario terminados

Ahora, puede probar su control de usuario acabado.

Para probar el control de usuario

  1. Presione CTRL+F5 para ejecutar la página.

  2. En el cuadro de texto, escriba un valor y haga clic en Add Item.

  3. Repita el paso 2 varias veces, hasta que tenga una selección de elementos en el control de usuario.

  4. Utilice los botones para seleccionar uno o más de los elementos de origen en la lista SourceList y, a continuación, agréguelos a la lista TargetList.

  5. Haga clic en Show Selection.

    Los elementos de lista TargetList se muestran en Selection.

  6. Haga clic en Clear All.

  7. Haga clic en Lista de archivos.

    La lista SourceList ahora muestra una lista de nombres de archivo.

  8. En el control de usuario, haga clic en Add para agregar varios elementos a la lista TargetList.

  9. Intente agregar a la lista TargetList un elemento que ya esté en la misma.

    Se agrega el valor duplicado.

  10. Desactive la casilla Allow duplicates y, a continuación, intente agregar duplicados de nuevo.

    Esta vez, los duplicados no se agregan a la lista TargetList.

  11. Haga clic en Show Selection.

    La lista de elementos de TargetList se muestra en la página host.

Pasos siguientes

Aunque el control que ha creado no es muy complejo, le ha permitido ver una gran parte de la funcionalidad básica que se puede integrar en un control de usuario. Refinar el control es mayormente una cuestión de revelar propiedades y métodos adicionales que mejoren lo que se puede hacer con el control. Los miembros adicionales podrían incluir lo siguiente:

  • Propiedades de apariencia.

    Puede crear propiedades de control de usuario que permitan a un usuario establecer el fondo, tamaño de la lista, etc., del control.

    Nota:

    De forma predeterminada, el control de usuario utiliza el tema actual que se aplica a los controles secundarios. Por ejemplo, si tiene una máscara definida para un control Button, los botones del control de usuario se muestran con esa máscara.

  • Propiedades de datos.

    Puede agregar propiedades que permitan al control de usuario utilizar una gran variedad de datos para mostrar en la lista SourceList. Por ejemplo, podría agregar propiedades para establecer un conjunto de datos, tabla de datos y campo de visualización de la información.

  • Funcionalidad.

    Puede agregar al control de usuario más botones y código que permitan a los usuarios no sólo copiar elementos de la lista SourceList a la lista TargetList, sino también mover elementos; por ejemplo, cuando se quita un elemento de la lista SourceList, se mueve a la lista TargetList. Entonces, el control podría tener botones que muevan de nuevo los datos de la lista TargetList a la lista SourceList.

Vea también

Tareas

Cómo: Convertir páginas de formularios Web Forms en controles de usuario ASP.NET

Conceptos

Información general sobre los controles de usuario ASP.NET

Información general sobre las amenazas para la seguridad de las aplicaciones Web