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