Agregar botón con imagen GridView ASP.Net

Además de agregar botones o links de texto para ejecución de eventos también podemos agregar un botón con imagen a cada registro del GridView de ASP.Net.

Una manera de personalizar los botones que permiten a los usuarios intuir que eventos se pueden realizar en los registros.

Complementando un post visto anteriormente sobre el evento RowCommand, agregaremos botones con imagen en ese ejemplo.

Agregar botón con imagen en gridview

En el gridview que ya tenemos en nuestra página aspx agregaremos una nueva columna, en este colocaremos el botón con imagen.

<asp:GridView ID="gvTablaUno" runat="server" AutoGenerateColumns="false" OnRowCommand="gvTablaUno_RowCommand">
    <Columns>
        <asp:BoundField DataField="id" HeaderText="Num." />
        <asp:BoundField DataField="Nombre" HeaderText="Nombre completo" />
        <asp:BoundField DataField="Telefono" HeaderText="Telefono" />
        <asp:TemplateField HeaderText="Modificar">
            <ItemTemplate>
                <asp:ImageButton runat="server" ID="btnModificar" ImageUrl="~/edit.png" CommandName="Editar" CommandArgument='<%# Container.DataItemIndex.ToString() %>' />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

Para colocar la imagen debemos de primero agregar un control TemplateField, dentro de este colocar un control ItemTemplate.

Dentro del ItemTemplate se debe de colocar un ImageButton, en la propiedad ImageUrl establecemos la ruta de la imagen.

Debemos de agregar las propiedades CommandName y el CommandArgument que será importantes al trabajar en el servidor con C#.

CommandArgument permite enviar el índice del registro al cual estamos dando clic y con esto obtener el DataKey.

El único cambio que realizamos en el aspx es agregar una columna mediante TemplateField.

Podría interesarte Modificar contenido de GridView en tiempo de ejecución en ASP.Net C#  

Ahora puedes implementar algún evento al oprimir el botón en JavaScript o en el Servidor utilizando C#.