The document discusses ASP.NET MVC and jQuery. It introduces ASP.NET MVC as an alternative to WebForms that allows for better testability and control over HTML. jQuery is presented as a JavaScript library that simplifies DOM manipulation and event handling. The presenters then demonstrate features of MVC like model-view-controller separation and jQuery techniques like DOM selection and event binding. Resources for further learning are also provided.

1. Bling-bling with MVC and jQueryBeing a pimp without SilverlightMaarten Balliauw @maartenballiauwKris van der Mast @KvdM

2. Who are we? – MaartenMaarten BalliauwAntwerp, Belgiumwww.realdolmen.comFocus on webASP.NET, ASP.NET MVC, PHP, Azure, VSTS, …MVP ASP.NEThttp://blog.maartenballiauw.behttp://twitter.com/maartenballiauw

3. Who are we? – KrisKris van der MastAntwerp, Belgiumwww.ordina.beFocus on web technologiesASP.NET, ASP.NET MVC, WCF, Silverlight, ...MVP for ASP.NETASP Insiderhttp://blog.krisvandermast.comhttp://www.twitter.com/KvdM

4. AgendaASP.NET WebFormsASP.NET MVCjQueryResourcesQ&A

5. ASP.NET MVCMega Very Cool?

6. The ASP.NET familyASP.NETDynamic Data & AJAXPresentationASP.NETWebFormsASP.NETMVCASP.NETCoreCore Runtime

7. ASP.NET WebForms

8. ASP.NET WebFormsTaken programming model from WinFormsFake stateful modelAutomatic testing is hard

9. ASP.NET MVCTestabilityControl over HTMLExtensibilityIt makes you thinkLearn new concepts“if you are allergic to porc,don’t go work in a sausage factory”

10. Model-View-Controller in ASP.NET MVCModel(“DTO” between C and V)Controller(Input)RequestResponseApplication LogicView(Presentation)

11. CharacteristicsMaintain Clean Separation of ConcernsEasy Testing Red/Green TDD Highly maintainable applications by defaultExtensible and PluggableSupport replacing any component of system

12. CharacteristicsEnable clean URLs and SEOSEO friendly URL structuresGreat ASP.NET integrationAll providers are supportedMembership, Caching, Session, …ASP.NET designer in VS2008/VS2010

13. New in ASP.NET MVC2...ValidationStrongly Typed HTML HelpersTemplated HTML HelpersAreasAsync Controllers

14. DEMOASP.NET MVC

15. jQueryWhat is jQuery?JavaScript Abstraction“LINQ to DOM”Why use jQuery?Making JavaScript and the DOM suck lessEasy to UseRich Plug-in EcosystemCross Browser Support

16. Money, money, money!$

17. The BasicsjQuery() and $()The ready() FunctionEffective when DOM is readyjQuery(document).ready(main);$(document).ready(main);$(document).ready(function() { … } );$(function() { … } );function main() { …}

18. jQuery BasicsjQuery WrappersjQuery Selectors$(selector)jQuery(selector)

19. SelectorsBasic Selectors#id.classelement selector1,selector2,selectorN,…*$(this)

20. SelectorsOther Selector CategoriesFormAttributeHierarchyFilterContentChild

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 JavaScriptStart with “plain old HTML”Layer on some CSS styling providing visual styleLayer on some JavaScript providing enhanced behaviour

23. EventsUnobtrusive JavaScriptCross Browser Support$(<selector>).eventname(<functionpointer> or inline);

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

25. ChainingPowerfulFluent$(selector).method$(selector).method({…}).method2({…});

26. Manipulating HTMLhtml()Gets/sets the innerHTML text()Gets/sets the innerTextMethod, not property syntaxOther Methodsappend() prepend()appendTo() prependTo()remove

27. Plug-insRich Plug-in EcosystemThousands availableDownloadable .js filesYou can create your ownhttp://jQuery.com/plugins

28. AjaxWeb ServicesWCFXMLHttpRequest$.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. DEMOWant to see it being used?

31. ResourcesLearn more!

32. Resourceshttp://www.jquery.comhttp://www.asp.net/mvchttp://jqueryui.com/demos/http://www.bing.comhttp://www.trirand.net/demoaspnetmvc.aspx

33. Questions?More information?http://asp.net/mvchttp://jquery.comContact us!http://blog.maartenballiauw.behttp://blog.krisvandermast.comThank you!