Agregar elementos estáticos y resultados mediante Visual C# desde el enlace de datos a un control DropDownList

  • Artículo
  • Tiempo de lectura: 4 minutos

En este artículo se muestra cómo agregar elementos estáticos y elementos enlazados a datos a un control DropDownList. El ejemplo de este artículo rellena un control DropDownList con un elemento inicial.

Versión original del producto:   Visual C #
Número de KB original:   312489

Requisitos

En la lista siguiente se describen el hardware y el software recomendados que necesita:

  • Microsoft Windows
  • .NET Framework
  • Visual Studio .NET
  • Internet Information Services (IIS)
  • SQL Server

En este artículo se hace referencia al siguiente espacio de nombres .NET Framework biblioteca de clases System.Data.SqlClient.

Uso de Visual C# para crear una aplicación web ASP.NET

Para crear una nueva aplicación web ASP.NET denominada DDLSample, siga estos pasos:

  1. Abra Visual Studio .NET.
  2. En el menú Archivo, seleccione Nuevo y luego Proyecto.
  3. En el cuadro de diálogo Nuevo Project, seleccione Proyectos de Visual C# en Tipos de Project y, a continuación, seleccione ASP.NET aplicación web en Plantillas.
  4. En el cuadro Ubicación , reemplace WebApplication1 en la dirección URL predeterminada por DDLSample. Si usa el servidor local, puede dejar el nombre del servidor como http://localhost para que el cuadro Ubicación muestre http://localhost/DDLSample.

Creación del ejemplo

En los pasos siguientes, se crea una página .aspx que contiene un control DropDownList. El control DropDownList está enlazado a las columnas de la Authors tabla de la base de datos SQL Server Pubs.

  1. Para agregar un formulario web al proyecto, siga estos pasos:

    1. Haga clic con el botón derecho en el nodo del proyecto en Explorador de soluciones, seleccione Agregary, a continuación, seleccione Agregar formulario web.
    2. Asigne a la página .aspx el nombre DropDown.aspx y, a continuación, seleccione Abrir.

  2. Asegúrese de que la página está abierta en la vista Diseño del editor. Agregue un control DropDownList a la página. En el panel Propiedades , cambie el identificador del control a AuthorList.

  3. Agregue un control Label a la página después del control DropDownList. En el panel Propiedades , cambie el identificador del control a CurrentItem.

  4. Agregue un control Button a la página después del control Label. En el panel Propiedades , cambie el identificador del control a GetItem y, a continuación, cambie la propiedad Text a Obtener elemento.

  5. Haga clic con el botón derecho en la página y, a continuación, seleccione Ver código. Se abre el archivo de clase de código subyacente en el editor.

  6. Agregue el System.Data.SqlClient espacio de nombres al archivo de clase de código subyacente para que el código de ejemplo funcione correctamente. La lista completa de espacios de nombres debe aparecer como se indica a continuación.

    using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;

  7. Agregue el código siguiente al Page_Load evento.

    private void Page_Load (object sender, System.EventArgs e)
{
    if (!IsPostBack)
    {
        SqlConnection myConn = new SqlConnection (
            "Server=localhost;Database=Pubs;Integrated Security=SSPI");
        SqlCommand myCmd = new SqlCommand (
            "SELECT au_id, au_lname FROM Authors", myConn);
        myConn.Open ();
        SqlDataReader myReader = myCmd.ExecuteReader ();

        //Set up the data binding.
        AuthorList.DataSource = myReader;
        AuthorList.DataTextField = "au_lname";
        AuthorList.DataValueField = "au_id";
        AuthorList.DataBind ();

        //Close the connection.
        myConn.Close ();
        myReader.Close ();

        //Add the item at the first position.
        AuthorList.Items.Insert (0, "<-- Select -->");
    }
}

    Para usar La seguridad integrada en la cadena de conexión, cambie el archivo deWeb.config de la aplicación y establezca el impersonate atributo del elemento de identity configuración en true, como se muestra en el ejemplo siguiente.

    <configuration>
    <system.web>
        <identity impersonate="true" />
    </system.web>
</configuration>

    Para obtener más información, consulte suplantación de ASP.NET.

  8. Modifique la cadena de conexión según corresponda para su entorno.

  9. Cambie a la vista Diseño en el editor de la página .aspx. Haga doble clic en GetItem. Agregue el código siguiente al GetItem_Click evento en el archivo de clase de código subyacente.

    private void GetItem_Click (object sender, System.EventArgs e)
{
    string itemText = AuthorList.SelectedItem.Text;
    string itemValue = AuthorList.SelectedItem.Value;
    CurrentItem.Text = string.Format (
        "Selected Text is {0}, and Value is {1}", itemText, itemValue);
}

  10. En el menú Archivo , seleccione Guardar todo para guardar el formulario web y otros archivos de proyecto asociados.

  11. En el menú Compilar del entorno de desarrollo integrado (IDE) de .NET Visual Studio, seleccione Compilar para compilar el proyecto.

  12. En Explorador de soluciones, haga clic con el botón derecho en la página .aspx y, a continuación, seleccione Ver en el explorador. Observe que la página se abre en el explorador y que el cuadro de lista desplegable se rellena con los datos iniciales.

  13. Seleccione un elemento en el cuadro de lista desplegable. Observe que el control CurrentItem Label muestra el elemento seleccionado. Además, observe que la lista conserva la posición actual y la entrada estática.

Solución de problemas

  • Debe colocar el código para agregar el elemento estático a la ListItem colección del control después del código de enlace de datos. Si no agrega el código en este orden, la lista se vuelve a crear con el código de enlace de datos, que sobrescribe la entrada estática.
  • El código de ejemplo comprueba la IsPostBack propiedad para evitar que se vuelva a crear la lista. Además, este código comprueba IsPostBack si se conserva el elemento seleccionado en la posición actual de la lista entre los recorridos de ida y vuelta al servidor.

Referencias