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 WebForms• 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!