Intro to MVC 3 for Government Developers

Intro to MVC 3 Frank La Vigne US Public Sector Developer Evangelist Microsoft CorporationFrankLa@Microsoft.com / @tableteer / franksworld.com

Not just downloads Documentation Articles Sample Code Specialty sites ◦ ASP.NET ◦ Silverlight.net ◦ WindowsClient.net And much more!A Quick Word About MSDN

 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

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

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

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

What is MVC?

Controller (Input) View Model (Presentation) (Data)ASP.NET MVC 101

 What does MVC look like? Controller Request Controller Retrieves Model “Performs Work” View Response View Visually represents the modelHow MVC Works

Why ShouldWe Care AboutASP.NET MVCinPublic Sector?

 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

 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

 Enable fast, TDD-friendly development for creating sophisticated applications Separation of concerns makes for easier testingTesting

 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 that leverage GPU acceleration with IE9 and IE10Performance

DemoCreating an ASP.NET MVC 3 Project

@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

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

@{ 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

@* <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

Deeper Dive into MVC 3

 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

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

 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

 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

 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

http://www.franksworld.com	167
http://franksworld.com	79
http://thetableteer.com	3
http://paper.li	1

Intro to MVC 3 for Government Developers

by Frank La Vigne on Nov 27, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

4 Embeds 250

Statistics

Intro to MVC 3 for Government Developers — Presentation Transcript