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.
Si quieren donarme para una soda lo pueden hacer aqui.
0 Comentarios