INTEGRACIÓN DE JQUERY CON ASP.NET MVC FRAMEWORK GERARDO MARCHANT MICROSOFT STUDENT PARTNER
INTEGRACIÓN DE JQUERY CON ASP.NET MVC FRAMEWORK
GERARDO MARCHANTMICROSOFT STUDENT PARTNER
¿Qué es JQuery? ¿Por qué usarlo? ¿Cómo empiezo a usarlo? Demo JQuery JQuery & MVC Framework Demo Recursos
Agenda
¿Qué es JQuery?
JQuery es una liviana librería de JavaScript Creado por John Resig. Open Source. Licencia MIT & GPL. Utilizados por muchos de los principales
sitios web: Bank of America, Dell, Netflix, NBC…
Lo que la hace tan especial es su sencillez y su reducido tamaño.
Selecciones
$(“#firstName”) Selecciona elemento con Id firstName
$(":text") Selecciona Todos los text box
$(“.required”) Selecciona todos los elementos de clase necesarios
Animaciones
$(…).show() $(…).hide() $(…).slideDown() $(…).slideUp() $(…).fadeIn() $(…).fadeOut()
$(…).show() $(…).hide() $(…).slideDown() $(…).slideUp() $(…).fadeIn() $(…).fadeOut()
Plugins
¿Por Qué Usarlo?
La sencillez de su sintaxis y la poca extensión del código que necesitas escribir son las características más notables.
Si hicieras lo que hace JQuery con getElementById y window.onload no solo tendrías que escribir mucho, si no que podrían haber diversos problemas.
Ventajas JQuery
Las principales ventajas de JQuery son: No es intrusivo. Simplifica las tareas habituales de
Javascript. Es independiente del navegador. Ocupa muy poco. Extensible.
Cómo empiezo a Usarlo
Lo primero que debes hacer, es descargarlo de la web oficial.
Una vez descargada la librería (Aprox. 16k) puedes proceder a tu primer script:
<html xmlns= "http://www.w3.org/1999/xhtml"> <head>
<title>Prueba de JQuery</title> <script src= "jquery.js" type=
"text/javascript“></script> </head> <body> </body> </html>
Ejecución y sintaxis básica
La manera de inicializar JQuery es muy útil:
$(elemento).evento(función-o-parámetro);
$(document).ready(function(){ //Aqui tu código });
JQuery tiene una sintaxis muy sencilla. Los comandos se reconocen por comenzar con el símbolo "$". Ahora, la forma de una sentencia es la siguiente:
Ejemplo de JQuery<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Prueba de JQuery</title> <script src="jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function (){ //Aqui asignamos el click al elemento <a> $("a").click(function (){ alert("Presionaste un <a>"); }); }); </script> </head> <body> <a href="#"> Presióname! </a> </body> </html>
DEMO
JQuery:Uso de Drag & Drop
JQuery & MVC Framework JQuery puede traer enormes aumentos de
productividad y es fácil de aprender y trabajar.
JQuery le permite lograr resultados excepcionales con un mínimo de dificultad.
JQuery esta incluido en ASP.NET MVC Framework.
Soporte nativo de ‘Intellisense’. Múltiples plugins.
DEMO
JQuery & MVC:Creando una Base de Datos de Películas
Recursos
JQuery http://jquery.com/
Visual JQuery http://visualjquery.com/
MVC Framework http://www.asp.net/mvc
18
© 2008 Microsoft Corporation. Todos los derechos reservados. Microsoft, Windows, Windows Vista y otros nombres de producto son y pueden ser marcas registradas y registros en Estados Unidos y en otros países.La información contenida en el presente es sólo para fines informativos y representa la visión actual de Microsoft Corporation a la fecha de esta presentación. Debido a que Microsoft debe responder a las cambiantes condiciones del mercado, no se debe interpretar como un compromiso por parte de Microsoft, y Microsoft no puede garantizar la precisión de ninguna información provista después de la fecha de esta presentación. MICROSOFT NO OFRECE
GARANTÍA ALGUNA, EXPRESA, IMPLÍCITA O DE LEY, RESPECTO A LA INFORMACIÓN EN ESTA PRESENTACIÓN.