Está en la página 1de 24

1

ASP.NET & JQuery Una pareja explosiva


Leandro Masotti Technical Leader

Gonzalo Prez
Microsoft MVP ASP/ASP.NET www.chalalo.cl

Agenda
Introduccin
Overview de JQuert Por que deberamos usar JQuery Comenzando con JQuery Animaciones Demos

Jquery & ASP.NET

Hechos sobre esta unin. Microsoft Ajax Framework Instalacin y Soporte Demos, Demos, Demos.

ASP.NET & JQuery -Una pareja explosiva


Escribes CSS? Desarrollas con ASP.NET? Desarrollas con Javascript? No te has olvidado del lado del cliente? Quieres escribir menos lineas de cdigo?

jQuery Overview
Creado por John Resig Open source
MIT y Licencia GPL

Compatibilidad Cross-browser
Internet Explorer 6+, Firefox 2+, Opera 9+, and Safari 2+

Liviano y Agil
15KB

Utilizado por la mayora de los grandes WebSites


Bank of America, Dell, Netflix, NBC _

Apoyada fuertemente por la comunidad

Por que deberamos usar JQuery?


JQuery hace la tarea de escribir cdigo javascript mucho ms fcil! Navegacin DOM (css-like syntax) Aplicar mtodos a elementos DOM Builder Model (Mtodos encadenados) Extensible con muchas libreras soportado por la mayor parte de los navegadores

Comenzando con JQuery


Selectores
Podemos seleccionar un elemento del DOM $("#miObjetoDOM").css("border", "solid 2px navy"); o seleccionar por la clase CSS (.): $(".alternante").css("background", "lightsteelblue ");

Podemos seleccionar elementos con filtros de tipo , y atacharle funciones javascript asociados a un evento de manera sencilla y rpida $("input:button ").click(function(event) { alert("hola mundo"); });
Un ejemplo ms complejo sobre seleccionar todas los registros de una tabla $("#gdEntries>tbody>tr").css("border", "solid 1px red");

Comenzando con JQuery


Encadenamiento?
$("a) .filter(".clickme") .click(function() { alert("Estas abandonando este sitio"); }) .end() .filter(".hideme") .click(function() { $(this).hide(); return false; }) .end();
8

Comenzando con JQuery


DEMO 1 (Selector a DOM) DEMO 2 (Selector a CSS) DEMO 3 (Encadenamiento)

Animaciones con JQuery


Bsicas
$().show() $().hide() $().slideDown() $().slideUp() $(..).fadeIn $(..).fadeOut() muchos Plugins.

10

Animaciones Bsicas con JQuery


DEMO Animaciones

11

JQuery & ASP.NET

La Unin hace la Fuerza

12

JQuery & ASP.NET


Hechos
Microsoft no es dueo de JQuery JQuery se incluye bajo licencia MIT Microsoft contribuye activamente con JQuery Microsoft Proveer soporte total(7/24) Microsoft integrar por defecto JQuery en las versiones siguientes de VStudio Ya Incluido en ASP.NET MVC 1.0 Microsoft Provee Intellinsense for JQuery

13

Microsoft AJAX Framework


ASP.NET AJAX
AJAX Requests Selectors

Components and Controls


Client Templates AJAX Control Toolkit

Animations

Plugins

14

JQuery & ASP.NET


Es parte de Microsoft Ajax Framework Potencia la programacin Client-Side Permite mejorar el comportamiento de controles. Muy til con los ClientTemplates de ASP.NET 4.0 Permite invocar WebServices de manera liviana Permite invocar WebMethod de manera liviana Y mucho ms

15

Que necesito para Instalar el Sorporte?


ScottGu, jQuery Intellisense in VS 2008
http://weblogs.asp.net/scottgu/archive/2008/11/21/jquery-intellisense-in-vs2008.aspx

Tener Instalado VS2008 sp1 KB958502-JScript Editor support for -vsdoc.js IntelliSense documentation files
http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?Releas eId=1736

16

JQuery & ASP.NET DEMO WebControls

17

JQuery & ASP.NET


DEMO
Llamar a WS JQUERY (JSON) Llamar a WebMethod en aspx (JSON)

18

JQuery & ASP.NET


DEMO
ClientTemplates (ASP.NET 4.0)

19

Referencias
http://jquery.com/
Scott Guthries blog: http://weblogs.asp.net/scottgu/ Rick Strahls blog: http://www.west-wind.com/weblog/

Book: jQuery in Action

20

21

22

Recursos para los desarrolladores

http://microsoft.com/spanish/msdn/latam/mediacenter/
Microsoft MSDN Latinoamrica te ofrece los ltimos recursos multimedia en espaol para desarrolladores: presentaciones y demostraciones en directo o diferido, va Internet, brindadas por expertos de Microsoft, las cuales te ayudarn a mantenerte al da con informacin sobre los productos y tecnologas que utilizas a diario en el desarrollo de tus aplicaciones.

Leandro Masotti
lmasotti@accendra.com | http://www.accendra.com

Gonzalo Prez C.
chalalo@hotmail.com | http://www.chalalo.cl

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 pases. La informacin contenida en el presente es slo para fines informativos y representa la visin actual de Microsoft Corporation a la fecha de esta presentacin. 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 precisin de ninguna informacin provista despus de la fecha de esta presentacin. MICROSOFT NO OFRECE GARANTA ALGUNA, EXPRESA, IMPLCITA O DE LEY, RESPECTO A LA INFORMACIN EN ESTA PRESENTACIN.

24