jQuery e ASP.Net mvc2
Transferir como PPTX, PDF1 gostou2,024 visualizações
O documento discute o desenvolvimento de aplicações web modernas usando ASP.NET MVC e jQuery. Ele explica como essas tecnologias se complementam, com ASP.NET MVC fornecendo uma estrutura MVC no backend e jQuery facilitando manipulação do DOM e Ajax no frontend.
![JSON / XML{clientes:[{nome:'Victor',sobrenome:'Cavalcante'},{nome:'Mariana',sobrenome:'Frioli'}] }26](https://image.slidesharecdn.com/jqueryeasp-netmvc2-100610230041-phpapp02/85/jQuery-e-ASP-Net-mvc2-26-320.jpg)
![© 2010 Microsoft Corporation. All rights reserved. Microsoft, MSDN, the MSDN logo, and [list other trademarks referenced] are trademarks of the Microsoft group of companies. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED, OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.](https://image.slidesharecdn.com/jqueryeasp-netmvc2-100610230041-phpapp02/85/jQuery-e-ASP-Net-mvc2-35-320.jpg)
jQuery e ASP.Net mvc2
- 1. 10/06/2010Construindo aplicações Web de última geração com Microsoft ASP.NET MVC 2 e jQueryVictor CavalcanteArquiteto de Softwarehttp://www.cavalcante.nethttp://twitter.com/vcavalcantevictor@cavalcante.net
- 2. 2AgendaWebStandardse o ASP.Net MVCjQuerySeletoresEventosPluginsAjaxJson
- 3. 3O que é uma aplicação Web?Sistemas de informática desenvolvidos para rodar através de um Browser;Utiliza um servidor para fazer o processamento;A comunicação é feita através do protocolo HTTP;Existe algumas tecnologias/linguagens padrões para exibição do conteúdo nos browsers;
- 4. 4Tecnologias/LinguagensTecnologias para desenvolvimento de interfaces ricas como:Linguagens que podem ser utilizadas para desenvolvimento de interfaces ricas:
- 5. O que é WebStandardsPadrõesWeb;É um conjuntode padrõesproduzidospelaW3C;Destinado a orientar como deve ser desenvolvido páginas/sistemas para internet;5
- 6. O que é WebStandardsA base do desenvolvimento Web;Visa a separação das camadas;Composto por 3 partes;6
- 7. Por que WebStandards?Todos os sites desenvolvidos segundo os padrões W3C podem ser acessados e visualizados por qualquer pessoa ou tecnologia, independente de hardware ou software;Acessibilidade;Portabilidade;Velocidade;7
- 8. O que é o jQueryPoderosa biblioteca JavaScriptSimplifica tarefas comuns com JavaScriptAcessa qualquer parte das páginasusando CSS ou expressões XPath-likeModifica a aparência das páginasAltera o conteúdo das páginasAdiciona animação à páginaProve suporte a AjaxAbstrai os erros dos browsers8
- 9. Por que o jQueryLeve 14kb (MinifiedandGzipped)Suporte Cross Browser (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)Sintaxe CSS likeFácil para web-developers e web-designersComunidade ativaExtensibilidade com muitos pluginsAproximadamente 5000 plugins cadastrados9
- 10. Como funciona?Acrescente o arquivo do jQuery na páginaJá está pronto para usar o jQuery10
- 11. jQuerySelecionar parte do documento é o fundamentalO objeto jQuery é um wrapper para um grupo de elementos selecionados$() function é um factorymethod que cria os objetos jQuery11
- 12. jQuery – Seletores - CSS$(“p”) nome do elemento (tag)$(“#id”) identificador (id do CSS)$(“.class”) nome da classe do CSS$(“p.class”) elemento com 1 determinada classe$(“p a”) link que está dentro de um elemento p$(“p > a”) link que é filho direto de um elemento p12
- 13. Demo
- 14. jQuery – Seletores - filtros$(“p:first”) primeiro parágrafo$(“li:last”) último item da lista$(“a:nth(3)”) quarto link$(“a:eq(3)”) quarto link$(“p:even”) ou p:odd parágrafo sim, parágrafo não $(“a:gt(3)”) ou a:lt(3) todo link acima do quarto$(“a:contains(‘click’)”) links que contenha a palavra click$(“:checked”) todos os itens “checados”$(“:radio”) todos os inputs do tipo radio14
- 15. Demo
- 16. jQuery – Eventos$(document).ready();$(“#menu a”).click();$(“form”).submit();$(“select”).bind(“change”,function(){})16
- 17. Demo
- 18. jQuery – PluginsAjax (254)AnimationandEffects (408)Browser Tweaks (96)Data (190)DOM (191)Drag-and-Drop (47)Events (160)Forms (454)Integration (134)JavaScript (189)jQueryExtensions (275)Layout (249)Media (172)Menus (135)Metaplugin (30)Navigation (194)Tables (90)User Interface (785)Utilities (413)Widgets (307)Windows and Overlays (134)18
- 19. Demo
- 20. 20O que é o ASP.Net MVCUm novo template de projeto no Visual StudioUma opçãoUma nova maneira de desenvolver com ASP.NetUm template mais opinativo
- 21. Como funciona o ASP.NET MVC21Requisição HTTPRoutingModelControllerBDViewResposta (HTML, JSON, etc)
- 22. E agora?HTMLJavaScriptVerbos HTTPControle de estado da AplicaçãoGrandes poderes trazem grandes responsabilidades22
- 23. A mudança23
- 24. AJAXAsynchronousJavaScriptand XML(AJAX)Técnica de desenvolvimento web para criar aplicações webTroca pequenos pedaços de dados ao invés de carregar a página inteira.Permite que a página troque seu conteúdo sem atualizar a páginaÉ uma tecnologia do lado do cliente, não importando o lado do servidor24
- 25. AJAX - DerivaçõesAJAX AsynchronousJavaScriptandXMLAJAH AsynchronousJavaScriptandHTMLAJAJ AsynchronousJavaScriptandJSONJSON – JavaScriptObjectNotation25
- 26. JSON / XML{clientes:[{nome:'Victor',sobrenome:'Cavalcante'},{nome:'Mariana',sobrenome:'Frioli'}] }26
- 27. jQuery + ASP.Net MVCCom controle total sobre o HTML fica fácil criar páginas semanticamente corretasIsso facilita a consulta de elementos pelo jQueryO consulta por Ajax fica facilitada pelo retorno JSON27
- 28. jQuery + ASP.Net MVCA intenção do padrão MVC é a separação das camadasO jQuery ajuda isso, pois ele atua somente no clienteQuando precisa de dados do servidor ele solicita via Ajax28
- 29. Demo
- 30. Mindset30 - Nós precisamos de um controle Repeater! - Nós já o temos, se chama: laço de foreach.Conversa entre desenvolvedores da Microsoft, segundo relatado por Scott Hanselman, do time do MVC.
- 31. LinksSite do ASP.Nethttp://www.asp.net/mvc Blog do Scot Hanselman (MSFT – Routing/MVC)http://www.hanselman.com/blog/CategoryView.aspx?category=ASP.NET+MVCBlog do Scott Guthrie (MSFT)http://weblogs.asp.net/scottgu/archive/tags/ASP.NET/default.aspx Blog do Phil Haack (MSFT – Routing/MVC)http://haacked.com/Tags/ASP.NET%20MVC/default.aspx Blog do Rob Conery (MSFT – Routing/MVC)http://blog.wekeroad.com/tags/aspnetmvc Blog do Giovanni:http://unplugged.giggio.net/?tag=/asp.net+mvc 31
- 32. LinksSite do jQueryhttp://www.jQuery.com jQuery UIhttp://www.jQuery UI.comAPI do jQueryhttp://api.jquery.com/http://api.jquery.com/browser jQuery 1.4 API Cheat Sheethttp://www.futurecolors.ru/jquery/ FireBughttp://getfirebug.com/32
- 33. 33
- 34. Victor CavalcanteArquiteto de Software - Stefaninihttp://www.cavalcante.nethttp://twitter.com/vcavalcantevictor@cavalcante.nethttp://www.dotnetarchitects.net04/05/2010
- 35. © 2010 Microsoft Corporation. All rights reserved. Microsoft, MSDN, the MSDN logo, and [list other trademarks referenced] are trademarks of the Microsoft group of companies. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED, OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.