Cómo capturar el evento de clic 'Actualizar' en ASP.NET GridView con jQuery

Question

Necesito capturar el evento de clic 'Actualizar' con jQuery en un GridView de asp.net y no tengo forma de saber por dónde empezar. Todavía soy bastante nuevo en jQuery. Mi GridView está conectado a un SQLDataSource y, naturalmente, tiene todos los detalles que ofrece esa combinación. Cualquier ayuda sería muy apreciada.

Answer 1

sólo tiene que añadir el bloque de script en cualquier lugar después de que el GridView se declara y se debe trabajar con la columna de GridView predeterminado no con plantilla. No hay código en el código subyacente, ya que es puramente una solución de Javascript.

Use este si está utilizando una columna de GridView-Tipo de enlace:

<script type="text/javascript"> 
    // a:contains(The text of the link here) 
    $('#<%= theGridViewID.ClientID %> a:contains(Update)').click(function() { 
     alert('Update click event captured from the link!'); 
     // return false: stop the postback from happening 
     // return true or don't return anything: continue with the postback 
    }); 
</script> 

Use este si está utilizando una columna de GridView tipo botón y usted no quiere que su Javascript para bloquear la devolución de datos:

<script type="text/javascript"> 
    // :button[value=The text of the button here] 
    $('#<%= theGridViewID.ClientID %> :button[value=Update]').click(function() { 
     alert('Update click event captured from the button!'); 
    }); 
</script> 

Use este si está utilizando una columna de GridView tipo botón y usted quiere tener el control si se continúa con la devolución de datos o no:

<script type="text/javascript"> 
    // :button[value=The text of the button here] 
    var updateButtons = $('#<%= theGridViewID.ClientID %> :button[value=Update]'); 
    updateButtons 
     .attr('onclick', null) 
     .click(function() { 
      alert('Update click event captured from the button!'); 
      var doPostBack = true; // decide whether to do postback or not 
      if (doPostBack) { 
       var index = updateButtons.index($(this)); 
       // 'Update$' refers to the GridView command name + dollar sign 
       __doPostBack('<%= theGridViewID.UniqueID %>', 'Update$' + index); 
      } 
     }); 
</script> 

---

Actualización: Creo que esto sería una mejor solución en sustitución de la última (tercera) bloque de script que presenté anteriormente, ya que no tendrá que actualizar la llamada de función __doPostBack manualmente basándose en el nombre del comando , y como tal, debería ser menos propenso a errores:

<script type="text/javascript"> 
    // :button[value=The text of the button here] 
    var updateButtons = $('#<%= theGridViewID.ClientID %> :button[value=Update]'); 
    updateButtons.each(function() { 
     var onclick = $(this).attr('onclick'); 
     $(this).attr('onclick', null).click(function() { 
      alert('Update click event captured from the button!'); 
      var doPostBack = true; // decide whether to do postback or not 
      if (doPostBack) { 
       onclick(); 
      } 
     }); 
    }); 
</script> 

Gracias a Aristos por esta idea. :)

Answer 2

Debe adjuntar un detector de eventos del lado del cliente al evento de clic del botón Actualizar [enlace]. No creo que se pueda hacer usando AutoGenerateEditButton = "true" si lo haces de esa manera. Tendrá que usar un TemplateField para poder manipular el botón. Luego puede usar jQuery para enlazar al evento click del botón.

Answer 3

Agregue la columna de actualización a las plantillas de columnas. Conviértalo en una columna personalizada, y modifíquelo de tal forma que pueda engancharlo con jquery, es decir, como agregarle una clase css.

Answer 4

Ok aquí está mi solución para capturar solo una actualización (o más) de un botón.

Este es el código javascript que corro en la actualización clic

<script type="text/javascript">   
    function NowRunTheUpdate(){ 
     alert("ok I capture you"); 
    } 
</script> 

y aquí está el código de la página

`<asp:GridView ID="MyGridView" runat="server" OnRowDataBound="MyGridView_RowDataBound" ... >` 

    <asp:ButtonField Text="update" CommandName="Update" ButtonType="Button" /> 
    ... 

Aquí está el código thats de correr atrás y establece el código JavaScript.

protected void MyGridView_RowDataBound(object sender, GridViewRowEventArgs e) 
{ 
    if (e.Row.RowType == DataControlRowType.DataRow) 
    { 
     // loop all data rows 
     foreach (DataControlFieldCell cell in e.Row.Cells) 
     { 
      // check all cells in one row 
      foreach (Control control in cell.Controls) 
      { 
       // I go to get the button if exist 
       Button button = control as Button; 
       if (button != null && button.CommandName == "Update") 
        // Add delete confirmation 
        button.OnClientClick = "NowRunTheUpdate();"; 
      } 
     } 
    } 
} 

Answer 5

Gridview no es más que una mesa con un montón de "tr" y "td". Si entiendes ese concepto, será fácil para ti manejar cualquier cosa en el lado del cliente. Si habilitó todo automáticamente, entonces será un enlace que resultará en Editar, Eliminar, Actualizar o Cancelar (Verificar origen de vista).El código que figura a continuación debe capturar el evento de actualización clic:

$("a:contains(Update)").live("click", function() { 
    //alert("hi"); do what needs to be done 
    return false;//would not sent the control back to server 
    }); 

HTH