Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JQuery Mvc

3,184 views

Published on

Published in: Technology
  • Be the first to comment

JQuery Mvc

  1. 1. INTEGRACIÓN DE JQUERY CON ASP.NET MVC FRAMEWORK GERARDO MARCHANT MICROSOFT STUDENT PARTNER
  2. 2. <ul><li>¿Qué es JQuery? </li></ul><ul><li>¿Por qué usarlo? </li></ul><ul><li>¿Cómo empiezo a usarlo? </li></ul><ul><li>Demo JQuery </li></ul><ul><li>JQuery & MVC Framework </li></ul><ul><li>Demo </li></ul><ul><li>Recursos </li></ul>Agenda
  3. 3. ¿Qué es JQuery? <ul><li>JQuery es una liviana librería de JavaScript </li></ul><ul><li>Creado por John Resig. </li></ul><ul><li>Open Source. </li></ul><ul><li>Licencia MIT & GPL. </li></ul><ul><li>Utilizados por muchos de los principales sitios web: Bank of America, Dell, Netflix, NBC… </li></ul><ul><li>Lo que la hace tan especial es su sencillez y su reducido tamaño. </li></ul>
  4. 5. Selecciones <ul><li>$(“#firstName”) </li></ul><ul><ul><li>Selecciona elemento con Id firstName </li></ul></ul><ul><li>$(&quot;:text&quot;) </li></ul><ul><ul><li>Selecciona Todos los text box </li></ul></ul><ul><li>$(“.required”) </li></ul><ul><ul><li>Selecciona todos los elementos de clase necesarios </li></ul></ul>
  5. 6. Animaciones $(…).show() $(…).hide() $(…).slideDown() $(…).slideUp() $(…).fadeIn() $(…).fadeOut()
  6. 7. Plugins
  7. 8. ¿Por Qué Usarlo? <ul><li>La sencillez de su sintaxis y la poca extensión del código que necesitas escribir son las características más notables. </li></ul><ul><li>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. </li></ul>
  8. 9. Ventajas JQuery <ul><li>Las principales ventajas de JQuery son: </li></ul><ul><ul><li>No es intrusivo. </li></ul></ul><ul><ul><li>Simplifica las tareas habituales de Javascript. </li></ul></ul><ul><ul><li>Es independiente del navegador. </li></ul></ul><ul><ul><li>Ocupa muy poco. </li></ul></ul><ul><ul><li>Extensible. </li></ul></ul>
  9. 10. Cómo empiezo a Usarlo <ul><li>Lo primero que debes hacer, es descargarlo de la web oficial. </li></ul><ul><li>Una vez descargada la librería (Aprox. 16k) puedes proceder a tu primer script: </li></ul><html xmlns= &quot;http://www.w3.org/1999/xhtml&quot; >   <head>     <title> Prueba de JQuery </title>      <script src = &quot;jquery.js&quot; type = &quot;text/javascript“ ></script>   </head>   <body>   </body> </html>
  10. 11. Ejecución y sintaxis básica <ul><li>La manera de inicializar JQuery es muy útil: </li></ul><ul><li>JQuery tiene una sintaxis muy sencilla. Los comandos se reconocen por comenzar con el símbolo &quot;$&quot;. Ahora, la forma de una sentencia es la siguiente: </li></ul>$(elemento).evento(función-o-parámetro); $(document). ready ( function (){       //Aqui tu código });
  11. 12. Ejemplo de JQuery <html xmlns= &quot;http://www.w3.org/1999/xhtml &quot;>   <head>    <title> Prueba de JQuery </title>     <script src = &quot;jquery.js&quot; type = &quot;text/javascript&quot; ></script>          <script type = &quot;text/javascript&quot; >              $(document). ready ( function (){                  //Aqui asignamos el click al elemento <a> $( &quot;a&quot; ). click ( function (){                      alert ( &quot;Presionaste un <a>&quot; );                   });              });           </script>      </head>   <body>      <a href = &quot;#&quot; > Presióname! </a>   </body> </html>
  12. 13. DEMO JQuery: Uso de Drag & Drop
  13. 14. JQuery & MVC Framework <ul><li>JQuery puede traer enormes aumentos de productividad y es fácil de aprender y trabajar. </li></ul><ul><li>JQuery le permite lograr resultados excepcionales con un mínimo de dificultad. </li></ul><ul><li>JQuery esta incluido en ASP.NET MVC Framework. </li></ul><ul><li>Soporte nativo de ‘Intellisense’. </li></ul><ul><li>Múltiples plugins. </li></ul>
  14. 16. DEMO JQuery & MVC: Creando una Base de Datos de Películas
  15. 17. Recursos <ul><li>JQuery </li></ul><ul><ul><li>http://jquery.com/ </li></ul></ul><ul><li>Visual JQuery </li></ul><ul><ul><li>http://visualjquery.com/ </li></ul></ul><ul><li>MVC Framework </li></ul><ul><ul><li>http://www.asp.net/mvc </li></ul></ul>
  16. 19. © 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 .

×