Cuando asignamos en el Gridview un comando de eliminación para que se encargue "automáticamente" de conversar con el proveedor de datos y enviarle el comando de Delete (o disparar el evento correcto) en ASP.NET agregamos una columna del tipo comando...
Al agregarlo nos queda algo así:
<asp:CommandField ShowDeleteButton="True" DeleteText="Eliminar 0"/>
Podemos modificarlo al tipo de "botón", sea enlace, imagen o "botón"
la pregunta es...
¿Como agregar un evento de JS para que confirme la eliminación?
El famoso:
Bueno si queremos seguir con la columna del tipo CommandField, tendremos que hacer algo incomodo para el programador... contar en que columna esta exactamente para poder ubicar este control, porque no podemos realizar una búsqueda con FindControl ya que no sabemos ni siquiera un ID (identificador), pero también tenemos otras soluciones.
OPCION 1: Utilizando CommandField
Con la columna que nos proporciona el wizard tedremos que ir al codebehind y encontrar el control que renderiza.
<asp:CommandField ShowDeleteButton="True" DeleteText="Eliminar 0"/>
Si sabemos que esta en la 7 columna (y como todo en .NET empieza de 0), y que solamente tenemos este control tendríamos que capturarlo
Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound
Select Case e.Row.RowType
Case DataControlRowType.DataRow
Dim ctrlEliminar As LinkButton = CType(e.Row.Cells(6).Controls(0), LinkButton)
ctrlEliminar.OnClientClick = "return confirm('¿Esta seguro de eliminar este registro?');"
End Select
End Sub
y como sabiamos que era un LinkButton??, bueno porque es por defecto a lo que renderiza el CommandField, si queremos ser mas específicos tendríamos que colocar el tipo expresamente
<asp:CommandField ShowDeleteButton="True" DeleteText="Eliminar 0" ButtonType="Link"/>
Y si no me creen, pueden:
Dim ctrl As WebControl = CType(e.Row.Cells(6).Controls(0), WebControl)
ctrl.Attributes.Add("tipoControl", ctrl.GetType.ToString)
Podremos ver el el codigo renderizado el siguiente atributo "tipoControl":
<a tipoControl="System.Web.UI.WebControls.DataControlLinkButton"
href="BLOCKED SCRIPT__doPostBack('ctl00$contenidoCentral$GridView1','Delete$0')">Eliminar 1</a>
Particularmente colocar esta búsqueda "exacta" con numero de celda y posición del control dentro de la misma no es del todo "ortodoxa", ya que a la hora de modificar.. esto hay que "tocar aquí y allí", para eso la siguiente opción es mas "elegante" (y mucho mas fácil).
OPCION 2: Utilizando TemplateField con el control que queremos
Cuando quiero implementar algo similar utilizo una columna template... y allí podemos insertar un Button o un LinkButton que le asignas un comando... especial en el Gridview (y en la mayoría de los controles que se enlazan a datos) que es el comando delete, simplemente agregándole esta propiedad CommandName="Delete".
Es decir el Gridview disparará/provocará automáticamente los eventos RowDeleting y RowDeleted
<asp:TemplateField HeaderText="Ejemplo Eliminar">
<ItemTemplate>
<asp:Button ID="btnDelete" Text="Eliminar 1" runat="server"
OnClientClick="return confirm('¿Esta seguro de eliminar este registro?');"
CommandName="Delete" />
</ItemTemplate>
</asp:TemplateField>
y si queremos con LinkButton (idem):
<asp:LinkButton ID="linkEliminar" runat="server"
OnClientClick="return confirm('¿Esta seguro de eliminar este registro?');"
CommandName="Delete">Eliminar 2</asp:LinkButton>
(...)El control GridView también provoca otros eventos especializados al hacer click en ciertos botones (botones cuya propiedad CommandName presenta valores como "Delete", "Update" y "Page"). Al utilizar uno de estos botones, se debería considerar la posibilidad de controlar uno de los eventos especializados proporcionados por el control (como RowDeleted o RowDeleting).(...)
Enlaces:
Comparte este post: