Building a Next-Generation Web Applicationwith ASP.NET MVC 2 and jQuery

Nate KohariCo-Founder / CTOEnkari, Ltd.nate@enkari.com

Who?

Goals

ASP.NET is a great platformfor building attractive, standards-compliant

rich internet applications

You can build rich internet applications withoutSilverlight or Flash

Why ASP.NET MVC?

BizSpark

Why jQuery?

(demo)

User Action

Metadata Lookup

Route Lookup

Filters

Domain Service

Event Broadcast

Anatomy of a typicalZen 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 theuser move?

User Action

Metadata Lookup

Route Lookup

Filters

Domain Service

Event Broadcast

<li data-projectid=“123” data-storyid=“456”> ...</li>

HTML5 data-* attributes

(story card)

<li data-projectid=“123” data-storyid=“456”> ...</li>

HTML5 data-* attributes

(story card)

{ projectid: 123, storyid: 456 }

JSON read via Metadata Plugin

Where should we sendthe request?

User Action

Metadata Lookup

Route Lookup

Filters

Domain Service

Event Broadcast

One Action = One Route

One Action = One Route(“route-per-action”)

<app> <project> <route action=“move” pattern=“project/{projectid}/story/{storyid}/move” verbs=“post”/> ... </project> ...</app>

Routes defined in XML:

<app> <project> <route action=“move” pattern=“project/{projectid}/story/{storyid}/move” verbs=“post”/> ... </project> ...</app>

Routes defined in XML:

…at app start, parsed & registered in RouteTable

<app> (area) <project> <route action=“move” pattern=“project/{projectid}/story/{storyid}/move” verbs=“post”/> ... </project> ...</app>

Routes defined in XML:

<app> <project> (controller) <route action=“move” pattern=“project/{projectid}/story/{storyid}/move” verbs=“post”/> ... </project> ...</app>

Routes defined in XML:

<app> <project> <route action=“move” pattern=“project/{projectid}/story/{storyid}/move” verbs=“post”/> ... </project> ...</app>

Routes defined in XML:

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

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

http://agilezen.com/projects/123/story/456/move

But wait… we needthe route in JavaScript!

urlfor()

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

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

http://agilezen.com/projects/123/story/456/move

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

Metadata read from story card <li>

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 SecurityOther cross-cutting concerns

ControllerInterprets requestsCommunicates with browserSets up view data

Filters SecurityOther cross-cutting concerns

Controller

Domain Service

Interprets requestsCommunicates with browserSets up view data

Modifies data modelBroadcasts events

Filters SecurityOther cross-cutting concerns

Controller

Domain Service

Repository

Interprets requestsCommunicates with browserSets up view data

Modifies data modelBroadcasts events

Persists data to database

Filters SecurityOther 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

Email notifications IM notifications

Events queued

User Action

Metadata Lookup

Route Lookup

Filters

Domain Service

Event Broadcast

Recap

Thanks for listening!Nate Koharihttp://kohari.orghttp://agilezen.comnate@enkari.com@nkohari