Intro to MVC 3 for Government Developers

Intro to MVC 3
Frank La Vigne
US Public Sector Developer Evangelist
Microsoft Corporation

FrankLa@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 syntax

Agenda

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
developers

Today’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

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 model

How MVC Works

Why Should
We Care About
ASP.NET MVC
in
Public 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)
◦ Discoverability

More 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
testing

Testing

 Uses the latest web standards.
 Full control over markup makes creating
compliant sites easier

Accessibility

 No ViewState
◦ Smaller HTML payload
◦ Faster downloads
 HTML5
◦ Easy to implement eye catching graphics that
leverage GPU acceleration with IE9 and IE10

Performance

Demo
Creating 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/WhatIsWebMatrix

Razor 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>
}

@{
Option 2: <text>
Text Block Your name: @name
</text>
}

Option 3: @{
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

 Don’t repeat yourself!
 Define one layout and use it across
your website
Page
1

Page
Layout.cshtml 2

Page
3

Layouts make organizing
your pages easier

1. Define your Layout
2. 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 your
pages

 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 pages
that 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/GovDev

Resources

Intro to MVC 3 for Government Developers

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Intro to MVC 3 for Government Developers

Semelhante a Intro to MVC 3 for Government Developers (20)

Mais de Frank La Vigne

Mais de Frank La Vigne (20)

Último

Último (20)

Intro to MVC 3 for Government Developers