Building a Next-Generation Web Application with ASP.NET MVC 2 and jQuery Nate Kohari Co-Founder / CTO Enkari, Ltd.

Who?

Goals

ASP.NET is a great platform for building attractive, standards-compliant rich internet applications

You can build rich internet applications without Silverlight or Flash

Why ASP.NET MVC?

BizSpark

Why jQuery?

(demo)

User Action Metadata Lookup Route Lookup Filters Domain Service Event Broadcast Anatomy of a typical Zen request

User Action Metadata Lookup Route Lookup Filters Domain Service Event Broadcast ASP.NET MVC HTML/JavaScript

User Action Metadata Lookup Route Lookup Filters Domain Service Event Broadcast

JS.Class

Zen.Ui.StoryCard = new JS.Class({ func1: function() {... }, func2: function() {... } }); var card = new Zen.Ui.StoryCard();

Behaviors

$(“.story-card”).attach( Zen.Ui.Behaviors.StoryCard);

Find all elements with the CSS class story-card… $(“.story-card”).attach( Zen.Ui.Behaviors.StoryCard);

…and apply the appropriate behavior $(“.story-card”).attach( Zen.Ui.Behaviors.StoryCard);

Which card did the user move?

User Action Metadata Lookup Route Lookup Filters Domain Service Event Broadcast

... HTML5 data-* attributes (story card)

... HTML5 data-* attributes (story card) { projectid: 123, storyid: 456 } JSON read via Metadata Plugin

Where should we send the request?

User Action Metadata Lookup Route Lookup Filters Domain Service Event Broadcast

One Action = One Route

(“route-per-action”)

<route action=“move” pattern=“project/{projectid}/story/{storyid}/move” verbs=“post”/> Routes defined in XML:

<route action=“move” pattern=“project/{projectid}/story/{storyid}/move” verbs=“post”/> Routes defined in XML: …at app start, parsed & registered in RouteTable

(area) <route action=“move” pattern=“project/{projectid}/story/{storyid}/move” verbs=“post”/> Routes defined in XML:

(controller) <route action=“move” pattern=“project/{projectid}/story/{storyid}/move” verbs=“post”/> Routes defined in XML:

<route action=“move” pattern=“project/{projectid}/story/{storyid}/move” verbs=“post”/> Routes defined in XML:

Url.Action(“move”, “story”, new { projectid = 123, storyid = 456 })

Url.Action(“move”, “story”, new { projectid = 123, storyid = 456 })

But wait… we need the route in JavaScript!

urlfor()

urlfor(“move”, “story”, { projectid: 123, storyid: 456 })

urlfor(“move”, “story”, { projectid: 123, storyid: 456 })

urlfor(“move”, “story”, { projectid: 123, storyid: 456 }) Metadata read from story card

routes.js

User Action Metadata Lookup Route Lookup Filters Domain Service Event Broadcast

User Action Metadata Lookup Route Lookup Filters Domain Service Event Broadcast ASP.NET MVC HTML/JavaScript

Aspect Oriented Programming

[Demand]

[Demand(Permission.EditStory)]

[Secured]

[Secured(SSLMode.Force)]

[Transactional]

Output Filters

[DoNotCache]

[StripWhitespace]

[HandleExceptions]

User Action Metadata Lookup Route Lookup Filters Domain Service Event Broadcast

Filters Security Other cross-cutting concerns

Controller Interprets requests Communicates with browser Sets up view data Filters Security Other cross-cutting concerns

Controller Domain Service Interprets requests Communicates with browser Sets up view data Modifies data model Broadcasts events Filters Security Other cross-cutting concerns

Controller Domain Service Repository Interprets requests Communicates with browser Sets up view data Modifies data model Broadcasts events Persists data to database Filters Security Other cross-cutting concerns

Controller Domain Service Repository Filters LINQ NHibernate

User Action Metadata Lookup Route Lookup Filters Domain Service Event Broadcast

Messenger SMTP Service Domain Service XMPP Service

Messenger SMTP Service Domain Service XMPP Service Events queued

Messenger SMTP Service Domain Service XMPP Service Events queued

Messenger SMTP Service Domain Service XMPP Service notifications IM notifications Events queued

User Action Metadata Lookup Route Lookup Filters Domain Service Event Broadcast Recap

Thanks for listening! Nate Kohari