Session 1 - ASP - Net MVC Fundamentals

ASP.
NET MVC Training

AM - 3 Sessions
ASP.NET MVC Fundamentals Data Access and Modeling HTML Helpers and Validation
PM self-guided labs
Prerequisites:
Laptop with Web Platform Installer, Visual Studio 2010 Express or higher, ASP.NET 4 Downloads all available on www.webcamps.ms
Who are we?

James Senior
Technical Evangelist, Web Platform @jsenior www.jamessenior.com
Jon Galloway
Community Program Manager @jongalloway weblogs.asp.net/jgalloway
Follow @webcamps Use the hashtag #webcamps
Web Camps Hyderabad - Agenda

Day 1 Morning - 3 Sessions
ASP.NET MVC Fundamentals Data Access and Modeling HTML Helpers and Validation
Day 1 Afternoon 3 Sessions

Validation, Data Annotations, Client side validation jQuery Contributions Templating, Data-Linking and Globalization Dependency Injection, Global Action Filters, and Custom Validation Plus extra sessions (time permitting)
Day 2
Self-led labs on ASP.NET MVC 3
Where to find content?

www.webcamps.ms trainingkit.webcamps.ms
Session 1 - Agenda
The Microsoft Web Platform Web Platform Installer & WebMatrix ASP.NET MVC
What is MVC? Using Models, Views and Controllers Razor
The Microsoft Web Platform

Web Platform Installer
Ajax Control Toolkit & jQuery ASP.NET 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.
Today s Web Developers
I m a professional software developer and I build complex, large scale web sites with a team of developers
I <3 Web Apps. I just need a tool that makes them easier to configure, customize and publish them
I want to build web sites myself with an easy to learn tool and framework
ASP.NET: A Framework For All

Visual Studio 2010 WebMatrix
ASP.NET Core
Caching Pages
ASP.NET Web Forms Intrinsics
Modules Controls
ASP.NET MVC Handlers
Globalization
Razor View Engine
Web Forms View Engine
Master Pages Membership

ASP.NET Web Pages Etc.
Profile
Roles
Web Platform Installer

Makes it easy to install the Microsoft Web Platform from one place
Framework, Web Server, Database and Tools
Cost = free; Size < 2MB Always has latest version of the platform available Available in 9 languages Web App Gallery
Umbraco, DotNetNuke, Drupal, WordPress and many more Submit your own apps, get distribution
Demonstration
WEB PI & WEBMATRIX
ASP.NET MVC 101
Controller (Input)
View (Presentation)
Model (Data)
How MVC Works

What does MVC look like?
Request Controller
Controller Retrieves Model Does Stuff
Response
View
View Visually represents the model
Razor Syntax
@if (User.Grok(Razor)) { <div>w00t!</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
Razor is a cut above the rest

Web Forms (6 markup transitions):
<ul> <% for (int i = 0; i < 10; i++) { %> <li><% =i %></li> <% } %> </ul> <ul> <?php for ($i = 0; $i < 10; $i++) { echo("<li>$i</li>"); } ?> </ul> <ul> @for (int i = 0; i < 10; i++) { <li>@i</li> } </ul>
PHP (2 markup transitions & an echo):
Razor (2 markup transitions):
Move from code to markup easily with Razor

@{
Option 1: HTML Block

} @{
var name = John Doe; <div> Your name: @name </div>
Option 2: Text Block

}
var name = John Doe; <text> Your name: @name </text>
Option 3: Single line of output in markup
@{ var name = John Doe; @: Your name: @name }
Commenting in Razor
@*
Option 1: Markup
*@
<div> Hello World </div>
@{
Option 2: Code
//var name = "John Doe; //@name }
@*
Option 3: Both
*@
@{ var name = "John Doe"; @name }
Layouts make organizing your pages easier

Don t repeat yourself! Define one layout and use it across your website
Page 1
Layout.cshtml
Page 2
Page 3
Layout Syntax
1. Define your Layout 2. Reference it in your pages
/Shared/_Layout.cshtml
<html> <head> MyPage.cshtml <title>Simple Layout</title> </head> @{ <body> Layout = "/Shared/_Layout.cshtml"; @RenderBody() RenderBody() } </body> </html> <p> My content goes here </p>
Use Sections to organize your pages

Sections allow you to define areas of content that change between pages but need to be included in a layout
/Shared/_Layout.cshtml MyPage.cshtml
<html> <head> @{ <title>Simple Layout</title> Layout = "/Shared/_Layout.cshtml"; </head> } <body> @RenderSection("Menu") @section Menu { RenderSection("Menu") @RenderBody() <ul id="pageMenu"> </body> <li>Option 1</li> </html> <li>Option 2</li> </ul> } <p> My content goes here </p>
Use RenderPage to organize pages that don t change

RenderPage() helps you reuse markup and code that doesn t change
/Shared/_Layout.cshtml /Shared/_Footer.cshtml
<html> <div class="footer"> <head> 2010 Contoso <title>Simple Layout</title> </div> </head> <body> @RenderSection("Menu") @RenderBody() @RenderPage("/Shared/_Footer.cshtml") RenderPage("/Shared/_Footer.cshtml") </body> </html>
Demonstration
ASP.NET MVC FUNDAMENTALS
Roadmap for ASP.NET MVC 3

Razor View Engine Multiple View Engine Support Validation Improvements Dependency Injection everywhere Project Dialog Improvements VBHTML support Tasked based helpers Porting MVC Script Libraries to jQuery Granular ValidateInput Remote Validator Improved Caching Support
Q&A

Session 1 - ASP - Net MVC Fundamentals

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Session 1 - ASP - Net MVC Fundamentals

Uploaded by

Copyright:

Available Formats

ASP.

NET MVC Training

Who are we?

Follow @webcamps Use the hashtag #webcamps

Web Camps Hyderabad - Agenda

Day 1 Afternoon 3 Sessions

Where to find content?

The Microsoft Web Platform

Today s Web Developers

ASP.NET: A Framework For All

Web Forms View Engine

Master Pages Membership

Web Platform Installer

WEB PI & WEBMATRIX

ASP.NET MVC 101

How MVC Works

View Visually represents the model

Razor is a cut above the rest

PHP (2 markup transitions & an echo):

Razor (2 markup transitions):

Move from code to markup easily with Razor

Option 1: HTML Block

var name = John Doe; <div> Your name: @name </div>

Option 2: Text Block

var name = John Doe; <text> Your name: @name </text>

Option 3: Single line of output in markup

@{ var name = John Doe; @: Your name: @name }

<div> Hello World </div>

//var name = "John Doe; //@name }

@{ var name = "John Doe"; @name }

Layouts make organizing your pages easier

Use Sections to organize your pages

Use RenderPage to organize pages that don t change

ASP.NET MVC FUNDAMENTALS

Roadmap for ASP.NET MVC 3

You might also like