Compartir a través de

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

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 System.Data.SqlClientde la biblioteca de clases de .NET Framework .

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

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

  1. Abra Visual Studio .NET.
  2. En el menú Archivo , seleccione Nuevoy haga clic en Proyecto.
  3. En el cuadro de diálogo Nuevo proyecto , seleccione Proyectos de Visual C# en Tipos de proyecto 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 para http://localhost que el cuadro Ubicación muestre http://localhost/DDLSample.

Creación del ejemplo

En los pasos siguientes, creará una página de .aspx que contiene un control DropDownList. El control DropDownList es datos enlazados a columnas de la tabla de la Authors base de datos pubs de SQL Server.

  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 Agregar y, a continuación, seleccione Agregar formulario web.
    2. Asigne un nombre al DropDown.aspx de la página .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 Etiqueta. 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 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 evento Page_Load.

    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 Integrated Security en la cadena de conexión, cambie el archivo Web.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 ASP.NET suplantación.

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

  9. Cambie a la vista Diseño del 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 Visual Studio .NET, seleccione Compilar para compilar el proyecto.

  12. En Explorador de soluciones, haga clic con el botón derecho en la página .aspx y 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 que se conserve el elemento seleccionado en la posición actual de la lista entre recorridos de ida y vuelta al servidor.

Referencias