Dar prioridad a un PostBack Asíncrono específico (2ª parte)

6. November 2010 13:34 by Oscar.SS in Desarrollo Web  //  Tags:   //   Comments (2)

Respondiendo a la última pregunta del post anterior continuamos ahora con una pequeña "ñapa" o "remiendo" que se me ocurrió para dar solución a este tema.

El problema es el siguiente. Tenemos por ejemplo un Gridview como el siguiente.

 

 

Y queremos como en el post anterior, que antes de eliminar un registro, se pida una confirmación al usuario, y claro está, que no pida la confirmación cuando intenta editar y actualizar una fila. La pega es que no sirve el código del post anterior porque el método y propiedad get_postBackElement().id nos devuelve el id del Gridview pero no de la celda donde está el comando eliminar que ha pulsado el usuario.

¿Y porqué una solución no muy ortodoxa?. Por que simplemente no he encontrado nada en las propiedades de los parámetros sender y args del evento initializeRequest() que nos permita salvar esta cuestión. Si vosotros conocéis una solución más elegante estaré encantado de conocerla. A mí se me ha ocurrido un pequeño atajo.

Antes de empezar recordar que este Gridview está dentro de un UpdatePanel y que queremos dar la opción al usuario de confirmar si desea eliminar una fila concreta. Bien, veamos como se renderiza en el cliente el código fuente de la celda donde está el comando eliminar.

 

 

Como vemos, cada celda eliminar se renderiza con una etiqueta <td> que contiene otra etiqueta <a> que es donde se ejecuta la llamada al método __doPostBack('GridView1','Delete$2'). Es decir, la llamada a este método provoca el postback asíncrono o llamada AJAX.

¿Y si ponemos "a pelo" en la etiqueta <td> un onclick para llamar a una función cliente propia y desde aquí controlar la ejecución de la llamada AJAX?. Entonces en el evento RowDataBound del Gridview escribimos el siguiente código.

 

    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        
//Comprobamos que sea una fila de datos y no una header, footer, etc
        
if (e.Row.RowType == DataControlRowType.DataRow)
        {
            e.Row.Cells[
6].Attributes.Add("onclick""javascript:confirmarEliminar();");
        
}
    }

 

Veamos ahora como se renderiza en el cliente la celda eliminar.

 

 

Como podemos comprobar, ahora ahora tenemos en el <td> una llamada a una función JavaScript personal que se ejecutará antes de llamar al método __doPostBack().

Ahora solo falta implementar esta función personal que contendrá el siguiente código en el que se controla si el usuario ha cancelado la eliminación y en función de esto nosotros cancelamos cualquier llamada al servidor.

 

      <script type="text/javascript" language="javascript">
          
function confirmarEliminar() {

              
var valorConfirm = confirm("¿Está seguro que desea eliminar este registro?");

              
//Si el usuario cancela la eliminación cancelamos la llamada asincrona al servidor.
              
if (!valorConfirm) {
                  
                  
//Intercetamos la llamada automatica de AJAX ASP.NET al servidor.
                  
Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(cancelarLlamadaAsincrona);

                  function 
cancelarLlamadaAsincrona(sender, args) { args.set_cancel(true)}
              }
          }
      </script> 

Comments (2) -

Victor Gonzalez
Victor Gonzalez
1/21/2011 1:27:55 AM #

Fenomenal truco, el ajax me estaba partiendo las neuronas, para poder enviar el dato del registro a elimnar. Excelente tip.

Gracias..

Oscar.SS
Oscar.SS
1/21/2011 9:11:37 AM #

Hola Victor:

Me alegra saber que te ha servido de algo.

Un saludo y gracias a ti por estar por aquí  Smile

Recent Comments

Comment RSS

Month List