Usar JavaScript con Controles Asp.Net

miércoles, 28 de noviembre de 2012

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.

Diseño

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

Captura

Eso seria todo espero les sea de utilidad.

Descargar Ejemplo

0 comentarios:

Publicar un comentario en la entrada

Nota: solo los miembros de este blog pueden publicar comentarios.