Intro to MVC 3                                      Frank La Vigne                US Public Sector Developer Evangelist   ...
Not just downloads Documentation Articles Sample Code Specialty sites    ◦ ASP.NET    ◦ Silverlight.net    ◦ WindowsCl...
   ASP.NET MVC 3    ◦   The Microsoft Web Stack    ◦   What is ASP.NET MVC 3?    ◦   What ASP.NET MVC 3 Means for Public ...
Ajax Control Toolkit & jQuery        Web Platform                                 ASP.NET          Installer              ...
I’m a professional       I <3 Web Apps.         I want to build  software developer    I just need a tool that   web sites...
Visual Studio 2010             WebMatrix                   ASP.NET Core       Caching         Modules         Globalizatio...
What is MVC?
Controller                    (Input)       View                     Model  (Presentation)                (Data)ASP.NET MV...
   What does MVC look like?                               Controller     Request    Controller     Retrieves Model       ...
Why ShouldWe Care AboutASP.NET MVCinPublic Sector?
   Users disdain “Ugly” URLs    ◦ http://answers.usa.gov/system/selfservice.cont      roller?CONFIGURATION=1000&PARTITION...
 Powerful, patterns-based way to build  dynamic websites Enables a clean separation of concerns Gives you full control ...
 Enable fast, TDD-friendly development for  creating sophisticated applications Separation of concerns makes for easier ...
 Uses the latest web standards. Full control over markup makes creating  compliant sites easierAccessibility
   No ViewState    ◦ Smaller HTML payload    ◦ Faster downloads   HTML5    ◦ Easy to implement eye catching graphics tha...
DemoCreating an ASP.NET MVC 3 Project
Razor
@if (You.Understand(Razor)) {     <div>Hooray!</div>}• New, Simplified View Engine• Write fewer lines of code• More natura...
Web Forms         <ul>  (6 markup transitions): <%   for (int i = 0; i < 10; i++) { %>                              <li><%...
@{                                var name = “John Doe”;        Option 1:               <div>       HTML Block            ...
@*                  <div>    Option 1:       Hello World     Markup       </div>                *@                @{      ...
Deeper Dive into MVC 3
 Don’t repeat yourself!    Define one layout and use it across     your website                        Page             ...
1. Define your Layout2. Reference it in your pages/Shared/_Layout.cshtml<html>    <head>      <title>Simple Layout</title>...
   Sections allow you to define areas of    content that change between pages but    need to be included in a layout MyPa...
   RenderPage() helps you reuse            markup and code that doesn’t            change/Shared/_Layout.cshtml          ...
   Azure SDK Download:    ◦ http://bit.ly/DownloadAzureSDK   Free 90 Day Windows Azure Trial:    ◦ http://bit.ly/FreeAzu...
Upcoming SlideShare
Loading in …5
×

Intro to MVC 3 for Government Developers

1,674 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,674
On SlideShare
0
From Embeds
0
Number of Embeds
263
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Intro to MVC 3 for Government Developers

  1. 1. Intro to MVC 3 Frank La Vigne US Public Sector Developer Evangelist Microsoft CorporationFrankLa@Microsoft.com / @tableteer / franksworld.com
  2. 2. Not just downloads Documentation Articles Sample Code Specialty sites ◦ ASP.NET ◦ Silverlight.net ◦ WindowsClient.net And much more!A Quick Word About MSDN
  3. 3.  ASP.NET MVC 3 ◦ The Microsoft Web Stack ◦ What is ASP.NET MVC 3? ◦ What ASP.NET MVC 3 Means for Public Sector ◦ Introducing the Razor syntaxAgenda
  4. 4. Ajax Control Toolkit & jQuery Web Platform ASP.NET Installer ADO.NET Entity Framework SQL Server IIS The Microsoft Web Platform combines a rich and powerful web application framework with a supporting cast of tools, servers, technologies and applications for creating, designing, developing and delivering web solutions.The Microsoft Web Platform
  5. 5. I’m a professional I <3 Web Apps. I want to build software developer I just need a tool that web sites myself makes them easier to with an easy to and I build learn tool and configure, customize complex, large and publish them framework scale web sites with a team of developersToday’s Web Developers
  6. 6. Visual Studio 2010 WebMatrix ASP.NET Core Caching Modules Globalization Web Forms View Engine Razor View Engine Pages Controls Master Pages Profile Roles Membership ASP.NET ASP.NET ASP.NET Web Forms Intrinsics MVC Handlers Web Pages Etc.ASP.NET: A Framework For All
  7. 7. What is MVC?
  8. 8. Controller (Input) View Model (Presentation) (Data)ASP.NET MVC 101
  9. 9.  What does MVC look like? Controller Request Controller Retrieves Model “Performs Work” View Response View Visually represents the modelHow MVC Works
  10. 10. Why ShouldWe Care AboutASP.NET MVCinPublic Sector?
  11. 11.  Users disdain “Ugly” URLs ◦ http://answers.usa.gov/system/selfservice.cont roller?CONFIGURATION=1000&PARTITION_ID= 1&CMD=VIEW_ARTICLE&ARTICLE_ID=11951& USERTYPE=1&LANGUAGE=en&COUNTRY=US vs http://www.whitehouse.gov/briefing- room/speeches-and-remarks Search Engine Optimization (SEO) ◦ DiscoverabilityMore Web Savvy Citizens
  12. 12.  Powerful, patterns-based way to build dynamic websites Enables a clean separation of concerns Gives you full control over markup for enjoyable, agile development.Developer Productivity
  13. 13.  Enable fast, TDD-friendly development for creating sophisticated applications Separation of concerns makes for easier testingTesting
  14. 14.  Uses the latest web standards. Full control over markup makes creating compliant sites easierAccessibility
  15. 15.  No ViewState ◦ Smaller HTML payload ◦ Faster downloads HTML5 ◦ Easy to implement eye catching graphics that leverage GPU acceleration with IE9 and IE10Performance
  16. 16. DemoCreating an ASP.NET MVC 3 Project
  17. 17. Razor
  18. 18. @if (You.Understand(Razor)) { <div>Hooray!</div>}• New, Simplified View Engine• Write fewer lines of code• More natural mix code and markup• Helpers save you time• Compatible with ASP.NET Web Pages in WebMatrix • http://bit.ly/WhatIsWebMatrixRazor Syntax
  19. 19. Web Forms <ul> (6 markup transitions): <% for (int i = 0; i < 10; i++) { %> <li><% =i %></li> <% } %> </ul> PHP <ul> <?php (2 markup transitions for ($i = 0; $i < 10; $i++) { & an echo): echo("<li>$i</li>"); } ?> </ul> Razor <ul> @for (int i = 0; i < 10; i++) { (2 markup transitions): <li>@i</li> } </ul>Razor is a cut above the rest
  20. 20. @{ var name = “John Doe”; Option 1: <div> HTML Block Your name: @name </div> } @{ var name = “John Doe”; Option 2: <text> Text Block Your name: @name </text> } Option 3: @{ var name = “John Doe”; Single line of output @: Your name: @name in markup }Easier Code to Markup Transitions
  21. 21. @* <div> Option 1: Hello World Markup </div> *@ @{ //var name = "John Doe”; Option 2: //@name Code } @* Option 3: @{ var name = "John Doe"; Both @name } *@Code Comments in Razor
  22. 22. Deeper Dive into MVC 3
  23. 23.  Don’t repeat yourself!  Define one layout and use it across your website Page 1 Page Layout.cshtml 2 Page 3Layouts make organizingyour pages easier
  24. 24. 1. Define your Layout2. Reference it in your pages/Shared/_Layout.cshtml<html> <head> <title>Simple Layout</title> MyPage.cshtml </head> @{ <body> Layout = "/Shared/_Layout.cshtml"; @RenderBody() } </body></html> <p> My content goes here </p>Layout Syntax
  25. 25.  Sections allow you to define areas of content that change between pages but need to be included in a layout MyPage.cshtml @{ /Shared/_Layout.cshtml Layout = "/Shared/_Layout.cshtml"; <html> } <head> @section Menu { <title>Simple Layout</title> </head> <ul id="pageMenu"> <body> <li>Option 1</li> @RenderSection("Menu") <li>Option 2</li> @RenderBody() </ul> </body> } </html> <p> My content goes here </p>Use Sections to organize yourpages
  26. 26.  RenderPage() helps you reuse markup and code that doesn’t change/Shared/_Layout.cshtml /Shared/_Footer.cshtml<html> <head> <div class="footer"> <title>Simple Layout</title> © 2010 Contoso </head> </div> <body> @RenderSection("Menu") @RenderBody() @RenderPage("/Shared/_Footer.cshtml") </body></html>Use RenderPage to organize pagesthat don’t change
  27. 27.  Azure SDK Download: ◦ http://bit.ly/DownloadAzureSDK Free 90 Day Windows Azure Trial: ◦ http://bit.ly/FreeAzure90DayTrial Phone SDK Download: ◦ http://bit.ly/WinPhoneSDKDownload WebMatrix Download: ◦ http://bit.ly/WhatIsWebMatrix Microsoft Public Sector Developer Site ◦ http://frnk.us/GovDevResources

×