1. Bling-bling with MVC and jQuery Being a pimp without Silverlight Maarten Balliauw @maartenballiauw Kris van der Mast @KvdM

2. Who are we? – Maarten Maarten Balliauw Antwerp, Belgium www.realdolmen.com Focus on web ASP.NET, ASP.NET MVC, PHP, Azure, VSTS, … MVP ASP.NET http://blog.maartenballiauw.be http://twitter.com/maartenballiauw

3. Who are we? – Kris Kris van der Mast Antwerp, Belgium www.ordina.be Focus on web technologies ASP.NET, ASP.NET MVC, WCF, Silverlight, ... MVP for ASP.NET ASP Insider http://blog.krisvandermast.com http://www.twitter.com/KvdM

4. Agenda ASP.NET MVC jQuery Resources Q&A

5. ASP.NET MVC Mega Very Cool?

6. The ASP.NET family ASP.NET Dynamic Data & AJAX Presentation ASP.NET WebForms ASP.NET MVC ASP.NET Core Core Runtime

7. ASP.NET WebForms

8. ASP.NET WebForms Taken programming model from WinForms Fake stateful model Automatic testing is hard

9. ASP.NET MVC Testability Control over HTML Extensibility It makes you think Learn new concepts “if you are allergic to porc,don’t go work in a sausage factory”

10. Model-View-Controller in ASP.NET MVC Model (“DTO” between C and V) Controller (Input) Request Response Application Logic View (Presentation)

11. Characteristics Maintain Clean Separation of Concerns Easy Testing Red/Green TDD Highly maintainable applications by default Extensible and Pluggable Support replacing any component of system

12. Characteristics Enable clean URLs and SEO SEO friendly URL structures Great ASP.NET integration All providers are supported Membership, Caching, Session, … ASP.NET designer in VS2008/VS2010

13. New in ASP.NET MVC2... Validation Strongly Typed HTML Helpers Templated HTML Helpers Areas Async Controllers

14. DEMO ASP.NET MVC

15. jQuery What is jQuery? JavaScript Abstraction “LINQ to DOM” Why use jQuery? Making JavaScript and the DOM suck less Easy to Use Rich Plug-in Ecosystem Cross Browser Support

16. Money, money, money! $

17. The Basics jQuery() and $() The ready() Function Effective when DOM is ready jQuery(document).ready(main); $(document).ready(main); $(document).ready(function() { … } ); $(function() { … } ); function main() { … }

18. jQuery Basics jQuery Wrappers jQuery Selectors $(selector) jQuery(selector)

19. Selectors Basic Selectors #id .class element selector1,selector2,selectorN,… * $(this)

20. Selectors Other Selector Categories Form Attribute Hierarchy Filter Content Child

21. It gives you power! functionvalidateForm() { var f = document.forms[0]; var atLeastOneChecked = false; for (var i = 0; i < document.forms[0].length; i++) { var e = document.forms[0][i]; if (e.type == "checkbox" && e.className == "group1" && e.checked) { atLeastOneChecked = true; } } if (!atLeastOneChecked) { alert("Please check at least one item!"); } return atLeastOneChecked; } functionvalidateForm() { if ($(".group1:checked").length == 0) { alert("Please check at least one item!"); return false; } return true; }

22. Unobtrusive JavaScript Start with “plain old HTML” Layer on some CSS styling providing visual style Layer on some JavaScript providing enhanced behaviour

23. Events Unobtrusive JavaScript Cross Browser Support $(<selector>).eventname(<functionpointer> or inline);

24. Event Binding Binds events to matched sets $(selector).bind(“eventName",function);

25. Chaining Powerful Fluent $(selector).method $(selector).method({…}).method2({…});

26. Manipulating HTML html() Gets/sets the innerHTML text() Gets/sets the innerText Method, not property syntax Other Methods append() prepend() appendTo() prependTo() remove

27. Plug-ins Rich Plug-in Ecosystem Thousands available Downloadable .js files You can create your own http://jQuery.com/plugins

28. Ajax Web Services WCF XMLHttpRequest $.ajax()

29. Ajax $.ajax({ type: "POST", url: webMethod, data: parameters, contentType: "application/json; charset=utf-8", dataType: "json", success: function(msg) { $(selector).html(msg.d); }, error: function(e){ $(selector).html(“error message"); } });

30. DEMO Want to see it being used?

31. Resources Learn more!

32. Resources http://www.jquery.com http://www.asp.net/mvc http://jqueryui.com/demos/ http://www.bing.com http://www.trirand.net/demoaspnetmvc.aspx

33. Questions? More information? http://asp.net/mvc http://jquery.com Contact us! http://blog.maartenballiauw.be http://blog.krisvandermast.com Thank you!