Being a pimp without silverlight
-
Upload
maarten-balliauw -
Category
Technology
-
view
1.945 -
download
0
Transcript of Being a pimp without silverlight
www.visug.be
BEING A PIMP WITHOUT SILVERLIGHT
Bling-bling with MVC and jQuery
Maarten Balliauw @maartenballiauwKris van der Mast @KvdM
www.visug.be
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
www.visug.be
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
www.visug.be
Agenda
• ASP.NET MVC• jQuery• Resources• Q&A
www.visug.be
ASP.NET MVCMega Very Cool?
www.visug.be
The ASP.NET familyASP.NET
Dynamic Data & AJAX
ASP.NETWebForms
ASP.NETMVC
Core Runtime
ASP.NETCore
Presentation
www.visug.be
ASP.NET WebForms
www.visug.be
ASP.NET WebForms
• Taken programming model from WinForms• Fake stateful model• Automatic testing is hard
www.visug.be
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”
www.visug.be
Model-View-Controller in ASP.NET MVC
Controller(Input)
Application LogicView(Presentation)
Request
Response
Model(“DTO” between C and V)
www.visug.be
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
www.visug.be
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
www.visug.be
New in ASP.NET MVC2...
• Validation• Strongly Typed HTML Helpers• Templated HTML Helpers• Areas• Async Controllers
www.visug.be
DEMOASP.NET MVC
www.visug.be
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
www.visug.be
Money, money, money!
$
www.visug.be
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() {
…}
www.visug.be
jQuery Basics
• jQuery Wrappers• jQuery Selectors– $(selector)– jQuery(selector)
www.visug.be
Selectors
• Basic Selectors– #id– .class– element– selector1,selector2,selectorN,…– *
• $(this)
www.visug.be
Selectors
• Other Selector Categories– Form– Attribute– Hierarchy– Filter– Content– Child
www.visug.be
It gives you power!function validateForm() { 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;}
function validateForm() { if ($(".group1:checked").length == 0) { alert("Please check at least one item!"); return false; } return true;}
www.visug.be
Unobtrusive JavaScript
• Start with “plain old HTML”• Layer on some CSS styling providing visual style• Layer on some JavaScript providing enhanced behaviour
Enrich user experience
HTML CSS jQuery
www.visug.be
Events
• Unobtrusive JavaScript• Cross Browser Support• $(<selector>).eventname(<functionpointer>
or inline);
www.visug.be
Event Binding
• Binds events to matched sets
• $(selector).bind(“eventName",function);
www.visug.be
Chaining
• Powerful• Fluent
• $(selector).method• $(selector).method({…}).method2({…});
www.visug.be
Manipulating HTML
• html()– Gets/sets the innerHTML
• text()– Gets/sets the innerText
• Method, not property syntax• Other Methods– append() prepend()– appendTo() prependTo()– remove
www.visug.be
Plug-ins
• Rich Plug-in Ecosystem• Thousands available• Downloadable .js files• You can create your own• http://jQuery.com/plugins
www.visug.be
Ajax
• Web Services• WCF• XMLHttpRequest• $.ajax()
www.visug.be
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"); }});
www.visug.be
DEMOWant to see it being used?
www.visug.be
RESOURCESLearn more!
www.visug.be
Resources
• http://www.jquery.com• http://www.asp.net/mvc• http://jqueryui.com/demos/• http://www.bing.com• http://www.trirand.net/demoaspnetmvc.aspx
www.visug.be
Questions?
More information?http://asp.net/mvc http://jquery.com
Contact us!http://blog.maartenballiauw.behttp://blog.krisvandermast.com
Thank you!