¿Cómo se utiliza el control ComboBox? (C#)
de Microsoft
ComboBox es un control ASP.NET de AJAX que combina la flexibilidad de un TextBox con una lista de opciones para que los usuarios puedan elegir.
El objetivo de este tutorial es explicar el control ComboBox del kit de herramientas de control de AJAX. ComboBox funciona como una combinación entre un control DropDownList estándar de ASP.NET y un control de TextBox. Puede seleccionar entre una lista preexistente de elementos o escribir un nuevo elemento.
ComboBox es similar al extensor de control AutoComplete, pero los controles se usan en diferentes escenarios. El extensor AutoComplete consulta un servicio web para obtener posibles coincidencias. El control ComboBox, en cambio, se inicializa con un conjunto de elementos. El uso del extensor AutoComplete tiene sentido cuando se trabaja con un gran conjunto de datos (p. ej., millones de piezas de automóvil), mientras que utilizar el control ComboBox tiene sentido al trabajar con un pequeño conjunto de datos (p. ej., docenas de piezas de automóvil).
Selección de una lista estática de elementos
Comencemos con un ejemplo sencillo de uso del control ComboBox. Suponga que desea mostrar una lista estática de elementos en una lista desplegable. Sin embargo, desea dejar abierta la posibilidad de que la lista no esté completa. Quiere permitir que un usuario escriba un valor personalizado en la lista.
Crearemos una nueva página ASP.NET Web Forms y usaremos el control ComboBox en la página. Agregue la nueva página ASP.NET al proyecto y cambie a la vista de diseño.
Si desea usar el control ComboBox en la página, debe agregarle un control ScriptManager. Arrastre el control ScriptManager que se encuentra bajo la pestaña de extensiones de AJAX a la superficie del diseñador. Debe agregar el control ScriptManager en la parte superior de la página; puede agregarlo justo debajo de la etiqueta de <formulario> del lado servidor de apertura.
A continuación, arrastre el control ComboBox a la página. Puede encontrar el control ComboBox en el cuadro de herramientas con los demás controles y extensores de control del kit de herramientas de control de AJAX (véase la figura 1).
Figura 01: Selección del control ComboBox en el cuadro de herramientas (haga clic para ver la imagen en tamaño completo)
Utilizaremos el control ComboBox para mostrar una lista estática de opciones. El usuario puede seleccionar cuán picante desea que esté su comida entre tres niveles: suave, medio o picante (véase la figura 2).
Figura 02: Selección de una lista estática de elementos (haga clic para ver la imagen en tamaño completo)
Hay dos maneras de agregar estas opciones al control ComboBox. En primer lugar, pase el mouse sobre el control en la vista de diseño para seleccionar la opción de tarea «Editar opciones» y abra el editor de elementos (véase la figura 3).
Figura 03: Edición de elementos ComboBox (haga clic para ver la imagen en tamaño completo)
La segunda opción es agregar la lista de elementos entre las etiquetas <asp:ComboBox> de apertura y de cierre en la vista de origen. La página de la lista 1 contiene el ComboBox actualizado que tiene la lista de elementos.
Lista 1: Static.aspx
<%@ Page Language="C#" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void btnSubmit_Click(object sender, EventArgs e)
{
lblSelection.Text = "You picked " + ComboBox1.SelectedItem.Text;
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Static</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
Describe how spicy you like your food:
<br />
<cc1:ComboBox ID="ComboBox1" runat="server">
<asp:ListItem Text="Mild" Value="0" />
<asp:ListItem Text="Medium" Value="1" />
<asp:ListItem Text="Hot" Value="2" />
</cc1:ComboBox>
<asp:Button
ID="btnSubmit"
Text="Submit"
Runat="server" OnClick="btnSubmit_Click" />
<hr />
<asp:Label
ID="lblSelection"
Runat="server" />
</div>
</form>
</body>
</html>
Al abrir la página de la lista 1, puede seleccionar una de las opciones preexistentes en el ComboBox. En otras palabras, ComboBox funciona igual que un control DropDownList.
Sin embargo, también tiene la opción de escribir una nueva opción (por ejemplo, muy picante) que no esté en la lista existente. Así pues, ComboBox también funciona como un control de TextBox.
Independientemente de si elige un elemento ya existente o escribe un elemento personalizado, al enviar el formulario, su elección aparece en el control de etiqueta. Al enviar el formulario, el controlador de btnSubmit_Click ejecuta y actualiza la etiqueta (véase la figura 4).
Figura 04: Mostrar el elemento seleccionado (haga clic para ver la imagen en tamaño completo)
ComboBox admite las mismas propiedades que el control DropDownList para recuperar el elemento seleccionado después de enviar un formulario:
- SelectedItem.Text: muestra el valor de la propiedad Text del elemento seleccionado.
- SelectedItem.Value: muestra el valor de la propiedad Value del elemento seleccionado o muestra el texto escrito en el ComboBox.
- SelectedValue: igual que SelectedItem.Value, salvo que esta propiedad permite especificar el elemento seleccionado predeterminado (inicial).
Si escribe una opción personalizada en el ComboBox, esta se asigna a las propiedades SelectedItem.Text y SelectedItem.Value.
Selección de lista de elementos desde una base de datos
Puede recuperar la lista de elementos que muestra ComboBox a partir de una base de datos. Por ejemplo, puede enlazar ComboBox a un control SqlDataSource, un control ObjectDataSource, LinqDataSource o EntityDataSource.
Suponga que desea mostrar una lista de películas en un ComboBox. Quiere recuperar la lista a partir de la tabla de base de datos Movies. Siga estos pasos:
- Crear una página denominada Movies.aspx
- Agregue un control ScriptManager a la página arrastrándolo desde debajo de la pestaña de extensiones de AJAX, en el cuadro de herramientas, hasta la página.
- Agregue un control ComboBox arrastrándolo hasta la página.
- En la vista de diseño, pase el mouse sobre el control ComboBox y seleccione la opción Elegir origen de datos (véase la figura 5). Se abrirá el asistente para la configuración de orígenes de datos.
- En el paso Elegir un origen de datos, seleccione la opción <Nuevo origen de datos>.
- En el paso Elegir un tipo de origen de datos, seleccione «Base de datos».
- En el paso Elegir la conexión de datos, seleccione la base de datos (por ejemplo, MoviesDB.mdf).
- En el paso Guardar la cadena de conexión en el archivo de configuración de la aplicación, seleccione la opción para guardar la cadena de conexión.
- En el paso Configurar la instrucción de selección, seleccione la tabla de base de datos Movies y seleccione todas las columnas.
- En el paso Consulta de prueba, haga clic en el botón «Finalizar».
- De nuevo en el paso Elegir origen de datos, seleccione la columna de título para el campo que desee mostrar y la columna de identificación para el campo de datos (véase la figura).
- Haga clic en el botón «Aceptar» para cerrar el asistente.
Figura 05: Selección de un origen de datos (haga clic para ver la imagen en tamaño completo)
Figura 06: Selección de los campos de texto y valor de datos (haga clic para ver la imagen en tamaño completo)
Una vez completados los pasos anteriores, el ComboBox queda enlazado a un control SqlDataSource que representa las películas de la tabla de base de datos Movies. El origen de la página es similar a la lista 2 (con el formato ligeramente depurado).
Lista 2: Movies.aspx
<%@ Page Language="C#" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<br />
Select your favorite movie:
<br />
<cc1:ComboBox
ID="ComboBox1"
DataSourceID="SqlDataSource1"
DataTextField="Title"
DataValueField="Id"
MaxLength="0"
runat="server" >
</cc1:ComboBox>
<asp:SqlDataSource
ID="SqlDataSource1"
ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT * FROM [Movies]"
runat="server">
</asp:SqlDataSource>
</div>
</form>
</body>
</html>
Observe que el control ComboBox tiene una propiedad DataSourceID que apunta al control SqlDataSource. Al abrir la página en un explorador, se muestra la lista de películas de la base de datos (véase la figura 7). Puede elegir una película de la lista o introducir una película nueva escribiéndola en el ComboBox.
Figura 07: Mostrar una lista de películas (haga clic para ver la imagen en tamaño completo)
Configuración de DropDownStyle
Puede usar la propiedad DropDownStyle de ComboBox para cambiar el comportamiento de este control. Esta propiedad acepta tres posibles valores:
- DropDown (valor predeterminado): ComboBox muestra una lista desplegable al hacer clic en la flecha y permite escribir un valor personalizado.
- Simple: ComboBox muestra automáticamente una lista desplegable y se puede introducir un valor personalizado.
- DropDownList:, ComboBox funciona igual que un control DropDownList.
La diferencia entre DropDown y Simple radica en el momento en que se muestra la lista de elementos. En el caso de Simple, la lista se muestra inmediatamente al desplazar el foco al ComboBox. En el caso de DropDown, es preciso hacer clic en la flecha para ver la lista de elementos.
El valor DropDownList hace que el control ComboBox funcione igual que un control DropDownList estándar, pero con una diferencia importante: las versiones anteriores de Internet Explorer muestran un control DropDownList con un índice z infinito, para que el control aparezca delante de cualquier control colocado delante de él. Dado que ComboBox representa una etiqueta HTML <div> en lugar de una etiqueta HTML de <selección>, ComboBox respeta correctamente el orden z.
Configuración de AutoCompleteMode
La propiedad AutoCompleteMode de ComboBox se utiliza para especificar lo que sucede cuando se escribe texto en el ComboBox. Esta propiedad acepta los siguientes valores posibles:
- None (valor predeterminado): ComboBox no ofrece la función de autocompletar.
- Suggest: ComboBox muestra la lista y resalta el elemento coincidente de la misma (véase la figura 8).
- Append: ComboBox no muestra la lista y anexa el elemento coincidente de la misma a lo que se ha escrito (véase la figura 9).
- SuggestAppend: ComboBox muestra la lista y también anexa el elemento coincidente de la misma a lo que se ha escrito (véase la figura 10).
Figura 08: ComboBox propone una sugerencia (haga clic para ver la imagen en tamaño completo)
Figura 09: ComboBox anexa texto coincidente (haga clic para ver la imagen en tamaño completo)
Figura 10: ComboBox propone y anexa (haga clic para ver la imagen en tamaño completo)
Resumen
En este tutorial, ha aprendido a usar el control ComboBox para mostrar un conjunto fijo de elementos. Hemos enlazado el control ComboBox a un conjunto estático de elementos y a una tabla de base de datos. Finalmente, ha aprendido a modificar el comportamiento del ComboBox mediante la configuración de sus propiedades DropDownStyle y AutoCompleteMode.
Comentarios
Próximamente: A lo largo de 2024 iremos eliminando gradualmente GitHub Issues como mecanismo de comentarios sobre el contenido y lo sustituiremos por un nuevo sistema de comentarios. Para más información, vea: https://aka.ms/ContentUserFeedback.
Enviar y ver comentarios de