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

1. Building a Next-Generation Web Applicationwith ASP.NET MVC 2 and jQuery Nate Kohari Co-Founder / CTO Enkari, Ltd. nate@enkari.com

2. Who?

5. Goals

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

7. You can build rich internet applications without Silverlight or Flash

8. Why ASP.NET MVC?

9. BizSpark

10. Why jQuery?

11. (demo)

12. Anatomy of a typical Zen request

13. HTML/JavaScript ASP.NET MVC

15. JS.Class

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

17. Behaviors

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

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

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

21. Which card did the user move?

23. (story card) <li data-projectid=“123” data-storyid=“456”> ... </li> HTML5 data-* attributes

24. (story card) <li data-projectid=“123” data-storyid=“456”> ... </li> HTML5 data-* attributes { projectid: 123, storyid: 456 } JSON read via Metadata Plugin

25. Where should we send the request?

27. One Action = One Route

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

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

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

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

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

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

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

35. Url.Action(“move”, “story”, new { projectid = 123, storyid = 456 }) http://agilezen.com/projects/123/story/456/move

36. But wait… we need the route in JavaScript!

37. urlfor()

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

39. urlfor(“move”, “story”, { projectid: 123, storyid: 456 }) http://agilezen.com/projects/123/story/456/move

40. urlfor(“move”, “story”, { projectid: 123, storyid: 456 }) Metadata read from story card <li>

41. routes.js

43. HTML/JavaScript ASP.NET MVC

44. Aspect Oriented Programming

45. [Demand]

46. [Demand(Permission.EditStory)]

47. [Secured]

48. [Secured(SSLMode.Force)]

49. [Transactional]

50. Output Filters