Tutorial: Mostrar una lista desplegable mientras se edita en el control de servidor web GridView

El control GridView muestra los cuadros de texto para editar de forma predeterminada. Puede utilizar la funcionalidad avanzada integrada del control GridView de ASP.NET para agregar una lista desplegable a la presentación de edición. Esto se puede hacer en un formulario Web Forms sin tener que escribir código detrás del formulario. Las tareas que se ilustran en este tutorial son las siguientes:

  • Configurar un control GridView para mostrar datos SQL.

  • Mostrar los datos del control GridView.

  • Mostrar una lista desplegable mientras se edita en el control GridView.

Al final del tema, encontrará una listado completo de la página que va a crear en este tutorial. Hay disponible un proyecto de Visual Studio con código fuente para complementar este tema: Download.

Para poder completar este tutorial, necesitará:

  • Tener Visual Studio o Visual Web Developer Express instalado en el equipo.

    NotaNota

    Si usa Visual Studio, en este tutorial se presupone que seleccionó la colección de configuraciones Desarrollo web la primera vez que inició Visual Studio. Para obtener más información, vea Cómo: Seleccionar configuraciones de entorno de desarrollo web.

  • SQL Server Express. Si tiene SQL Server instalado, puede usarlo, pero debe realizar pequeños ajustes en algunos procedimientos.

  • La base de datos de ejemplo Northwind intalada en el equipo. Para obtener información sobre cómo descargar e instalar la base de datos Northwind de SQL Server, vea Installing Sample Databases en el sitio web de Microsoft SQL Server.

    NotaNota

    Hay muchos métodos alternativos para conectarse a la base de datos Northwind.

En este tutorial se usa un proyecto de sitio web. No obstante, puede utilizar un proyecto de aplicación web si así lo desea. Para obtener información sobre la diferencia entre estos tipos de proyectos web, vea Proyectos de aplicación web frente a proyectos de sitio web.

Para crear un sitio web del sistema de archivos

  1. Abra Visual Studio o Visual Web Developer Express.

  2. En el menú Archivo, haga clic en Nuevo sitio Web.

    Aparece el cuadro de diálogo Nuevo sitio web.

  3. En Plantillas instaladas, haga clic en Visual Basic o VisualC# y, a continuación, seleccione Sitio web ASP.NET.

  4. En el cuadro Ubicación web, seleccione el cuadro Sistema de archivos y escriba el nombre de la carpeta en la que desea guardar las páginas del sitio web.

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

  5. Haga clic en Aceptar.

    Visual Studio crea un proyecto de sitio web que incluye funcionalidad preintegrada para el diseño (una página maestra, las páginas de contenido About.aspx y Default.aspx y una hoja de estilos en cascada), para Ajax (archivos de script de cliente) y para la autenticación (pertenencia a ASP.NET).

Para comenzar, debe crear una conexión con la base de datos de ejemplo Northwind.

Para crear una conexión a SQL Server

  1. En el Explorador de servidores, haga clic con el botón secundario en Conexiones de datos y, a continuación, haga clic en Agregar conexión. Si utiliza Visual Web Developer Express, use el Explorador de base de datos.

    Aparecerá el cuadro de diálogo Agregar conexión.

    • Si la lista Origen de datos no muestra Archivo de bases de datos de Microsoft SQL Server (SqlClient), haga clic en Cambiar, y en el cuadro de diálogo Cambiar origen de datos seleccione Archivo de bases de datos de Microsoft SQL Server (SqlClient).

    • Si aparece la página Elegir origen de datos, en la lista Origen de datos, seleccione el tipo de origen de datos que va a utilizar. Para este tutorial, el tipo de origen de datos es Microsoft SQL Server. En la lista Proveedor de datos, haga clic en Proveedor de datos de .NET Framework para servidor SQL Server y, a continuación, haga clic en Continuar.

    NotaNota

    Si la ficha Explorador de servidores no está visible en Visual Web Developer, en el menú Ver, haga clic en Explorador de servidores. Si la ficha Explorador de base de datos no se puede ver, en el menú Ver, haga clic en Explorador de base de datos.

  2. En el campo Nombre de archivo de la base de datos, escriba o vaya a la ubicación donde instaló la base de datos de ejemplo Northwind.

  3. Seleccione el archivo de base de datos Northwnd.mdf y haga clic en Abrir.

  4. Active la casilla Guardar mi contraseña.

  5. Haga clic en Probar conexión y, cuando esté seguro de que funciona, haga clic en Aceptar.

    La nueva conexión se ha creado bajo Conexiones de datos en el Explorador de servidores.

En esta parte del tutorial, rellenará dinámicamente la cuadrícula con datos.

Para habilitar la ordenación simple

  1. Abra el archivo Default.aspx o cambie a él.

  2. Cambie a la vista Diseño.

  3. En el Cuadro de herramientas, desde el grupo Datos, arrastre un control GridView hasta la página.

  4. En el menú Tareas de GridView, en el cuadro Elegir origen de datos, haga clic en <Nuevo origen de datos>.

    Aparecerá el Asistente para la configuración de orígenes de datos.

  5. Haga clic en Base de datos.

    Al hacerlo, especifica que desea obtener los datos de una base de datos que admite instrucciones SQL, lo que incluye SQL Server y otras bases de datos compatibles con OLE-DB.

  6. En el cuadro Especificar un id. para el origen de datos, aparece un nombre de control de origen de datos predeterminado, SqlDataSource1. Puede dejar este nombre.

  7. Haga clic en Aceptar.

    Se muestra el Asistente para la configuración de orígenes de datos.

  8. En el cuadro ¿Qué conexión de datos debería utilizar la aplicación para conectarse a la base de datos?, escriba la conexión que creó en la sección "Para crear una conexión a una base de datos de SQL Server" y, a continuación, haga clic en Siguiente.

    El asistente muestra una página en la que se puede almacenar la cadena de conexión en un archivo de configuración. Almacenar la cadena de conexión en el archivo de configuración tiene dos ventajas:

    • Es más seguro que almacenarla en la página.

    • Puede utilizar la misma cadena de conexión en varias páginas.

  9. Active la casilla Sí, guardar esta conexión como y haga clic en Siguiente.

    El asistente muestra una página donde se puede especificar los datos que se desea recuperar de la base de datos.

  10. En Especificar columnas de una tabla o vista, en el cuadro Nombre, haga clic en Empleados.

  11. En Columnas, active las casillas Id. de empleado, Apellido, Nombre, Fecha de contratación y Ciudad.

    El asistente muestra la instrucción SQL que está creando en un cuadro situado en la parte inferior de la página.

    NotaNota

    El asistente permite especificar criterios de selección (cláusulas WHERE) y otras opciones de consulta de SQL. En este tutorial, creará una instrucción sencilla sin opciones de selección u ordenación.

  12. Haga clic en Avanzadas, active la casilla Generar instrucciones Insert, Update y Delete y, a continuación, haga clic en Aceptar.

    Esto genera instrucciones Insert, Update y Delete para el control SqlDataSource1 en función de la instrucción Select que configuró anteriormente.

    NotaNota

    Si lo prefiere, puede crear manualmente las instrucciones seleccionando Especificar una instrucción SQL o un procedimiento almacenado personalizado y escribiendo las consultas SQL.

  13. Haga clic en Siguiente.

  14. Haga clic en Consulta de prueba para asegurarse de que recupera los datos que desea.

  15. Haga clic en Finalizar.

  16. Haga clic con el botón secundario en el control GridView y seleccione Mostrar etiqueta inteligente. En el menú Tareas de GridView, seleccione el cuadro Habilitar edición.

Ya puede probar la página.

Para probar la página

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

    Se muestra el control GridView con las columnas Id. de empleado, Apellido, Nombre, Fecha de contratación y Ciudad.

  2. Haga clic en el vínculo Editar situado junto a una fila.

    La fila seleccionada para la edición se muestra con las columnas Apellido, Nombre, Fecha de contratación y Ciudad como cuadros de texto modificables. Id. de empleado no se muestra en un cuadro de texto, porque es un campo clave y no modificable.

  3. Cambie un campo como LastName y haga clic en Actualizar.

    Se muestra el control GridView con las columnas Id. de empleado, Apellido, Nombre, Fecha de contratación y Ciudad, con Apellido actualizado con el nuevo valor.

  4. Cierre el explorador.

En esta parte del tutorial, puede agregar una lista desplegable para realizar selecciones mientras se editan las filas de la cuadrícula.

Para mostrar una lista desplegable mientras se edita

  1. Desde el nodo Datos del Cuadro de herramientas, arrastre un control SqlDataSource hasta la página.

    Se crea un nuevo control de origen de datos denominado SqlDataSource2.

  2. En el menú Tareas de SqlDataSource, seleccione Configurar origen de datos.

  3. En el cuadro ¿Qué conexión de datos debería utilizar la aplicación para conectarse a la base de datos?, escriba la conexión que creó anteriormente.

  4. Haga clic en Siguiente.

  5. En la página Configurar la instrucción Select, seleccione Especificar columnas de una tabla o vista y, a continuación, en el cuadro Nombre, haga clic en Empleados.

  6. Seleccione sólo la columna Ciudad y, a continuación, active la casilla Devolver sólo filas únicas. Haga clic en Siguiente.

  7. Haga clic en Consulta de prueba para obtener una vista previa de los datos y, a continuación, haga clic en Finalizar.

  8. Haga clic con el botón secundario en el control GridView y seleccione Mostrar etiqueta inteligente. En el menú Tareas de GridView, seleccione Editar columnas.

  9. En el cuadro de diálogo Campos, seleccione Ciudad en la lista Campos seleccionados.

  10. Haga clic en el vínculo Convertir este informe en TemplateField.

  11. Haga clic en Aceptar para cerrar el cuadro de diálogo Campos.

  12. Haga clic con el botón secundario en el control GridView y seleccione Mostrar etiqueta inteligente. En el menú Tareas de GridView, seleccione Editar plantillas.

  13. Seleccione EditItemTemplate en la lista desplegable Mostrar.

  14. Haga clic con el botón secundario en el control TextBox predeterminado de la plantilla y seleccione Eliminar para quitarlo.

  15. Desde la ficha Estándar del Cuadro de herramientas, arrastre un control DropDownList hasta la plantilla.

  16. Haga clic con el botón secundario en el control DropDownList y seleccione Mostrar etiqueta inteligente. En el menú Tareas de DropDownList, seleccione Elegirorigen de datos.

  17. Seleccione SqlDataSource2.

  18. Haga clic en Aceptar.

  19. En el menú Tareas de DropDownList, seleccione Editar DataBinding. La propiedad SelectedValue del control DropDownList está seleccionada en el cuadro de diálogo Enlace de datos.

  20. Haga clic en el botón de radio Enlace de campos y seleccione Ciudad en Enlazado con.

  21. Active la casilla enlace de datos bidireccional.

  22. Haga clic en Aceptar.

  23. Haga clic con el botón secundario en el control GridView y seleccione Mostrar etiqueta inteligente. En el menú Tareas de GridView, seleccione Terminar edición de plantilla.

    Nota de seguridadNota sobre la seguridad

    Los datos proporcionados por el usuario en una página Web de ASP.NET pueden incluir scripts de cliente malintencionados. De manera predeterminada, las páginas Web de ASP.NET validan la entrada del usuario para asegurarse de que ésta no incluye elementos HTML o de script. Siempre que esta validación esté habilitada, no tendrá que comprobar explícitamente si algún usuario está insertando scripts o elementos HTML. Para obtener más información, vea Información general sobre los ataques mediante scripts.

Ya puede probar la página.

Para probar la página

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

    Se muestra el control GridView con las columnas Id. de empleado, Apellido, Nombre, Fecha de contratación y Ciudad.

  2. Haga clic en el vínculo Editar situado junto a una fila.

    El valor de Ciudad actual está preseleccionado en la lista desplegable.

    Seleccione un valor de Ciudad diferente en la lista desplegable y haga clic en Actualizar.

    El campo Ciudad se actualiza con el valor seleccionado en la lista desplegable.

Descripción

En el ejemplo siguiente, se muestra el marcado de la página que va a crear en este tutorial.

Código


<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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 runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>

        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
            DataKeyNames="EmployeeID" DataSourceID="SqlDataSource1">
            <Columns>
                <asp:CommandField ShowEditButton="True" />
                <asp:BoundField DataField="EmployeeID" HeaderText="EmployeeID" 
                    InsertVisible="False" ReadOnly="True" SortExpression="EmployeeID" />
                <asp:BoundField DataField="LastName" HeaderText="LastName" 
                    SortExpression="LastName" />
                <asp:BoundField DataField="FirstName" HeaderText="FirstName" 
                    SortExpression="FirstName" />
                <asp:BoundField DataField="HireDate" HeaderText="HireDate" 
                    SortExpression="HireDate" />
                <asp:TemplateField HeaderText="City" SortExpression="City">
                    <EditItemTemplate>
                        <asp:DropDownList ID="DropDownList1" runat="server" 
                            DataSourceID="SqlDataSource2" DataTextField="City" DataValueField="City" 
                            SelectedValue='<%# Bind("City") %>'>
                        </asp:DropDownList>
                    </EditItemTemplate>
                    <ItemTemplate>
                        <asp:Label ID="Label1" runat="server" Text='<%# Bind("City") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
            ConnectionString="<%$ ConnectionStrings:NORTHWNDConnectionString %>" 
            DeleteCommand="DELETE FROM [Employees] WHERE [EmployeeID] = @EmployeeID" 
            InsertCommand="INSERT INTO [Employees] ([LastName], [FirstName], [HireDate], [City]) VALUES (@LastName, @FirstName, @HireDate, @City)" 
            SelectCommand="SELECT [EmployeeID], [LastName], [FirstName], [HireDate], [City] FROM [Employees]" 
            UpdateCommand="UPDATE [Employees] SET [LastName] = @LastName, [FirstName] = @FirstName, [HireDate] = @HireDate, [City] = @City WHERE [EmployeeID] = @EmployeeID">
            <DeleteParameters>
                <asp:Parameter Name="EmployeeID" Type="Int32" />
            </DeleteParameters>
            <UpdateParameters>
                <asp:Parameter Name="LastName" Type="String" />
                <asp:Parameter Name="FirstName" Type="String" />
                <asp:Parameter Name="HireDate" Type="DateTime" />
                <asp:Parameter Name="City" Type="String" />
                <asp:Parameter Name="EmployeeID" Type="Int32" />
            </UpdateParameters>
            <InsertParameters>
                <asp:Parameter Name="LastName" Type="String" />
                <asp:Parameter Name="FirstName" Type="String" />
                <asp:Parameter Name="HireDate" Type="DateTime" />
                <asp:Parameter Name="City" Type="String" />
            </InsertParameters>
        </asp:SqlDataSource>

    </div>
    <asp:SqlDataSource ID="SqlDataSource2" runat="server" 
        ConnectionString="<%$ ConnectionStrings:NORTHWNDConnectionString %>" 
        SelectCommand="SELECT DISTINCT [City] FROM [Employees]"></asp:SqlDataSource>
    </form>
</body>
</html>


Aunque este tutorial muestra cómo mostrar una lista desplegable rellena con valores de la misma columna que está enlazada al control, hay muchos métodos para rellenar una lista desplegable. Vea el ejemplo DataItem para ver cómo rellenar una lista desplegable con valores de una tabla diferente.

Adiciones de comunidad

AGREGAR
Mostrar: