Detener un PostBack con JavaScript

5. February 2011 21:00 by Oscar.SS in Desarrollo Web  //  Tags: ,   //   Comments (1)

En ocasiones nos interesará detener una petición al servidor desde el cliente. Por ejemplo, cuando el usuario elimina un registro desde la interfaz de pantalla y antes de realizar la llamada al servidor, le preguntamos con un alert() si está seguro de que quiere eliminar el registro. O también, cuando validamos algún tipo de dato y en caso de no pasar la validación evitaremos el código de servidor.

Esta funcionalidad se puede implementar de varias formas diferentes, aquí veremos una de ellas. Supongamos la siguiente interfaz de usuario.

 

Es muy simple, el usuario escribe su nombre y pulsa el botón para recebir un saludo, pero antes le preguntamos si desea recibirlo.

 

 

En primer lugar vamos a ver el código HTML de nuestra interfaz que tiene algunos detalles muy interesantes.

 

    <div>
        Nombre: 
<input type="text" id="txNombre" runat="server" />
        <
input type="button" value="Saludar" id="btSaludar" onclick="javascript:if(quiereUnSaludo())" runat="server" />
        <
br />
        <
br />
        <
span id="spSaludo" runat="server"> </span>
    
</div> 

 

En lo primero que tenemos que fijarnos es que hemos utilizado un botón HTML de tipo "button" y no de tipo "submit". Esto debe ser así, porque de lo contrario siempre iríamos a servidor independientemente de lo que implementemos en JavaScript.

Es evidente que tenemos que marcar el botón para que corrar del lado del servidor (runat="server") dado que queremos ir al servidor dependiendo de la validación de JavaScript.

Y en lo último que debemos fijarnos es que en el evento onclick tenemos una condición llamando a una función personalizada que devuelve un boleano. Esta función de JavaScript es donde implementaremos, por ejemplo, que se han validado ciertos datos, o que el usuario rechaza o acepta la operación que eligió anteriormente. El código de esta función podría ser algo como lo siguiente.

 

    <script type="text/javascript">
        
function quiereUnSaludo() {
            
var response = confirm("¿Desea revibir un saludo?");
            return 
response;
        
}
    </script>

 

Y con esto, recibiremos un true o false en función de lo que elija el usuario. El botón al recibir un false no seguirá ejecutando sus funciones y por lo tanto no irá al servidor. Pero aún nos falta una tarea, ¿cómo enlazamos el botón con el evento de servidor?.

 

    protected void Page_Load(object sender, EventArgs e)
    {
        btSaludar.ServerClick +
= new EventHandler(btSaludar_ServerClick);
    
}

    
protected void btSaludar_ServerClick(object sender, EventArgs e)
    {
        spSaludo.InnerText 
"Hola, " + txNombre.Value + " a las " + DateTime.Now.ToShortTimeString();
    
}

 

Existen otras formas de hacer esto mismo, como por ejemplo, controlando directamente la llamada al método doPostBack() que escribe por nosotros el Framework, pero en mi opinión son menos "limpias" que la aquí expuesta.

Recent Comments

Comment RSS

Month List