Tecnología

Inicio

Cómo seleccionar un elemento de una caja de abajo para caer y mostrar los resultados en el cuadro de lista

Los cuadros de lista y cuadros desplegables son sólo algunos de los controles que usted puede encontrar en una página Web ASP.NET. ASP.NET es un lenguaje de desarrollo de Microsoft. Permite a los desarrolladores crear potentes aplicaciones Web de forma rápida utilizando el entorno de codificación de Visual Studio. Cuadros desplegables son herramientas ideales para la visualización de grandes cantidades de información en una pequeña cantidad de espacio. Los usuarios simplemente hacen clic en un cuadro desplegable y seleccionar un elemento de una amplia gama de opciones. Mediante la adición de un controlador de eventos para el cuadro desplegable, puede copiar un valor seleccionado en un cuadro de lista.

Instrucciones

Agregar controles de formulario Web

1 Lanzar Microsoft Visual Studio. Haga clic en el botón "Archivo" y luego en "Nuevo sitio web."

2 Haga clic en "Visual C #" para resaltarlo y, haga doble clic en "Sitio Web ASP.NET" para crear un proyecto de sitio web. El código de una página Web predeterminado denominado "Default.aspx" aparece en la ventana de código.

3 Haga clic en el botón de "Diseño" en la parte inferior de la ventana para cambiar a la vista de diseño. Este punto de vista le permite colocar los controles en el formulario web utilizando la caja de herramientas.

4 Haga clic en "Ver" y luego haga clic en "caja de herramientas" para mostrar el cuadro de herramientas. Busque el control "DropDownList" y haga doble clic en él. Aparecerá en el formulario web. Estudio nombres visuales it "DropDownList1". Microsoft llamadas "cuadros desplegables DropDownLists" en Visual Studio.

5 Volver a la caja de herramientas y haga doble clic en el control "ListBox" para colocarlo en el formulario. Estudio nombres visuales it "Listbox1". El control "ListBox" es equivalente al cuadro de lista que se ve en HTML normal.

modificar Código

6 Pulse la tecla "F7" para ver la ventana de C # de código del formulario Web.

7 Busque el método de "Load" dentro de esa ventana de código. Pega el siguiente texto dentro de ese método:

DropDownList1.AutoPostBack = true;

DropDownList1.Items.Add ( "artículo");

DropDownList1.Items.Add ( "artículo");

DropDownList1.Items.Add ( "artículo");

Esta primera línea de código establece la propiedad AutoPostBack del control DropDownList a "true". Esto es importante debido a que el control necesita comunicarse con el servidor web cada vez que un usuario selecciona un nuevo elemento de la control. Las siguientes tres líneas añaden nuevos elementos al control DropDownList.

8 Pulse la tecla "Shift" + "F7" para volver a la vista de diseño.

9 Haga clic en el control DropDownList y seleccione "Propiedades" para abrir la ventana "Propiedades". Esta ventana le permite configurar las propiedades y los controladores de eventos para el DropDownList.

10 Haga clic en el símbolo de un rayo en la parte superior de la ventana "Propiedades". Haga doble clic en el elemento "SelectedIndexChanged". La ventana de código se abre y muestra el método que se ejecuta cada vez que se seleccione un nuevo elemento en el control DropDownList. Reemplazar ese código con el siguiente código:

protected void DropDownList1_SelectedIndexChanged (remitente del objeto, EventArgs e)

{

cadena selectedItem = DropDownList1.SelectedItem.ToString ();

ListBox1.Items.Add (selectedItem);

}

La variable denominada "selectedItem" mantiene el valor del elemento que un usuario selecciona desde el control DropDownList. La siguiente sentencia añade que el punto al control ListBox utilizando el método de "Añadir".

11 Pulse la tecla "F5" para ejecutar el proyecto. Su navegador se abrirá y mostrará la página Web.

12 Haga clic en el control DropDownList y seleccione uno de los elementos. Su acción hará que el código se ejecute y copiar ese elemento al control ListBox.

Consejos y advertencias

  • Cuando se pulsa la tecla "F5" para ejecutar el proyecto, Visual Studio podría preguntar si le gustaría para que pueda modificar el archivo "web.config" del proyecto. Haga clic en "Sí" si ves ese mensaje. Esto permite que la aplicación utilizando la función predeterminada web.config.