Usar JavaScript con Controles Asp.Net

En esta ocasión veremos como usar javascript en controles asp.net.

Veremos un ejemplo sencillo donde se ara una suma o resta dependiendo de la opcion del usuario.

El diseño de la aplicacion es la siguiente.


Como veran el diseño es sencillo el usuario ingresara datos en los 2 textbox y luego mediante un dropdowlist elegirá si realiza una suma o resta y mostraremos el resultado en un label.

Veamos el código.

function Operacion() 
{
        //capturar valores
        var dato1 = document.getElementById('<%=TextBox1.ClientID%>').value;
        var dato2 = document.getElementById('<%=TextBox2.ClientID%>').value;
        var opcion = document.getElementById('<%=DropDownList1.ClientID%>').value;
        //comprobar que los datros sean numericos
        if (!isNaN(dato1) && !isNaN(dato2)) 
        {
             //si selecciono suma realizo suma
             if (opcion == "Sumar") 
             {
                  var resul = parseFloat(dato1) + parseFloat(dato2);
                  document.getElementById('<%=Label1.ClientID%>').innerHTML = resul;
             }
             //si no realiza resta
             else 
             {
                  var resul = parseFloat(dato1) - parseFloat(dato2);
                  document.getElementById('<%=Label1.ClientID%>').innerHTML = resul;
             }
        }
        else 
        {
            alert('ingrese numero');
        }

}

function Limpiar() 
{
      document.getElementById('<%=TextBox1.ClientID%>').value = '';
      document.getElementById('<%=TextBox2.ClientID%>').value = '';
      document.getElementById('<%=Label1.ClientID%>').innerHTML = '';
}

Como verán tenemos 2 funciones la primera Operación() es la que se encarga de realizar la operación seleccionada por el usuario, en la primera parte del código capturamos los valores introducidos en los textbox y la opcion seleccionada en el dropdowlist, comprobamos si los datos introducidos son numéricos y luego evaluamos si el usuario selecciono la suma o resta y hacemos la operación para cada opcion y mostramos el resultado en un label.
La segunda función Limpiar() como pueden imaginarse lo único que hace es limpiar los datos. Ahora para llamar las funciones desde los botones tenemos el siguiente código.

<asp:button id="Button1" onclientclick="Operacion(); return false;" runat="server" text="Calcular" />

<asp:button id="Button2" onclientclick="Limpiar(); return false;" runat="server" text="Limpiar" />

Usamos la propiedad OnclientClick para llamar la función javascript, incluimos el return false para evitar que el botón  haga postback


Eso seria todo espero les sea de utilidad.

Descargar Ejemplo
Si quieren donarme para una soda lo pueden hacer aqui.