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

20. October 2010 22:00 by Oscar.SS in Desarrollo Web  //  Tags:   //   Comments (0)
Le recomiendo al lector que antes de empezar a leer este artículo dedique unos minutos a este otro artículo. En él se explican algunos conceptos que serán necesarios para comprender lo que ahora veremos.
 
Cuando estamos trabajando bajo el esquema del UpdatePanel podemos tener la necesidad de diferenciar que control u objeto provocó la solicitud asíncrona. Para entenderlo con facilidad veamos un ejemplo.
 
Supongamos que tenemos la siguiente interfaz de usuario.
 
 
 
 
La funcionalidad que queremos implementar es que tanto al guardar la dirección del usuario, como al borrar la dirección del campo de texto, se produzca con AJAX. Además, antes de borrar queremos pedir una confirmación al usuario.
 
Introducimos el campo de texto dentro del UpdatePanel y obtenemos el siguiente código.
 
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            
<ContentTemplate>
                
<asp:Label ID="lbDireccion" runat="server" Text="Dirección:   "></asp:Label>
                
<asp:TextBox ID="tbDireccion" runat="server" Width="260px"></asp:TextBox>
            
</ContentTemplate>
            
<Triggers>
                
<asp:AsyncPostBackTrigger ControlID="btBorrar" EventName="Click" />
                <
asp:AsyncPostBackTrigger ControlID="btGuardar" EventName="Click" />
            </
Triggers>
        
</asp:UpdatePanel>
 
Ahora viene lo bueno. ¿Como diferenciamos que control provocó la llamada asíncrona?. ¿Como decimos que un botón deba tener una confirmación antes de llamar asincronamente al servidor y el otro botón no?.
 
    <script type="text/javascript" language="javascript">
        
        
//Intercetamos la llamada automatica de AJAX ASP.NET al servidor para pedir una confirmacion antes de eliminar.
        
Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(confirmarEliminar);

        function 
confirmarEliminar(sender, args) {

            
//Capturamos el boton que inicializa la llamada AJAX.
            
var idPostBack args.get_postBackElement().id;

            if 
(idPostBack == "btBorrar") {
                
var valorConfirm = confirm("¿Está seguro que desea borrar esta dirección.?");

                
//Si el usuario ha cancelado detenemos la llamada al servidor.
                
if (!valorConfirm) {
                    args.set_cancel(
true);
                
}
            }
        }
    </script>
 
En primer lugar debemos interceptar la llamada asíncrona justo antes de que comience. Para ello utilizamos el evento initializeRequest del ciclo de vida cliente. A continuación obtenemos el id del control que provoco la llamada con el método y propiedad get_postBackElement().id. Y en función de la elección del usuario cancelamos la llamada al servidor con el método set_cancel().
 
 

Recent Comments

Comment RSS

Month List