Being a pimp without silverlight
-
Upload
kris-van-der-mast -
Category
Documents
-
view
398 -
download
0
Transcript of Being a pimp without silverlight
![Page 1: Being a pimp without silverlight](https://reader035.fdocuments.us/reader035/viewer/2022062418/5560b700d8b42aef3b8b4a4d/html5/thumbnails/1.jpg)
www.visug.be
BEING A PIMP WITHOUT SILVERLIGHT
Bling-bling with MVC and jQuery
Maarten Balliauw @maartenballiauwKris van der Mast @KvdM
![Page 2: Being a pimp without silverlight](https://reader035.fdocuments.us/reader035/viewer/2022062418/5560b700d8b42aef3b8b4a4d/html5/thumbnails/2.jpg)
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
![Page 3: Being a pimp without silverlight](https://reader035.fdocuments.us/reader035/viewer/2022062418/5560b700d8b42aef3b8b4a4d/html5/thumbnails/3.jpg)
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
![Page 4: Being a pimp without silverlight](https://reader035.fdocuments.us/reader035/viewer/2022062418/5560b700d8b42aef3b8b4a4d/html5/thumbnails/4.jpg)
www.visug.be
Agenda
• ASP.NET WebForms• ASP.NET MVC• jQuery• Resources• Q&A
![Page 5: Being a pimp without silverlight](https://reader035.fdocuments.us/reader035/viewer/2022062418/5560b700d8b42aef3b8b4a4d/html5/thumbnails/5.jpg)
www.visug.be
ASP.NET MVCMega Very Cool?
![Page 6: Being a pimp without silverlight](https://reader035.fdocuments.us/reader035/viewer/2022062418/5560b700d8b42aef3b8b4a4d/html5/thumbnails/6.jpg)
www.visug.be
The ASP.NET familyASP.NET
Dynamic Data & AJAX
ASP.NETWebForms
ASP.NETMVC
Core Runtime
ASP.NETCore
Presentation
![Page 7: Being a pimp without silverlight](https://reader035.fdocuments.us/reader035/viewer/2022062418/5560b700d8b42aef3b8b4a4d/html5/thumbnails/7.jpg)
www.visug.be
ASP.NET WebForms
![Page 8: Being a pimp without silverlight](https://reader035.fdocuments.us/reader035/viewer/2022062418/5560b700d8b42aef3b8b4a4d/html5/thumbnails/8.jpg)
www.visug.be
ASP.NET WebForms
• Taken programming model from WinForms• Fake stateful model• Automatic testing is hard
![Page 9: Being a pimp without silverlight](https://reader035.fdocuments.us/reader035/viewer/2022062418/5560b700d8b42aef3b8b4a4d/html5/thumbnails/9.jpg)
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”
![Page 10: Being a pimp without silverlight](https://reader035.fdocuments.us/reader035/viewer/2022062418/5560b700d8b42aef3b8b4a4d/html5/thumbnails/10.jpg)
www.visug.be
Model-View-Controller in ASP.NET MVC
Controller(Input)
Application LogicView(Presentation)
Request
Response
Model(“DTO” between C and V)
![Page 11: Being a pimp without silverlight](https://reader035.fdocuments.us/reader035/viewer/2022062418/5560b700d8b42aef3b8b4a4d/html5/thumbnails/11.jpg)
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
![Page 12: Being a pimp without silverlight](https://reader035.fdocuments.us/reader035/viewer/2022062418/5560b700d8b42aef3b8b4a4d/html5/thumbnails/12.jpg)
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
![Page 13: Being a pimp without silverlight](https://reader035.fdocuments.us/reader035/viewer/2022062418/5560b700d8b42aef3b8b4a4d/html5/thumbnails/13.jpg)
www.visug.be
New in ASP.NET MVC2...
• Validation• Strongly Typed HTML Helpers• Templated HTML Helpers• Areas• Async Controllers
![Page 14: Being a pimp without silverlight](https://reader035.fdocuments.us/reader035/viewer/2022062418/5560b700d8b42aef3b8b4a4d/html5/thumbnails/14.jpg)
www.visug.be
DEMOASP.NET MVC
![Page 15: Being a pimp without silverlight](https://reader035.fdocuments.us/reader035/viewer/2022062418/5560b700d8b42aef3b8b4a4d/html5/thumbnails/15.jpg)
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
![Page 16: Being a pimp without silverlight](https://reader035.fdocuments.us/reader035/viewer/2022062418/5560b700d8b42aef3b8b4a4d/html5/thumbnails/16.jpg)
www.visug.be
Money, money, money!
$
![Page 17: Being a pimp without silverlight](https://reader035.fdocuments.us/reader035/viewer/2022062418/5560b700d8b42aef3b8b4a4d/html5/thumbnails/17.jpg)
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() {
…}
![Page 18: Being a pimp without silverlight](https://reader035.fdocuments.us/reader035/viewer/2022062418/5560b700d8b42aef3b8b4a4d/html5/thumbnails/18.jpg)
www.visug.be
jQuery Basics
• jQuery Wrappers• jQuery Selectors– $(selector)– jQuery(selector)
![Page 19: Being a pimp without silverlight](https://reader035.fdocuments.us/reader035/viewer/2022062418/5560b700d8b42aef3b8b4a4d/html5/thumbnails/19.jpg)
www.visug.be
Selectors
• Basic Selectors– #id– .class– element– selector1,selector2,selectorN,…– *
• $(this)
![Page 20: Being a pimp without silverlight](https://reader035.fdocuments.us/reader035/viewer/2022062418/5560b700d8b42aef3b8b4a4d/html5/thumbnails/20.jpg)
www.visug.be
Selectors
• Other Selector Categories– Form– Attribute– Hierarchy– Filter– Content– Child
![Page 21: Being a pimp without silverlight](https://reader035.fdocuments.us/reader035/viewer/2022062418/5560b700d8b42aef3b8b4a4d/html5/thumbnails/21.jpg)
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;}
![Page 22: Being a pimp without silverlight](https://reader035.fdocuments.us/reader035/viewer/2022062418/5560b700d8b42aef3b8b4a4d/html5/thumbnails/22.jpg)
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
![Page 23: Being a pimp without silverlight](https://reader035.fdocuments.us/reader035/viewer/2022062418/5560b700d8b42aef3b8b4a4d/html5/thumbnails/23.jpg)
www.visug.be
Events
• Unobtrusive JavaScript• Cross Browser Support• $(<selector>).eventname(<functionpointer>
or inline);
![Page 24: Being a pimp without silverlight](https://reader035.fdocuments.us/reader035/viewer/2022062418/5560b700d8b42aef3b8b4a4d/html5/thumbnails/24.jpg)
www.visug.be
Event Binding
• Binds events to matched sets
• $(selector).bind(“eventName",function);
![Page 25: Being a pimp without silverlight](https://reader035.fdocuments.us/reader035/viewer/2022062418/5560b700d8b42aef3b8b4a4d/html5/thumbnails/25.jpg)
www.visug.be
Chaining
• Powerful• Fluent
• $(selector).method• $(selector).method({…}).method2({…});
![Page 26: Being a pimp without silverlight](https://reader035.fdocuments.us/reader035/viewer/2022062418/5560b700d8b42aef3b8b4a4d/html5/thumbnails/26.jpg)
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
![Page 27: Being a pimp without silverlight](https://reader035.fdocuments.us/reader035/viewer/2022062418/5560b700d8b42aef3b8b4a4d/html5/thumbnails/27.jpg)
www.visug.be
Plug-ins
• Rich Plug-in Ecosystem• Thousands available• Downloadable .js files• You can create your own• http://jQuery.com/plugins
![Page 28: Being a pimp without silverlight](https://reader035.fdocuments.us/reader035/viewer/2022062418/5560b700d8b42aef3b8b4a4d/html5/thumbnails/28.jpg)
www.visug.be
Ajax
• Web Services• WCF• XMLHttpRequest• $.ajax()
![Page 29: Being a pimp without silverlight](https://reader035.fdocuments.us/reader035/viewer/2022062418/5560b700d8b42aef3b8b4a4d/html5/thumbnails/29.jpg)
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"); }});
![Page 30: Being a pimp without silverlight](https://reader035.fdocuments.us/reader035/viewer/2022062418/5560b700d8b42aef3b8b4a4d/html5/thumbnails/30.jpg)
www.visug.be
DEMOWant to see it being used?
![Page 31: Being a pimp without silverlight](https://reader035.fdocuments.us/reader035/viewer/2022062418/5560b700d8b42aef3b8b4a4d/html5/thumbnails/31.jpg)
www.visug.be
RESOURCESLearn more!
![Page 32: Being a pimp without silverlight](https://reader035.fdocuments.us/reader035/viewer/2022062418/5560b700d8b42aef3b8b4a4d/html5/thumbnails/32.jpg)
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
![Page 33: Being a pimp without silverlight](https://reader035.fdocuments.us/reader035/viewer/2022062418/5560b700d8b42aef3b8b4a4d/html5/thumbnails/33.jpg)
www.visug.be
Questions?
More information?http://asp.net/mvc http://jquery.com
Contact us!http://blog.maartenballiauw.behttp://blog.krisvandermast.com
Thank you!