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

GridView ASP.Net & CSS

Que tal amig@s después de unos días de no publicar, hoy me he dado un tiempo para escribir a cerca del control GridView del ASP.Net,  un control que tal vez es el de los más utilizados cuando se trabaja con la manipulación de datos en los sistemas informáticos, en el entorno de desarrollo de Visual Studio es muy fácil agregar un GridView obteniendo la funcionalidad en cuestión de segundos, podemos elegir diseños de colores predeterminados para que luzcan una mejor apariencia, pero para mi gusto son muy estáticos y no son tan llamativos para el usuario llegando a tal punto que podrían resultar aburridos.

Para darle dinamismo y que el usuario tenga una mejor experiencia cuando trabaja con un sistema es posible implementar código CSS para lograr nuestro objetivo.

¿Como lo haremos? 
Bueno, si miramos el código que HTML que se genera de un GridView nos daremos cuenta que en realidad se transforma en una tabla HTML estándar.

<tableborder="1" cellspacing="0" id="GridView1" rules="all" style="border-collapse: collapse;">
<tbody>
<tr><th scope="col">ID</th><th scope="col">Nombre</th><th scope="col">ApellidoPaterno</th><th scope="col">ApellidoMaterno</th><th scope="col">FechaNacimiento</th><th scope="col">Sexo</th><th scope="col">Seleccionar</th></tr>
<tr class="GridRowOdd"><td>000001</td><td>Nomnbre 1</td><td>Apellido Paterno 1</td><td>Apellido Materno 1</td><td>Fecha 1</td><td>S1</td><td align="center"><a href="javascript:__doPostBack('GridView1','Select$0')">Seleccionar</a></td></tr>
<tr class="GridRowEven"><td>000002</td><td>Nomnbre 2</td><td>Apellido Paterno 2</td><td>Apellido Materno 2</td><td>Fecha 2</td><td>S2</td><td align="center"><a href="javascript:__doPostBack('GridView1','Select$1')">Seleccionar</a></td></tr>
<tr class="GridRowOdd"><td>000003</td><td>Nomnbre 3</td><td>Apellido Paterno 3</td><td>Apellido Materno 3</td><td>Fecha 3</td><td>S3</td><td align="center"><a href="javascript:__doPostBack('GridView1','Select$2')">Seleccionar</a></td></tr>
<tr class="GridRowEven"><td>000004</td><td>Nomnbre 4</td><td>Apellido Paterno 4</td><td>Apellido Materno 4</td><td>Fecha 4</td><td>S4</td><td align="center"><a href="javascript:__doPostBack('GridView1','Select$3')">Seleccionar</a></td></tr>
<tr class="GridRowOdd"><td>000005</td><td>Nomnbre 5</td><td>Apellido Paterno 5</td><td>Apellido Materno 5</td><td>Fecha 5</td><td>S5</td><td align="center"><a href="javascript:__doPostBack('GridView1','Select$4')">Seleccionar</a></td></tr>
</tbody>
</table>

GridView antes de implementar CSS.

Obtener el RGB de un Pixel

Hace tiempo charlando con un amigo sobre programación y diseño web me hizo una pregunta que se me pareció muy interesante, aunque debo aclarar que no le di la mejor respuesta en ese momento, después de despedirnos me puse a investigar un poco y concluí con una respuesta mas idónea:

Esta es la charla que me hubiera gustado tener, dando una respuesta de 10, jejejeje.

Mi Amigo: ¿Oye Markinho como puedo saber el código RGB (Rojo, Verde, Azul) de un área de una imagen?

Yo: Bueno, Obtener el RGB de un pixel de un imagen es relativamente fácil  puedes hacerlo con un sin numero de programillas, pero te voy a a dar un tip que está al alcance de todos.

Mi Amigo: Haber explícame, ¿como lo hago entonces?.

Yo: "Tu Calmado y yo Tranquilo" que ahora mismo te explicare, si quieres obtener el código RGB y ademas quieres saber el H,S,V (Hue=Matiz, Saturation=Saturación, Value=Valor que viene siendo la Luminosidad) de un pixel especifico, entonces puedes utilizar el mismísimo Microsoft Paint realizando lo siguiente:

1. Abre la imagen de la cual quieres obtener los valores RGB.
2. Selecciona el Selector de Color de la barra de herramientas.
3. Haz click sobre el área de la cual deseas obtener el RGB.
4. Selecciona Editar Colores de la Barra de Herramientas Colores.
5. ¡Listo!, te muestra los valores RGB que necesitas.

Mi Amigo: Oye ciertamente obtenemos el RGB, pero veo que muestra solo valores decimales y si lo necesito en Hexadecimal ya no me sirve tu tip entonces.

Yo: "Calma muchacho", recuerda que "Todo problema tiene al menos una posible solución", claro que es posible obtener el valor Hexadecimal  solo tienes que realizar una conversión de valores, misma que puedes realiza r accediendo a la pagina html-color-codes.info con la que puedes obtener la información requerida, si esa no te convence aquí te dejo otro link de conversión de RGB Decimal a Hexadecimal.

Estilos CSS para Snippets

Como en mi primer post incluí fragmentos de códigos (snippets) formateados con CSS, seguramente mas de uno se preguntará ¿Como se puede lograr eso?, pues como creí que seria un buen tema para abordar, le dejo la manera de como hacerlo.

Aquí te dejo el link de como añadir paso a paso SyntaxHighlighter en nuestro Bloggger.

Aquí les dejo el link de rferencia para las Extensiones de SyntaxHighlighter.

'Hola Mundo VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
  Response.Write("¡Hola Mundo!")
End Sub

Ejemplo: Implementación con SyntaxHighlighter.

Si de plano no quieres editar el código de tu blog aqui te dejo un link que te genera los estilos implícitamente.

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
  Response.Write("¡Hola Mundo!")
End Sub

Ejemplo: Implementación con Online syntax highlighting.

Para los que se pregunten ¿Que es un Snippet? he aquí la respuesta:

Snippet (Programación): Es un término del idioma inglés utilizado en programación para referirse a pequeñas partes re-utilizables de código fuente, código binario o texto. Comúnmente son definidos como unidades o métodos funcionales que se pueden integrar fácilmente en módulos mucho más grandes, aportando mayor funcionalidad.