Agregar una columna GridView de casillas de verificación (VB)

de Scott Mitchell

Descargar PDF

En este tutorial se examina cómo agregar una columna de casillas a un control GridView para proporcionar al usuario una manera intuitiva de seleccionar varias filas de GridView.

Introducción

En el tutorial anterior hemos examinado cómo agregar una columna de botones de radio a GridView con el fin de seleccionar un registro determinado. Una columna de botones de radio es una interfaz de usuario adecuada cuando el usuario está limitado a elegir como máximo un elemento de la cuadrícula. Sin embargo, en ocasiones, es posible que deseemos permitir al usuario elegir un número arbitrario de elementos de la cuadrícula. Por ejemplo, los clientes de correo electrónico basados en web muestran la lista de mensajes con una columna de casillas. El usuario puede seleccionar un número arbitrario de mensajes y, a continuación, realizar alguna acción, como mover los correos electrónicos a otra carpeta o eliminarlos.

En este tutorial veremos cómo agregar una columna de casillas y cómo determinar qué casillas se activaron en postback. En concreto, crearemos un ejemplo que imita estrechamente la interfaz de usuario del cliente de correo electrónico basado en web. En nuestro ejemplo se incluirá una clase GridView paginada en la que se enumeran los productos de la Products tabla de base de datos con una casilla en cada fila (vea la figura 1). Un botón Eliminar productos seleccionados, al hacer clic en ellos, eliminará esos productos seleccionados.

Figura 1: Cada fila de producto incluye una casilla (haga clic para ver la imagen de tamaño completo)

Paso 1: Añadir un GridView paginado que muestra información del producto

Antes de preocuparnos de agregar una columna de casillas, primero nos centraremos en enumerar los productos en un GridView que admita la paginación. Para empezar, abra la CheckBoxField.aspx página en la carpeta EnhancedGridView y arrastre GridView desde el cuadro de herramientas hasta el Diseñador, estableciendo su ID en Products. A continuación, elija enlazar GridView a un nuevo ObjectDataSource denominado ProductsDataSource. Configure ObjectDataSource para usar la ProductsBLL clase , llamando al GetProducts() método para devolver los datos. Puesto que gridView será de solo lectura, establezca las listas desplegables en las pestañas UPDATE, INSERT y DELETE en (Ninguno).

Figura 2: Crear un nuevo objetoDataSource denominado ProductsDataSource (haga clic para ver la imagen de tamaño completo)

Figura 3: Configurar objectDataSource para recuperar datos mediante el método (GetProducts() imagen de tamaño completo)

Figura 4: Establecer las listas de Drop-Down en las pestañas UPDATE, INSERT y DELETE en (Ninguno) (Haga clic para ver la imagen de tamaño completo)

Después de completar el Asistente para configurar los orígenes de datos, Visual Studio creará automáticamente BoundColumns y CheckBoxColumn para los campos de datos relacionados con el producto. Como hicimos en el tutorial anterior, elimine todo excepto los ProductName, CategoryName, y UnitPrice BoundFields, y cambie las HeaderText propiedades a Producto, Categoría y Precio. Configure el BoundField UnitPrice para que su valor esté en formato de moneda. Configure también GridView para admitir la paginación activando la casilla Habilitar paginación desde la etiqueta inteligente.

Vamos a agregar también la interfaz de usuario para eliminar los productos seleccionados. Agregue un control de botón Web debajo del GridView, estableciendo su propiedad ID a DeleteSelectedProducts y la propiedad Text a Eliminar productos seleccionados. En lugar de eliminar realmente los productos de la base de datos, en este ejemplo solo mostraremos un mensaje que indica los productos que se habrían eliminado. Para dar cabida a esto, agregue un control Web etiqueta debajo del botón. Establezca su identificador en DeleteResults, desactive su Text propiedad y establezca sus Visible propiedades y EnableViewState en False.

Después de realizar estos cambios, el marcado declarativo GridView, ObjectDataSource, Button y Label deben ser similares a los siguientes:

<p>
    <asp:GridView ID="Products" runat="server" AutoGenerateColumns="False" 
        DataKeyNames="ProductID" DataSourceID="ProductsDataSource" 
        AllowPaging="True" EnableViewState="False">
        <Columns>
            <asp:BoundField DataField="ProductName" HeaderText="Product" 
                SortExpression="ProductName" />
            <asp:BoundField DataField="CategoryName" HeaderText="Category" 
                ReadOnly="True" SortExpression="CategoryName" />
            <asp:BoundField DataField="UnitPrice" DataFormatString="{0:c}" 
                HeaderText="Price" HtmlEncode="False" 
                SortExpression="UnitPrice" />
        </Columns>
    </asp:GridView>
    <asp:ObjectDataSource ID="ProductsDataSource" runat="server" 
        OldValuesParameterFormatString="original_{0}" 
        SelectMethod="GetProducts" TypeName="ProductsBLL">            
    </asp:ObjectDataSource>
</p>
<p>
    <asp:Button ID="DeleteSelectedProducts" runat="server" 
        Text="Delete Selected Products" />
</p>
<p>
    <asp:Label ID="DeleteResults" runat="server" EnableViewState="False" 
        Visible="False"></asp:Label>
</p>

Dedique un momento a ver la página en un explorador (vea la figura 5). En este punto debería ver el nombre, la categoría y el precio de los diez primeros productos.

Figura 5: El nombre, la categoría y el precio de los primeros diez productos se muestran (haga clic para ver la imagen de tamaño completo)

Paso 2: Agregar una columna de casillas

Dado que ASP.NET 2.0 incluye un CheckBoxField, podría pensarse que podría usarse para agregar una columna de casillas a gridView. Desafortunadamente, no es así, ya que CheckBoxField está diseñado para trabajar con un campo de datos booleano. Es decir, para usar checkBoxField, debemos especificar el campo de datos subyacente cuyo valor se consulta para determinar si la casilla representada está activada. No se puede usar CheckBoxField para incluir simplemente una columna de casillas desactivadas.

En su lugar, debemos agregar un TemplateField y agregar un control web CheckBox a su ItemTemplate. Vaya adelante y agregue un TemplateField al Products GridView y colóquelo como el primer campo (a la izquierda). En la etiqueta inteligente de GridView, haga clic sobre el enlace Editar plantillas y luego arrastre un control Web CheckBox desde la Caja de herramientas a ItemTemplate. Establezca la propiedad ID de este CheckBox a ProductSelector.

Figura 6: Agregar un control web CheckBox denominado ProductSelector a templateField s ItemTemplate (haga clic para ver la imagen de tamaño completo)

Con el control Web TemplateField y CheckBox agregados, cada fila ahora incluye una casilla. En la figura 7 se muestra esta página, cuando se ve a través de un explorador, después de agregar TemplateField y CheckBox.

Figura 7: Cada fila de producto ahora incluye una casilla (haga clic para ver la imagen de tamaño completo)

Paso 3: Determinar qué casillas se activaron en postback

En este punto tenemos una columna de casillas, pero no hay forma de determinar qué casillas se activaron en postback. Sin embargo, cuando se hace clic en el botón Eliminar productos seleccionados, es necesario saber qué casillas se activaron para eliminar esos productos.

La propiedad GridView s Rows proporciona acceso a las filas de datos de GridView. Podemos recorrer en iteración estas filas, acceder mediante programación al control CheckBox y, a continuación, consultar su Checked propiedad para determinar si se ha seleccionado checkBox.

Cree un controlador de eventos para el DeleteSelectedProducts evento button Web control s Click y agregue el código siguiente:

Protected Sub DeleteSelectedProducts_Click(sender As Object, e As EventArgs) _
    Handles DeleteSelectedProducts.Click
    
    Dim atLeastOneRowDeleted As Boolean = False
    ' Iterate through the Products.Rows property
    For Each row As GridViewRow In Products.Rows
        ' Access the CheckBox
        Dim cb As CheckBox = row.FindControl("ProductSelector")
        If cb IsNot Nothing AndAlso cb.Checked Then
            ' Delete row! (Well, not really...)
            atLeastOneRowDeleted = True
            ' First, get the ProductID for the selected row
            Dim productID As Integer = _
                Convert.ToInt32(Products.DataKeys(row.RowIndex).Value)
            ' "Delete" the row
            DeleteResults.Text &= String.Format( _
                "This would have deleted ProductID {0}<br />", productID)
            '... To actually delete the product, use ...
            ' Dim productAPI As New ProductsBLL
            ' productAPI.DeleteProduct(productID)
            '............................................
        End If
    Next
    ' Show the Label if at least one row was deleted...
    DeleteResults.Visible = atLeastOneRowDeleted
End Sub

La Rows propiedad devuelve una colección de instancias que forman las filas de datos del GridViewRow GridView. El For Each bucle aquí enumera esta colección. Para cada objeto GridViewRow, se accede programáticamente al CheckBox de la fila utilizando row.FindControl("controlID"). Si el CheckBox está marcado, se recupera el valor de la fila correspondiente de la colección ProductID. En este ejercicio, simplemente mostramos un mensaje informativo en la etiqueta DeleteResults, aunque en una aplicación en funcionamiento, haríamos una llamada al método de la clase ProductsBLLDeleteProduct(productID).

Con la adición de este controlador de eventos, al hacer clic en el botón Eliminar productos seleccionados ahora se muestran los ProductID de los productos seleccionados.

Figura 8: Cuando se hace clic en el botón Eliminar productos seleccionados, se muestran los productos ProductID seleccionados (haga clic para ver la imagen de tamaño completo).

Paso 4: Agregar botones de seleccionar todo y deseleccionar todo

Si un usuario desea eliminar todos los productos de la página actual, debe activar cada una de las diez casillas. Podemos ayudar a acelerar este proceso agregando un botón Comprobar todo que, cuando se hace clic, selecciona todas las casillas de la cuadrícula. Un botón Desactivar todo sería igualmente útil.

Agregue dos controles Web de botón a la página, colocándolos encima de GridView. Establezca el primero en IDCheckAll y su propiedad Text en "Seleccionar todo"; establezca el segundo en IDUncheckAll y su propiedad Text en "Deseleccionar todo".

<asp:Button ID="CheckAll" runat="server" Text="Check All" />
 
<asp:Button ID="UncheckAll" runat="server" Text="Uncheck All" />

A continuación, cree un método en la clase del código subyacente denominada ToggleCheckState(checkState), que, cuando se invoca, enumere la colección Products del GridView Rows y establezca cada propiedad Checked de CheckBox al valor del parámetro checkState que se le haya pasado.

Private Sub ToggleCheckState(ByVal checkState As Boolean)
    ' Iterate through the Products.Rows property
    For Each row As GridViewRow In Products.Rows
        ' Access the CheckBox
        Dim cb As CheckBox = row.FindControl("ProductSelector")
        If cb IsNot Nothing Then
            cb.Checked = checkState
        End If
    Next
End Sub

A continuación, cree Click controladores de eventos para los CheckAll botones y UncheckAll . En el controlador de eventos de CheckAll, simplemente llame a ToggleCheckState(True); en UncheckAll, llame a ToggleCheckState(False).

Protected Sub CheckAll_Click(sender As Object, e As EventArgs) _
    Handles CheckAll.Click
    
    ToggleCheckState(True)
End Sub
Protected Sub UncheckAll_Click(sender As Object, e As EventArgs) _
    Handles UncheckAll.Click
    
    ToggleCheckState(False)
End Sub

Con este código, al hacer clic en el botón 'Check All', se produce un postback y se comprueban todas las casillas de verificación en el GridView. Del mismo modo, al hacer clic en Desactivar todas las casillas, se anula la selección de todas las casillas. La figura 9 muestra la pantalla después de activar el botón Comprobar todo.

Figura 9: Al hacer clic en la casilla Comprobar todos los botones, se seleccionan todas las casillas (haga clic para ver la imagen de tamaño completo)

Nota:

Cuando se muestra una columna de casillas de verificación, un enfoque para seleccionar o anular la selección de todas las casillas de verificación es a través de una casilla de verificación en la fila de encabezado. Además, la implementación actual Check All /Uncheck All requiere un postback. Las casillas se pueden marcar o desmarcar completamente a través del script del lado del cliente, lo cual proporciona una experiencia de usuario más ágil. Para explorar el uso de una casilla de fila de encabezado para Seleccionar todo y Deseleccionar todo en detalle, junto con una explicación sobre el uso de técnicas del lado cliente, consulta Seleccionar todas las casillas en un control GridView utilizando Client-Side Script y una casilla de verificación para Seleccionar todo.

Resumen

En los casos en los que necesite permitir que los usuarios elijan un número arbitrario de filas de gridView antes de continuar, agregar una columna de casillas es una opción. Como vimos en este tutorial, incluir una columna de casillas en GridView implica agregar un TemplateField con un control Web CheckBox. Mediante el uso de un control web (frente a insertar marcado directamente en la plantilla, como lo hicimos en el tutorial anterior), ASP.NET recuerda automáticamente cuáles Casillas de verificación estaban seleccionadas y cuáles no al realizar un postback. También podemos acceder mediante programación a las Casillas de verificación en el código para determinar si está activada una casilla determinada o cambiar el estado comprobado.

En este tutorial y en el último se examina cómo agregar una columna selector de filas a GridView. En nuestro siguiente tutorial examinaremos cómo, con un poco de trabajo, podemos agregar funcionalidades de inserción a GridView.

¡Feliz programación!

Acerca del autor

Scott Mitchell, autor de siete libros de ASP/ASP.NET y fundador de 4GuysFromRolla.com, ha estado trabajando con tecnologías web de Microsoft desde 1998. Scott trabaja como consultor independiente, entrenador y escritor. Su último libro es Sams Teach Yourself ASP.NET 2.0 en 24 horas. Se le puede contactar en mitchell@4GuysFromRolla.com.

Siguiente anterior