GridView ASP.Net & CSS con Botones de Acción

Hace unos meses en la publicación GridView ASP.Net & CSS aprendimos como agregar CSS a un gridview para darle dinamismo y una presentación diferente acorde a nuestro gusto, continuando con ese ejemplo hoy veremos como agregar botones de acción en cada fila.

Pues bien amig@s, nuestro objetivo de hoy será llegar a este resultado:

GridView con Botones de Accion por cada Fila.

Nuestro codigo ASP.Net para la GridView quedaria así, notese que por cada boton agregado dentro del le asignamos las siguientes propiedades:

ToolTip="Aceptar" (Texto para mostrar el ToolTip del Botón)

CommandName="cmdAceptar" (El nombre de este comando sera referenciado en el Código de Servidor)

CommandArgument="<%# CType(Container,GridViewRow).RowIndex %>" (Obtiene o establece un parámetro opcional que se pasa al evento Command junto con la propiedad CommandName asociada)

Nuestro CSS para los botones de la GridView sera el siguiente:

/*CSS para aplicar a los ImageButton de la Gridview*/
.imgbtngv
{
    background-color:#DCDCDC; 
    border:1px solid #CCC;
    padding:4px 4px 4px 4px; 
    border-radius:4px;
    }
        
.imgbtngv:hover 
{
    background-color:#FFFFFF;
    border-radius:4px; 
}

Nuestro Codigo de Servidor quedaria de la siguiente manera, notese que en el evento RowCommand de la GridView capturamos el nombre del comando con e.CommandName, este evento se producirá cada vez que se pulse un boton de la grid:

Protected Sub GridView1_RowCommand(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewCommandEventArgs) Handles GridView1.RowCommand
    If (e.CommandName = "cmdAceptar") Then
      Dim FilaSeleccion As Integer = Convert.ToInt32(e.CommandArgument)
      Dim Dkeys As DataKey = GridView1.DataKeys(FilaSeleccion)
      Dim keyId As String = Dkeys.Values("ID").ToString

      'Aqui agregar el codigo necesario para realizar la accion correspondiente
      Literal1.Text = "Se ha Pulsado el Boton del Comando Aceptar con el ID: " & keyId.ToString()
    ElseIf (e.CommandName = "cmdEditar") Then
      Dim FilaSeleccion As Integer = Convert.ToInt32(e.CommandArgument)
      Dim Dkeys As DataKey = GridView1.DataKeys(FilaSeleccion)
      Dim keyId As String = Dkeys.Values("ID").ToString

      'Aqui agregar el codigo necesario para realizar la accion correspondiente
      Literal1.Text = "Se ha Pulsado el Boton del Comando Editar con el ID: " & keyId.ToString()
    ElseIf (e.CommandName = "cmdEliminar") Then
      Dim FilaSeleccion As Integer = Convert.ToInt32(e.CommandArgument)
      Dim Dkeys As DataKey = GridView1.DataKeys(FilaSeleccion)
      Dim keyId As String = Dkeys.Values("ID").ToString

      'Aqui agregar el codigo necesario para realizar la accion correspondiente
      Literal1.Text = "Se ha Pulsado el Boton del Comando Eliminar con el ID: " & keyId.ToString()
    End If
  End Sub

Descarga el Código Fuente: GridView ASP.Net & CSS con Botones de Acción