Compartir a través de

Recorra y examine los valores del control CheckBox en una columna DataGrid mediante ASP.NET y Visual Basic .NET

En este artículo se describe cómo recorrer en bucle cada fila de un control DataGrid de ASP.NET y cómo determinar si se ha seleccionado el control de servidor ASP.NET CheckBox que se usa para identificar la fila.

Versión original del producto: Visual Basic
Número de KB original: 321881

Resumen

El código de ejemplo de este artículo usa la base de datos Northwind de Microsoft SQL Server para rellenar el control DataGrid y, a continuación, agrega un control de servidor CheckBox a la columna inicial de cada fila. Se trata de una técnica común que permite a los usuarios seleccionar varias filas específicas en dataGrid.

En este artículo se hace referencia a los siguientes espacios de nombres de la biblioteca de clases de .NET Framework:

  • System.Data.SqlClient
  • System.Text

Requisitos

  • Windows
  • .NET Framework
  • Servicios de Internet Information Server (IIS)
  • Visual Studio .NET

Creación de una aplicación web de ASP.NET mediante Visual Basic .NET

  1. Inicie 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 Basic en Tipos de proyecto y, a continuación, seleccione ASP.NET Aplicación web en Plantillas.
  4. En el cuadro Ubicación , reemplace el nombre predeterminado de WebApplication# por MyWebApp. Si usa el servidor local, puede dejar el nombre del servidor como http://localhost. El cuadro Ubicación resultante aparece como http://localhost/MyWebApp.

Creación de la página de formulario web de ejemplo

  1. Agregue un nuevo formulario web a la aplicación web de ASP.NET de la siguiente manera:

    1. Haga clic con el botón derecho en el nodo del proyecto en Explorador de soluciones, seleccione Agregar y, a continuación, haga clic en Agregar formulario web.
    2. En el cuadro Nombre , escriba MySample.aspx y seleccione Abrir.

  2. En la ventana Propiedades , cambie la propiedad pageLayout del documento a FlowLayout. Aunque no tiene que hacerlo para usar el código de ejemplo, esto hará que la presentación aparezca más limpia.

  3. Agregue un dataGrid, un botón y un control de servidor Label a la página de la siguiente manera:

    1. Arrastre un ASP.NET control de servidor DataGrid desde el cuadro de herramientas de Web Forms a la página.
    2. En la ventana Propiedades , cambie el identificador del control DataGrid a DemoGrid.
    3. Arrastre un control de servidor ASP.NET Button desde el cuadro de herramientas de Web Forms a la página debajo de DataGrid.
    4. En la ventana Propiedades , cambie el identificador del control Button a GetSelections y, a continuación, cambie la propiedad Text a Obtener selecciones.
    5. Arrastre un control de servidor Etiqueta ASP.NET desde el cuadro de herramientas de Formularios Web Forms a la página situada debajo del control Botón.
    6. En la ventana Propiedades , cambie el identificador del control Etiqueta a ResultsInfo y, a continuación, elimine cualquier texto de la propiedad Text .

  4. Cambie a la vista HTML en el editor. Agregue el código a la plantilla de DataGrid predeterminada para construir las columnas. El código resultante para el control debe aparecer de la siguiente manera:

    <asp:DataGrid id="DemoGrid" runat="server" DataKeyField="CustomerID">
    <Columns>
        <asp:TemplateColumn HeaderText="Customer">
            <ItemTemplate>
                <asp:CheckBox ID="myCheckbox" Runat="server" />
            </ItemTemplate>
        </asp:TemplateColumn>
    </Columns>
</asp:DataGrid>

  5. Haga clic con el botón derecho en la página y, a continuación, haga clic en Ver código. Se abre el archivo de clase de código subyacente en el editor. Agregue las siguientes referencias de espacio de nombres al archivo de clase de código subyacente:

    Imports System.Data.SqlClient
Imports System.Text

  6. Reemplace el código existente para el Page_Load controlador de eventos por el código siguiente:

    Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
   If Not IsPostBack Then
      'Create a SqlConnection object.
      'Modify the connection string as necessary for your environment.
      Dim cn As SqlConnection = New SqlConnection("Server=localhost;database=Northwind;UID=sa;PWD=")
      Dim cmd As SqlCommand = New SqlCommand("SELECT * FROM Customers", cn)
      cn.Open()
      Dim reader As SqlDataReader = cmd.ExecuteReader()
      DemoGrid.DataSource = reader
      DataBind()
      reader.Close()
      cn.Close()
   End If
End Sub

  7. Cambie a la vista Diseño y, a continuación, haga doble clic en GetSelections. Se abre el archivo de clase de código subyacente en el editor. Reemplace el código existente en el GetSelections_Click controlador de eventos por el código siguiente:

    Private Sub GetSelections_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles GetSelections.Click
    Dim rowCount As Integer = 0
    Dim gridSelections As StringBuilder = New StringBuilder()'Loop through each DataGridItem, and determine which CheckBox controls
    'have been selected.
    Dim DemoGridItem As DataGridItem
    For Each DemoGridItem In DemoGrid.Items

        Dim myCheckbox As CheckBox = CType(DemoGridItem.Cells(0).Controls(1), CheckBox)
        If myCheckbox.Checked = True Then
            rowCount += 1
            gridSelections.AppendFormat("The checkbox for {0} was selected<br>", _
            DemoGrid.DataKeys(DemoGridItem.ItemIndex).ToString())
        End If
    Next
    gridSelections.Append("<hr>")
    gridSelections.AppendFormat("Total number selected is: {0}<br>", rowCount.ToString())
    ResultsInfo.Text = gridSelections.ToString()
End Sub

Comprobación de que funciona

  1. En el menú Archivo , haga clic en Guardar todo para guardar el formulario web y otros archivos asociados al proyecto.

  2. En el menú Compilar del entorno de desarrollo integrado (IDE) de Visual Studio .NET, haga clic en Compilar solución.

  3. En Explorador de soluciones, haga clic con el botón derecho en la página Formulario web (MySample.aspx) y, a continuación, haga clic en Ver en el explorador. Observe que la página muestra los datos en la cuadrícula. Además, aparece una casilla en la primera columna de cada fila. El usuario puede hacer clic para activar esta casilla para marcar filas específicas.

  4. Haga clic para seleccionar algunas de las casillas de las filas y, a continuación, haga clic en Obtener selecciones.

    Después de que la página realice un recorrido de ida y vuelta al servidor y ejecute el código en el GetSelections_Click controlador de eventos, aparecerá una lista de los elementos seleccionados en el paso anterior. El código del GetSelections_Click controlador de eventos recorre en bucle cada uno de los DataGridItem controles de servidor de ASP.NET DataGrid, determina si la propiedad Checked del control CheckBox relacionado es true y, a continuación, registra el valor de clave asociado en esa posición específica de DataGrid DataKeys .

Referencias