Agregar un ID oculto en un GridView

Voy a mostrar una manera muy sencilla de ocultar, y poder mas adelante obtener, un ID en una grilla (GridView) en VS2005, ASP.NET 2.0.

Una vez agregada la GridView y seleccionado los campos (no uso campos automáticos) es elegir, por lo general la primer columna (columna 0), el template. Esto lo hacemos de esta manera:

foto1.jpg

Entonces el código de HTML nos quedaría así:

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="4"
           ForeColor="#333333" GridLines="None">
           <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
           <RowStyle BackColor="#EFF3FB" />
           <EditRowStyle BackColor="#2461BF" />
           <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
           <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
           <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
           <AlternatingRowStyle BackColor="White" />
           <Columns>
               <asp:TemplateField HeaderText="Cargo">
                   <ItemTemplate>
                       <asp:Label ID="Label1" runat="server" Text='<%# Bind("cargo") %>'></asp:Label>
                   </ItemTemplate>
               </asp:TemplateField>
               <asp:BoundField DataField="nomCom" HeaderText="Nombre" />
               <asp:ButtonField CommandName="ver" Text="Ver" />
           </Columns>
       </asp:GridView>

Dentro del Tag ItemTemplate, vamos a agregar el Label Oculto y nos va a quedar de esta manera:

<ItemTemplate>
         <asp:Label ID="lblID" runat="server" Text='<%# Bind("id") %>' Visible="false"></asp:Label>
         <asp:Label ID="Label1" runat="server" Text='<%# Bind("cargo") %>'></asp:Label>
</ItemTemplate>

A la hora de llenar la Grilla es simplemente haciendo el dataBind del objeto gridview y obviamente el dataset o datatable tiene que tener la columna ID
A la hora de obtener el ID, yo voy a mostrar el código para hacerlo tanto de Javascript como desde el Servidor.
Para el Lado del Servidor:

Uso el Buttonfield de la grilla para al seleccionarlo poder mostrar el ID.

Protected Sub GridView1_RowCommand(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewCommandEventArgs) Handles GridView1.RowCommand
      Dim idCelda As Integer = 0 'Como el ID oculto esta en la 1er celda le pongo 0 (El indice de Columnas empieza desde 0)
      Select Case e.CommandName
          Case "ver"
              Dim indice As Integer = e.CommandArgument ' Me paro en la row que hizo click
              Dim row As GridViewRow
              row = GridView1.Rows(indice) ' la busco en la Grilla
              lblIDSeleccion.Text = ""
              lblIDSeleccion.Text = Convert.ToInt32(CType(row.FindControl("lblID"), Label).Text) ' encuentro el id oculto en el Label (lblID) y se lo asigno a un objeto Label
      End Select
  End Sub

Para el Lado del Cliente:
Bueno hay varias maneras pero yo voy a inyectar JS al momento de hacer el RowDatabound de la grilla ósea en el momento de llenar fila por fila.
Del lado del Servidor sería esta código:

Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound
       If e.Row.RowType = DataControlRowType.DataRow Then 'DataRow Vale las row que tienen datos, de esta manera se saltea el header,el footer y el pager
           Dim idCelda As Integer = 0
           Dim lbl As Label
           Dim objButton As LinkButton
           Dim gvrow As GridViewRow = CType(e.Row.Cells(idCelda).NamingContainer, GridViewRow)
           lbl = CType(gvrow.Cells(idCelda).FindControl("lblID"), Label)
           objButton = CType(gvrow.Cells(2).Controls(0), LinkButton) 'Columna 2 control 0 asi me paro en la ultima columna
           objButton.Attributes.Add("onclick", "javascript:return Ejecutar('" & lbl.Text & "')")
       End If
   End Sub

y como se ve hay una inyección de JS de la función Ejecutar que ahí va el simplisimo codigo:

<script language =javascript >
   1:
   2: function Ejecutar(id)
   3: {
   4: alert ('El ID Seleccionado es: ' +id);
   5: return false;
   6: }

</script>

Descargar el proyecto aqui.

Es una manera muy simple de ocultarlo y es agradable a la vista del usuario que no vea un número que en definitiva a él no le significa nada.

Saludos

Anuncios

2 comentarios sobre “Agregar un ID oculto en un GridView

  1. muchisimas gracias por el aporte aunq la descarga del ejemplo no este disponible aun asi me funciono tu tutorial!!
    muchisimas gracias nuevamente y saludos!

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s