Denver Visual Studio User Group

1. Introduction to ASP.NET MVC 2 Joe Wilson Volare Systems, Inc. Email: joe@volaresystems.com Blog: http://VolareSystems.com/Blog Twitter: joe_in_denver

2. Agenda What is MVC? What are the benefits of MVC? Code walkthroughs Drawbacks of MVC Future of MVC Resources

3. Quick Audience Poll Who has used Web Forms and not MVC? Who has used MVC?

4. Where does MVC fit? Web Forms MVC ASP.NET (Request, Response, Session, Cookies, QueryString, Master Pages)

5. What is MVC? M= Model V= View C= Controller

6. What is MVC? – Views Are .ASPX and .ASCX files Inherit from ViewPage Holds user interface elements (HTML, CSS, JavaScript) Views should not contain much logic Simple “if”s or “foreach”es are OK

7. What is MVC? – Controllers Are .CS files Inherit from Controller Code is in Actions (methods) Validate user input before moving on Works with Models for small logic and data access Render Views, JSON, XML, File, etc.

8. What is MVC? – Models Are .CS files and just POCOs MVC doesn’t dictate how to set up Models Data to display in the View or post from the View back to the Controller Good place for validation attributes Good place for light, display-related logic (FullName, Totals, IsUserLoggedIn, etc.)

9. What about a bigger MVC project? http://whocanhelpme.codeplex.com

10. How Web Forms Works Event Based OnPreRender, OnLoad Page http://server/ProductEdit.aspx Request Response HTML, JSON, File, XML

11. How MVC Works Route Based Controller/Action Action Controller http://server/product/edit Request Response HTML, JSON, File, XML

12. How MVC Works Request (GET or POST) Routing Engine Controller (Action) Response View, JSON, File, XML Model

13. MVC Conventions Action Controller http://server/product/edit View Folder

14. What are the benefits of MVC? Benefit: Separation of Concerns guidance MVC gives guidance about what kind of code goes where Convention over configuration Don’t dump all your code in Page_Load and Button_Click

15. What are the benefits of MVC? Style Sheets, Images Controllers Models JavaScript Views Master Pages Tests

16. What are the benefits of MVC? Benefit: Testability MVC allows creation of a new Controller inside a test Web Forms code behind files are hard to test because HttpContext is hard to mock

17. What are the benefits of MVC? Benefit: Clean HTML MVC controls keep their IDs Easier to navigate with JavaScript and jQuery Easier to build XHTML and Section 508 compliant sites (use W3C Validators and Section508.info to check)

18. What are the benefits of MVC? HTML from Web Forms <span id="ctl00_MainContent_uxdPHAllContent_TripSelector_lblFromDate"> From Date:</span> <input type="text" name="ctl00$MainContent$uxdPHAllContent$TripSelector$txtFromDate" id="ctl00_MainContent_uxdPHAllContent_TripSelector_txtFromDate" /> HTML from MVC <label for="FromDate">From Date:</label> <input type="text"name="FromDate"id="FromDate" />

19. What are the benefits of MVC? Benefit: Clean URLs MVC has more hackable, SEO-friendly URLs URLs without query strings

20. What are the benefits of MVC? URLs for ASP.NET Web Forms http://mysite.com/Shop.aspx?Category=Shirts http://mysite.com/Shop.aspx?ID=123 URLs for ASP.NET MVC http://mysite.com/Shop/Category/Shirts http://mysite.com/Shop/ID/123

23. What are the benefits of MVC? Benefit: Can run alongside Web Forms Don’t have to wait for your next project Just make changes to Web.configs

24. What are the benefits of MVC? Problem: No View State MVC has no View State View state is really helpful for rapid development Not so nice for page size

25. What are the benefits of MVC? <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1MzUzMjI0Ng9kFgwCAg8VAXonaHBfbmxhX3RyZWUnLCAnc2l0ZT11cycsICdwYXJ0bmVyPXVzJywgJ2xvZ2dlZGluPUZhbHNlJywgJ2luc3Q9RmFsc2UnLCAncHJvbW9FbGlnaWJsZT1UcnVlJywgJ2xhbmd1YWdlPUVuZ2xpc2gnLCAnaHA9bmxhJ2QCAw8VApQBJ2hwX25sYV9mcmVlJywgJ2hwVGVzdENlbGw9ZGVmYXVsdF9ubGEnLCAnc2l0ZT11cycsICdwYXJ0bmVyPXVzJywgJ2xvZ2dlZGluPUZhbHNlJywgJ2luc3Q9RmFsc2UnLCAncHJvbW9FbGlnaWJsZT1UcnVlJywgJ2xhbmd1YWdlPUVuZ2xpc2gnLCAnaHA9bmxhJ3wnaHBfbmxhX3NlYXJjaCcsICdzaXRlPXVzJywgJ3BhcnRuZXI9dXMnLCAnbG9nZ2VkaW49RmFsc2UnLCAnaW5zdD1GYWxzZScsICdwcm9tb0VsaWdpYmxlPVRydWUnLCAnbGFuZ3VhZ2U9RW5nbGlzaCcsICdocD1ubGEnZAIIDxUBfCdocF9ubGFfd2lkZ2V0JywgJ3NpdGU9dXMnLCAncGFydG5lcj11cycsICdsb2dnZWRpbj1GYWxzZScsICdpbnN0PUZhbHNlJywgJ3Byb21vRWxpZ2libGU9VHJ1ZScsICdsYW5ndWFnZT1FbmdsaXNoJywgJ2hwPW5sYSdkAgsPFQF4J2hwX25sYV9yMicsICdzaXRlPXVzJywgJ3BhcnRuZXI9dXMnLCAnbG9nZ2VkaW49RmFsc2UnLCAnaW5zdD1GYWxzZScsICdwcm9tb0VsaWdpYmxlPVRydWUnLCAnbGFuZ3VhZ2U9RW5nbGlzaCcsICdocD1ubGEnZAINDxUBeCdocF9ubGFfcjMnLCAnc2l0ZT11cycsICdwYXJ0bmVyPXVzJywgJ2xvZ2dlZGluPUZhbHNlJywgJ2luc3Q9RmFsc2UnLCAncHJvbW9FbGlnaWJsZT1UcnVlJywgJ2xhbmd1YWdlPUVuZ2xpc2gnLCAnaHA9bmxhJ2QCDw9kFgJmD2QWAmYPZBYIAgEPZBYEAgIPFQIZY3RsMDRfY3RsMDBfbV9JRTZfb3ZlcmxheRtjdGwwNF9jdGwwMF9tX0lFNl9jb250YWluZXJkAgoPFQIZY3RsMDRfY3RsMDBfbV9JRTZfb3ZlcmxheRtjdGwwNF9jdGwwMF9tX0lFNl9jb250YWluZXJkAgIPZBYCZg8VAQEwZAIDDxYCHgdWaXNpYmxlaGQCBA8WAh8AZxYCAgEPZBY4Zg8VAhB3d3cuYW5jZXN0cnkuY29tCEFib3V0IFVzZAIBDxUCEHd3dy5hbmNlc3RyeS5jb20IUGFydG5lcnNkAgIPFQIxaHR0cDovL2FuY2VzdHJ5LmN1c3RoZWxwLmNvbS9jZ2ktYmluL2FuY2VzdHJ5LmNmZwpDb250YWN0IFVzZAIDDxUCAApDb250YWN0IFVzZAIEDxUCMWh0dHA6Ly9hbmNlc3RyeS5jdXN0aGVscC5jb20vY2dpLWJpbi9hbmNlc3RyeS5jZmcKQ29udGFjdCBVc2QCBQ8VAjFodHRwOi8vYW5jZXN0cnkuY3VzdGhlbHAuY29tL2NnaS1iaW4vYW5jZXN0cnkuY2ZnCkNvbnRhY3QgVXNkAgYPFQEdQWJlbnRldWVyIEFobmVuZm9yc2NodW5nIEJsb2dkAgcPFQIQd3d3LmFuY2VzdHJ5LmNvbQpBZmZpbGlhdGVzZAIIDxUCEHd3dy5hbmNlc3RyeS5jb20KQWZmaWxpYXRlc2QCCQ8VAhB3d3cuYW5jZXN0cnkuY29tCkFmZmlsaWF0ZXNkAgoPFQIQd3d3LmFuY2VzdHJ5LmNvbQVMZWdhbGQCCw8VAhB3d3cuYW5jZXN0cnkuY29tC0FkdmVydGlzaW5nZAIMDxUCEHd3dy5hbmNlc3RyeS5jb20LQWR2ZXJ0aXNpbmdkAg4PFQEQd3d3LmFuY2VzdHJ5LmNvbWQCDw8VAhB3d3cuYW5jZXN0cnkuY29tATBkAhAPFQExaHR0cDovL3d3dy5hbmNlc3RyeS5jb20vSG9tZVJlZGlyZWN0LmFzcHg/cmVmPTBVS2QCEQ8VARlodHRwOi8vd3d3LmFuY2VzdHJ5LmNvLnVrZAISDxUCIGh0dHA6Ly93d3cuYW5jZXN0cnkuY2E/bGNpZD00MTA1IGh0dHA6Ly93d3cuYW5jZXN0cnkuY2E/bGNpZD0zMDg0ZAITDxUBMWh0dHA6Ly93d3cuYW5jZXN0cnkuY29tL0hvbWVSZWRpcmVjdC5hc3B4P3JlZj0wQVVkAhQPFQEaaHR0cDovL3d3dy5BbmNlc3RyeS5jb20uYXVkAhUPFQIWaHR0cDovL3d3dy5BbmNlc3RyeS5kZRZodHRwOi8vd3d3LmFuY2VzdHJ5Lml0ZAIWDxUBMWh0dHA6Ly93d3cuYW5jZXN0cnkuY29tL0hvbWVSZWRpcmVjdC5hc3B4P3JlZj0wRlJkAhcPFQEWaHR0cDovL3d3dy5hbmNlc3RyeS5mcmQCGA8VATFodHRwOi8vd3d3LmFuY2VzdHJ5LmNvbS9Ib21lUmVkaXJlY3QuYXNweD9yZWY9MFNFZAIZDxUBFmh0dHA6Ly93d3cuYW5jZXN0cnkuc2VkAhsPFQEMQW5jZXN0cnkuY29tZAIdDxUBFUNvcnBvcmF0ZSBJbmZvcm1hdGlvbmQCHg8VBBB3d3cuYW5jZXN0cnkuY29tDlBSSVZBQ1kgUE9MSUNZEHd3dy5hbmNlc3RyeS5jb20UVGVybXMgYW5kIENvbmRpdGlvbnNkZI5o1QBkDUPswAnGKLEp0SlZ+Rv+" />

26. Code!Hello World MVC

27. Code!Contact Form with Validation

28. Templates – EditorForModel()

29. Templates

30. Templates – Customize

31. Templates – DisplayForModel()

32. Templates – DisplayForModel()

33. Templates – Customize

34. Templates – Customize

35. Code!Routing

36. Code!Testing

37. Recap - Key Benefits of MVC Simple web framework Separation of Concerns Convention over configuration Easier testing Model Binding Validation in the model Templates

39. Chart => Google Charts or a jQuery plugin

41. Drawbacks of MVC No more OnClick server events for buttons, etc. Different enough to have a learning curve Ideas for better View engines still solidifying (Web Forms, Spark, NHaml, Razor, etc.)

42. Future of MVC (MVC 3, Preview 1) New Razor view engine .CSHTML files Uses @ to escape to C# instead of <% %>

43. Future of MVC (MVC 3, Preview 1) Support for multiple view engines (Spark, Razor, Web Forms, NHaml, etc.) Common Service Locator for dependency resolution Global action filters (error handling, authorization)

44. Resources Learning ASP.NET MVC ASP.NET MVC official site - http://www.asp.net/mvc Community Four MVC - http://www.c4mvc.net Keeping up with changes to ASP.NET MVC Phil Haack’s Blog - http://haacked.com Scott Guthrie’s Blog - http://weblogs.asp.net/scottgu Advanced ASP.NET MVC Sharp Architecture - http://sharparchitecture.net Who Can Help Me? - http://whocanhelpme.codeplex.com Eric Hexter’s Blog - http://lostechies.com/blogs/hex Jimmy Bogard’s Blog - http://lostechies.com/blogs/jimmy_bogard Email: joe@volaresystems.com Blog: http://VolareSystems.com/Blog Twitter: joe_in_denver