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

Microsoft Community Contributor(MCC)



En esta ocasión quiero compartir con ustedes la noticia agradable que he sido reconocido como Microsoft Community Contributor(MCC) gracias a  los pequeños aportes que hago a los foros de MSDN.

Así que quiero darles las gracias a esta hermosa comunidad  MSDN que gracias a ella a lo largo de estos meses he aprendido mucho y a sido una gran herramienta para poder mejorar mis conocimientos sobre .Net espero seguir aportando para poder responder sus dudas.

Gracias a todos.
 Saludos.