Introduction to ASP.NET MVC 2


Published on

Denver Visual Studio User Group

  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Introduction to ASP.NET MVC 2

  1. 1. Introduction to ASP.NET MVC 2<br />Joe Wilson<br />Volare Systems, Inc.<br />Email:<br />Blog:<br />Twitter: joe_in_denver<br />
  2. 2. Agenda<br />What is MVC?<br />What are the benefits of MVC?<br />Code walkthroughs<br />Drawbacks of MVC<br />Future of MVC<br />Resources<br />
  3. 3. Quick Audience Poll<br />Who has used Web Forms and not MVC?<br />Who has used MVC?<br />
  4. 4. Where does MVC fit?<br />Web Forms<br />MVC<br />ASP.NET<br />(Request, Response, Session, <br />Cookies, QueryString, Master Pages)<br />
  5. 5. What is MVC? <br />M= Model<br />V= View<br />C= Controller<br />
  6. 6. What is MVC? – Views<br />Are .ASPX and .ASCX files<br />Inherit from ViewPage<br />Holds user interface elements (HTML, CSS, JavaScript)<br />Views should not contain much logic<br />Simple “if”s or “foreach”es are OK<br />
  7. 7. What is MVC? – Controllers<br />Are .CS files<br />Inherit from Controller<br />Code is in Actions (methods)<br />Validate user input before moving on<br />Works with Models for small logic and data access<br />Render Views, JSON, XML, File, etc.<br />
  8. 8. What is MVC? – Models<br />Are .CS files and just POCOs<br />MVC doesn’t dictate how to set up Models<br />Data to display in the View or post from the View back to the Controller<br />Good place for validation attributes<br />Good place for light, display-related logic (FullName, Totals, IsUserLoggedIn, etc.)<br />
  9. 9. What about a bigger MVC project?<br /><br />
  10. 10. How Web Forms Works<br />Event Based<br />OnPreRender, OnLoad<br />Page<br />http://server/ProductEdit.aspx<br />Request<br />Response<br />HTML, JSON, File, XML<br />
  11. 11. How MVC Works<br />Route Based<br /> Controller/Action<br />Action<br />Controller<br />http://server/product/edit<br />Request<br />Response<br />HTML, JSON, File, XML<br />
  12. 12. How MVC Works<br />Request (GET or POST)<br />Routing Engine<br />Controller (Action)<br />Response<br />View,<br />JSON, File,<br />XML<br />Model<br />
  13. 13. MVC Conventions<br />Action<br />Controller<br />http://server/product/edit<br />View<br />Folder<br />
  14. 14. What are the benefits of MVC?<br />Benefit: Separation of Concerns guidance<br />MVC gives guidance about what kind of code goes where<br />Convention over configuration<br />Don’t dump all your code in Page_Load and Button_Click<br />
  15. 15. What are the benefits of MVC?<br />Style Sheets, Images<br />Controllers<br />Models<br />JavaScript<br />Views<br />Master Pages<br />Tests<br />
  16. 16. What are the benefits of MVC?<br />Benefit: Testability<br />MVC allows creation of a new Controller inside a test<br />Web Forms code behind files are hard to test because HttpContext is hard to mock<br />
  17. 17. What are the benefits of MVC?<br />Benefit: Clean HTML<br />MVC controls keep their IDs<br />Easier to navigate with JavaScript and jQuery<br />Easier to build XHTML and Section 508 compliant sites (use W3C Validators and to check)<br />
  18. 18. What are the benefits of MVC?<br />HTML from Web Forms<br /><span id="ctl00_MainContent_uxdPHAllContent_TripSelector_lblFromDate"><br />From Date:</span><br /><input type="text" name="ctl00$MainContent$uxdPHAllContent$TripSelector$txtFromDate" id="ctl00_MainContent_uxdPHAllContent_TripSelector_txtFromDate" /><br />HTML from MVC<br /><label for="FromDate">From Date:</label><br /><input type="text"name="FromDate"id="FromDate" /> <br />
  19. 19. What are the benefits of MVC?<br />Benefit: Clean URLs<br />MVC has more hackable, SEO-friendly URLs<br />URLs without query strings<br />
  20. 20. What are the benefits of MVC?<br />URLs for ASP.NET Web Forms<br /><br /><br />URLs for ASP.NET MVC<br /><br /><br />
  21. 21. What are the benefits of MVC?<br />Benefit: Headroom<br />Extensible for changing <br />Routing<br />View Engine<br />Model Binders<br />All code is released as open source<br /><ul><li>Action Filters
  22. 22. Controller Factories</li></li></ul><li>What are the benefits of MVC?<br />Benefit: Simplicity<br />No more OnInit, OnPreRender, OnLoad events<br />No more OnItemDataBound events<br />No more this.Parent.Parent.Parent.FindControl<br />
  23. 23. What are the benefits of MVC?<br />Benefit: Can run alongside Web Forms<br />Don’t have to wait for your next project<br />Just make changes to Web.configs<br />
  24. 24. What are the benefits of MVC?<br />Problem: No View State<br />MVC has no View State<br />View state is really helpful for rapid development<br />Not so nice for page size<br />
  25. 25. What are the benefits of MVC?<br /><input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1MzUzMjI0Ng9kFgwCAg8VAXonaHBfbmxhX3RyZWUnLCAnc2l0ZT11cycsICdwYXJ0bmVyPXVzJywgJ2xvZ2dlZGluPUZhbHNlJywgJ2luc3Q9RmFsc2UnLCAncHJvbW9FbGlnaWJsZT1UcnVlJywgJ2xhbmd1YWdlPUVuZ2xpc2gnLCAnaHA9bmxhJ2QCAw8VApQBJ2hwX25sYV9mcmVlJywgJ2hwVGVzdENlbGw9ZGVmYXVsdF9ubGEnLCAnc2l0ZT11cycsICdwYXJ0bmVyPXVzJywgJ2xvZ2dlZGluPUZhbHNlJywgJ2luc3Q9RmFsc2UnLCAncHJvbW9FbGlnaWJsZT1UcnVlJywgJ2xhbmd1YWdlPUVuZ2xpc2gnLCAnaHA9bmxhJ3wnaHBfbmxhX3NlYXJjaCcsICdzaXRlPXVzJywgJ3BhcnRuZXI9dXMnLCAnbG9nZ2VkaW49RmFsc2UnLCAnaW5zdD1GYWxzZScsICdwcm9tb0VsaWdpYmxlPVRydWUnLCAnbGFuZ3VhZ2U9RW5nbGlzaCcsICdocD1ubGEnZAIIDxUBfCdocF9ubGFfd2lkZ2V0JywgJ3NpdGU9dXMnLCAncGFydG5lcj11cycsICdsb2dnZWRpbj1GYWxzZScsICdpbnN0PUZhbHNlJywgJ3Byb21vRWxpZ2libGU9VHJ1ZScsICdsYW5ndWFnZT1FbmdsaXNoJywgJ2hwPW5sYSdkAgsPFQF4J2hwX25sYV9yMicsICdzaXRlPXVzJywgJ3BhcnRuZXI9dXMnLCAnbG9nZ2VkaW49RmFsc2UnLCAnaW5zdD1GYWxzZScsICdwcm9tb0VsaWdpYmxlPVRydWUnLCAnbGFuZ3VhZ2U9RW5nbGlzaCcsICdocD1ubGEnZAINDxUBeCdocF9ubGFfcjMnLCAnc2l0ZT11cycsICdwYXJ0bmVyPXVzJywgJ2xvZ2dlZGluPUZhbHNlJywgJ2luc3Q9RmFsc2UnLCAncHJvbW9FbGlnaWJsZT1UcnVlJywgJ2xhbmd1YWdlPUVuZ2xpc2gnLCAnaHA9bmxhJ2QCDw9kFgJmD2QWAmYPZBYIAgEPZBYEAgIPFQIZY3RsMDRfY3RsMDBfbV9JRTZfb3ZlcmxheRtjdGwwNF9jdGwwMF9tX0lFNl9jb250YWluZXJkAgoPFQIZY3RsMDRfY3RsMDBfbV9JRTZfb3ZlcmxheRtjdGwwNF9jdGwwMF9tX0lFNl9jb250YWluZXJkAgIPZBYCZg8VAQEwZAIDDxYCHgdWaXNpYmxlaGQCBA8WAh8AZxYCAgEPZBY4Zg8VAhB3d3cuYW5jZXN0cnkuY29tCEFib3V0IFVzZAIBDxUCEHd3dy5hbmNlc3RyeS5jb20IUGFydG5lcnNkAgIPFQIxaHR0cDovL2FuY2VzdHJ5LmN1c3RoZWxwLmNvbS9jZ2ktYmluL2FuY2VzdHJ5LmNmZwpDb250YWN0IFVzZAIDDxUCAApDb250YWN0IFVzZAIEDxUCMWh0dHA6Ly9hbmNlc3RyeS5jdXN0aGVscC5jb20vY2dpLWJpbi9hbmNlc3RyeS5jZmcKQ29udGFjdCBVc2QCBQ8VAjFodHRwOi8vYW5jZXN0cnkuY3VzdGhlbHAuY29tL2NnaS1iaW4vYW5jZXN0cnkuY2ZnCkNvbnRhY3QgVXNkAgYPFQEdQWJlbnRldWVyIEFobmVuZm9yc2NodW5nIEJsb2dkAgcPFQIQd3d3LmFuY2VzdHJ5LmNvbQpBZmZpbGlhdGVzZAIIDxUCEHd3dy5hbmNlc3RyeS5jb20KQWZmaWxpYXRlc2QCCQ8VAhB3d3cuYW5jZXN0cnkuY29tCkFmZmlsaWF0ZXNkAgoPFQIQd3d3LmFuY2VzdHJ5LmNvbQVMZWdhbGQCCw8VAhB3d3cuYW5jZXN0cnkuY29tC0FkdmVydGlzaW5nZAIMDxUCEHd3dy5hbmNlc3RyeS5jb20LQWR2ZXJ0aXNpbmdkAg4PFQEQd3d3LmFuY2VzdHJ5LmNvbWQCDw8VAhB3d3cuYW5jZXN0cnkuY29tATBkAhAPFQExaHR0cDovL3d3dy5hbmNlc3RyeS5jb20vSG9tZVJlZGlyZWN0LmFzcHg/cmVmPTBVS2QCEQ8VARlodHRwOi8vd3d3LmFuY2VzdHJ5LmNvLnVrZAISDxUCIGh0dHA6Ly93d3cuYW5jZXN0cnkuY2E/bGNpZD00MTA1IGh0dHA6Ly93d3cuYW5jZXN0cnkuY2E/bGNpZD0zMDg0ZAITDxUBMWh0dHA6Ly93d3cuYW5jZXN0cnkuY29tL0hvbWVSZWRpcmVjdC5hc3B4P3JlZj0wQVVkAhQPFQEaaHR0cDovL3d3dy5BbmNlc3RyeS5jb20uYXVkAhUPFQIWaHR0cDovL3d3dy5BbmNlc3RyeS5kZRZodHRwOi8vd3d3LmFuY2VzdHJ5Lml0ZAIWDxUBMWh0dHA6Ly93d3cuYW5jZXN0cnkuY29tL0hvbWVSZWRpcmVjdC5hc3B4P3JlZj0wRlJkAhcPFQEWaHR0cDovL3d3dy5hbmNlc3RyeS5mcmQCGA8VATFodHRwOi8vd3d3LmFuY2VzdHJ5LmNvbS9Ib21lUmVkaXJlY3QuYXNweD9yZWY9MFNFZAIZDxUBFmh0dHA6Ly93d3cuYW5jZXN0cnkuc2VkAhsPFQEMQW5jZXN0cnkuY29tZAIdDxUBFUNvcnBvcmF0ZSBJbmZvcm1hdGlvbmQCHg8VBBB3d3cuYW5jZXN0cnkuY29tDlBSSVZBQ1kgUE9MSUNZEHd3dy5hbmNlc3RyeS5jb20UVGVybXMgYW5kIENvbmRpdGlvbnNkZI5o1QBkDUPswAnGKLEp0SlZ+Rv+" /><br />
  26. 26. Code!Hello World MVC<br />
  27. 27. Code!Contact Form with Validation<br />
  28. 28. Templates – EditorForModel()<br />
  29. 29. Templates<br />
  30. 30. Templates – Customize<br />
  31. 31. Templates – DisplayForModel()<br />
  32. 32. Templates – DisplayForModel()<br />
  33. 33. Templates – Customize<br />
  34. 34. Templates – Customize<br />
  35. 35. Code!Routing<br />
  36. 36. Code!Testing<br />
  37. 37. Recap - Key Benefits of MVC<br />Simple web framework<br />Separation of Concerns<br />Convention over configuration<br />Easier testing<br />Model Binding<br />Validation in the model<br />Templates<br />
  38. 38. Drawbacks of MVC<br />Visual Studio web controls can’t help you much, but…<br /><ul><li>GridView=> jqGrid or other jQuery plugins
  39. 39. Chart => Google Charts or a jQuery plugin
  40. 40. Menu => tons of jQuery plugins</li></li></ul><li>Drawbacks of MVC – jqGrid Screen<br />
  41. 41. Drawbacks of MVC<br />No more OnClick server events for buttons, etc.<br />Different enough to have a learning curve<br />Ideas for better View engines still solidifying (Web Forms, Spark, NHaml, Razor, etc.)<br />
  42. 42. Future of MVC (MVC 3, Preview 1)<br />New Razor view engine<br />.CSHTML files<br />Uses @ to escape to C# instead of <% %><br />
  43. 43. Future of MVC (MVC 3, Preview 1)<br />Support for multiple view engines (Spark, Razor, Web Forms, NHaml, etc.)<br />Common Service Locator for dependency resolution<br />Global action filters (error handling, authorization)<br />
  44. 44. Resources<br />Learning ASP.NET MVC<br />ASP.NET MVC official site -<br />Community Four MVC -<br />Keeping up with changes to ASP.NET MVC<br />Phil Haack’s Blog -<br />Scott Guthrie’s Blog -<br />Advanced ASP.NET MVC<br />Sharp Architecture -<br />Who Can Help Me? -<br />Eric Hexter’s Blog -<br />Jimmy Bogard’s Blog -<br />Email:<br />Blog:<br />Twitter: joe_in_denver<br />