ProgramaciĆ³n, TecnologĆ­a y MĆ”s...

ProgramaciĆ³n, TecnologĆ­a y MĆ”s...

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.

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

Si quieren donarme para una soda lo pueden hacer aqui.


Publicar un comentario

0 Comentarios