Being a pimp without silverlight


Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • MVC is a design pattern that stands for Model-View-Controller. What is strives to do is separate the concerns of an application’s presentation layer by assigning specific roles to the three different components.The Controller is responsible for handling all user input. Once input has been received, the Controller will perform any operations/actions it needs to, which might include interacting with the Model.The Model represents the core concern/logic of the application. Once the Controller retrieves some model data and performs any work with the model/etc it needs to it constructs a presentation model that describes the model in terms the View can understand.The View is the visual representation of the model. It presents the model data to the actual user in a way that is meaningful. In a web application, this would typically be HTML.With these three pieces in place, your presentation layer becomes cleanly separated in such a way that each component can be developed/tested independently.
  • -Model has onepurpose-Controller has onepurpose-View really handles the view, no business logic in there!-Each part is replacable-Source code availableonCodePlex. Not open source, butenablesyou to buildyourown, private flavour
  • -Usersexpect clean URLsnowadays-Notreplacing ASP.NET  built on top of it
  • -Usersexpect clean URLsnowadays-Notreplacing ASP.NET  built on top of it
  • Being a pimp without silverlight

    1. 1. Bling-bling with MVC and jQuery<br />Being a pimp without Silverlight<br />Maarten Balliauw @maartenballiauw<br />Kris van der Mast @KvdM<br />
    2. 2. Who are we? – Maarten<br />Maarten Balliauw<br />Antwerp, Belgium<br /><br />Focus on web<br />ASP.NET, ASP.NET MVC, PHP, Azure, VSTS, …<br />MVP ASP.NET<br /><br /><br />
    3. 3. Who are we? – Kris<br />Kris van der Mast<br />Antwerp, Belgium<br /><br />Focus on web technologies<br />ASP.NET, ASP.NET MVC, WCF, Silverlight, ...<br />MVP for ASP.NET<br />ASP Insider<br /><br /><br />
    4. 4. Agenda<br />ASP.NET MVC<br />jQuery<br />Resources<br />Q&A<br />
    5. 5. ASP.NET MVC<br />Mega Very Cool?<br />
    6. 6. The ASP.NET family<br />ASP.NET<br />Dynamic Data <br />& AJAX<br />Presentation<br />ASP.NET<br />WebForms<br />ASP.NET<br />MVC<br />ASP.NET<br />Core<br />Core <br />Runtime<br />
    7. 7. ASP.NET WebForms<br />
    8. 8. ASP.NET WebForms<br />Taken programming model from WinForms<br />Fake stateful model<br />Automatic testing is hard<br />
    9. 9. ASP.NET MVC<br />Testability<br />Control over HTML<br />Extensibility<br />It makes you think<br />Learn new concepts<br />“if you are allergic to porc,don’t go work in a sausage factory”<br />
    10. 10. Model-View-Controller in ASP.NET MVC<br />Model<br />(“DTO” between C and V)<br />Controller<br />(Input)<br />Request<br />Response<br />Application Logic<br />View<br />(Presentation)<br />
    11. 11. Characteristics<br />Maintain Clean Separation of Concerns<br />Easy Testing <br />Red/Green TDD <br />Highly maintainable applications by default<br />Extensible and Pluggable<br />Support replacing any component of system<br />
    12. 12. Characteristics<br />Enable clean URLs and SEO<br />SEO friendly URL structures<br />Great ASP.NET integration<br />All providers are supported<br />Membership, Caching, Session, …<br />ASP.NET designer in VS2008/VS2010<br />
    13. 13. New in ASP.NET MVC2...<br />Validation<br />Strongly Typed HTML Helpers<br />Templated HTML Helpers<br />Areas<br />Async Controllers<br />
    14. 14. DEMO<br />ASP.NET MVC<br />
    15. 15. jQuery<br />What is jQuery?<br />JavaScript Abstraction<br />“LINQ to DOM”<br />Why use jQuery?<br />Making JavaScript and the DOM suck less<br />Easy to Use<br />Rich Plug-in Ecosystem<br />Cross Browser Support<br />
    16. 16. Money, money, money!<br />$<br />
    17. 17. The Basics<br />jQuery() and $()<br />The ready() Function<br />Effective when DOM is ready<br />jQuery(document).ready(main);<br />$(document).ready(main);<br />$(document).ready(function() { … } );<br />$(function() { … } );<br />function main() {<br /> …<br />}<br />
    18. 18. jQuery Basics<br />jQuery Wrappers<br />jQuery Selectors<br />$(selector)<br />jQuery(selector)<br />
    19. 19. Selectors<br />Basic Selectors<br />#id<br />.class<br />element <br />selector1,selector2,selectorN,…<br />*<br />$(this)<br />
    20. 20. Selectors<br />Other Selector Categories<br />Form<br />Attribute<br />Hierarchy<br />Filter<br />Content<br />Child<br />
    21. 21. It gives you power!<br />functionvalidateForm() {<br /> var f = document.forms[0];<br /> var atLeastOneChecked = false;<br />for (var i = 0; i < document.forms[0].length; i++) {<br /> var e = document.forms[0][i];<br />if (e.type == "checkbox" && <br />e.className == "group1" &&<br />e.checked) {<br />atLeastOneChecked = true;<br /> }<br /> }<br />if (!atLeastOneChecked) {<br /> alert("Please check at least one item!");<br /> }<br /> return atLeastOneChecked;<br />}<br />functionvalidateForm() {<br />if ($(".group1:checked").length == 0) {<br />alert("Please check at least one item!");<br /> return false;<br /> }<br /> return true;<br />}<br />
    22. 22. Unobtrusive JavaScript<br />Start with “plain old HTML”<br />Layer on some CSS styling providing visual style<br />Layer on some JavaScript providing enhanced behaviour<br />
    23. 23. Events<br />Unobtrusive JavaScript<br />Cross Browser Support<br />$(<selector>).eventname(<functionpointer> or inline);<br />
    24. 24. Event Binding<br />Binds events to matched sets<br />$(selector).bind(“eventName",function);<br />
    25. 25. Chaining<br />Powerful<br />Fluent<br />$(selector).method<br />$(selector).method({…}).method2({…});<br />
    26. 26. Manipulating HTML<br />html()<br />Gets/sets the innerHTML <br />text()<br />Gets/sets the innerText<br />Method, not property syntax<br />Other Methods<br />append() prepend()<br />appendTo() prependTo()<br />remove<br />
    27. 27. Plug-ins<br />Rich Plug-in Ecosystem<br />Thousands available<br />Downloadable .js files<br />You can create your own<br /><br />
    28. 28. Ajax<br />Web Services<br />WCF<br />XMLHttpRequest<br />$.ajax()<br />
    29. 29. Ajax<br />$.ajax({<br /> type: "POST",<br /> url: webMethod,<br /> data: parameters,<br /> contentType: "application/json; charset=utf-8",<br /> dataType: "json",<br /> success: function(msg) { <br /> $(selector).html(msg.d);<br /> },<br /> error: function(e){<br /> $(selector).html(“error message"); <br /> }<br />});<br />
    30. 30. DEMO<br />Want to see it being used?<br />
    31. 31. Resources<br />Learn more!<br />
    32. 32. Resources<br /><br /><br /><br /><br /><br />
    33. 33. Questions?<br />More information?<br /><br /><br />Contact us!<br /><br /><br />Thank you!<br />