Usando jQuery con ASP.NET - Guía para principiantes

¿Has oido hablar de JQuery?

Bueno, si has oido hablar de JQuery pero no lo has utilizado nunca, aquí está esta guía para principiantes para que puedas empezar con jQuery y ASP.NET.

¿Qué es jQuery?

jQuery es una libreria JavaScript, rápida, ligera y compatible con CSS 3 y soportada por muchos navegadores. El framework jQuery es extensible y se maneja muy bien las manipulaciones DOM, CSS, AJAX, eventos y animaciones.


¿Cuál es la diferencia entre JavaScript y jQuery?

JavaScript es un lenguaje de programación, mientras que jQuery es una librería escrita en JavaScript.

¿Donde puedo descargar jQuery?

La versión actual de jQuery es la versión 1.6.1

* jQuery 1.6.1 Reducida y comprimida (Librería en producción)

Debemos de añadir la siguiente etiqueta debajo del título (siempre en el head de la página):


* jQuery 1.6.1 Descomprimida(Librería para pruebas)


Mi primera aplicación con jQuery

En primer paso, abrimos Visual Studio y en el menú Archivo seleccionamos Nuevo-->Sitio Web

Seleccionamos como plantilla "Sitio Web ASP.NET" y el lenguaje de programación que vayamos a utilizar, en mi caso: Visual Basic .NET

Posteriormente, en el explorador de soluciones, creamos una Nueva Carpeta con el nombre de "Scripts" y añadimos la versión descargada anteriormente. Nos quedaría algo asi en el explorador de soluciones:

Debemos de añadir la siguiente linea en el head de la página:

A partir de ahora ya podemos utilizar cualquier funcion implementada en jQuery.

Algunos ejemplos:

Ejemplo 1 - Mostrar una alerta con un boton asp. Evento Click con jQuery

Agregue un elemento Button a la página como se muestra a continuación:

<script type="text/javascript">

        $(document).ready(function() {

        // añadir codigo aquí

        });

</script>

Agregar el código en el bloque de función:

    <script type="text/javascript">

        $(document).ready(function() {

        $("#Button1").click(function() {

            alert("¡Hola mundo!");

        });

 

        });

    </script>

Ejemplo 2: Demostrar un poco de animación al hacer clic con el botón usando jQuery

Nuestro primer ejemplo fue un simple "Hola Mundo" ejemplo a seguir con la tradición al tiempo que introduce un nuevo lenguaje. Vamos a mejorar nuestra muestra y mostrar algunos animación usando jQuery. Vamos a animar un en un clic de botón cuando se carga la página. Pueden ver este ejemplo aquí:

Para ello, agregue un botón HTML y uno a la página como se muestra a continuación:

<form id="form1" runat="server">           

        <input id="btnAnimate" type="button" value="Animate" />

        <asp:Panel ID="Panel1" runat="server">

       Algún ejemplo de texto en este panel       

        </asp:Panel>

    </form>

También agregar un poco de CSS para embellecer el div (recuerde asp: Panel de hace como un "div"). La etiqueta "style" se ha mantenido en el elemento "head" de la página.

    <style type="text/css">

        div {

        background-color:#D5EDEF;

        color:#4f6b72;

        width:50px;

        border: 1px solid #C1DAD7;

 

      }

 </style>

Por último, agregue el código jQuery para animar el panel de clic de botón. Estaríamos utilizando la función "animate".

<script type="text/javascript">

     $(document).ready(function() {

         $("#btnAnimate").click(function() {

             $("#Panel1").animate(

            {

                width: "350px",

                opacity: 0.5,

                fontSize: "16px"

            }, 1800);

         });

     });

 </script>