Ejecutar una función JavaScript y luego el evento al hacer click en un Boton ASP.Net

En ocasiones es necesario validar información por el lado del cliente con JavaScript y luego ejecutar el evento del boton ASP.Net.

Para lograr esto el control Button cuenta con  las propieades OnClick y OnClientClick.

En el siguiente ejemplo se usa OnClientClick para ejecutar una función Javascript que valide datos, el cual devoverá true cuando todo sea correcto y false cuando haya algo que validar. Si la funcion JavaScript devuelve false el evento OnClick no se ejecutara.

En el siguiente ejemplo he agregado un formulario web llamado WebForm1.aspx, en donde he añadido 3 cajas de texto, un boton y un control literal para el mensaje de confirmación.

el usuario solo podrá grabar cuando todas las cajas de texto tengan algun valor. si alguna d las cajas de texto esta vacia entonces mostrará un mensaje diciendo que falta datos por validar, en caso de que todas las cajas de texto contengan algun valor entonces mostrará un mensaje preguntando si se desea realizar la transaccion, en caso de que el usuario acepte mostrará un mensaje en el control literal indicando que los datos fueron grabados.

Para este ejemplo existen dos momentos al hacer click en el boton Grabar, el primer momento es cuando se realiza la validacion de los datos con javascript, en el cual se mostraran los mensajes de pregunta o alerta segun el caso. una vez que se ha pasado todas las valdiaciones la función Validar() de javascript retornará un valor booleano. cuando es true automáticamente pasa a ejecutar el evento OnClick del boton que se ha programado del lado del servidor.

Este el código JavaScript que valida la información

 
        function Validar()
        {
            var error = 0;
            
            if (document.getElementById('<%=TextBox1.ClientID %>').value == '' )
            {
                error = 1;
            }
            if ( document.getElementById('<%=TextBox2.ClientID %>').value == '' )
            {
                error = 1;
            }
            if (document.getElementById('<%=TextBox3.ClientID %>').value == '' )
            {
                error = 1;
            }
          
            if(error == 0)
            {
                if (confirm("Esta seguro que desea grabar?"))
                {
                    return true;
                }
                else
                {
                    return false;                            
                }

            }
            else
            {
                alert('Valide los datos antes de grabar');
                return false;
            }
        } 

Codigo del boton Asp.Net que ejecuta primero la función JavaScript y luego el evento del mismo control Button.

Código del lado del servidor que se ejecuta cuando se haya validado todo y el usuario confirme que desea grabar

    protected void Button1_Click(object sender, EventArgs e)
        {
            Literal1.Text = "Datos grabados";
        }

pueden descargar el código de la ejemplo en la siguiente dirección: enlace