Getting Started with ASP.NET MVC 3 and Razor

© Copyright The Wahlin Group: All rights reserved.

rev 1.0/0111

Getting Started withASP.NET MVC 3

and Razor

Dan Wahlin

http://www.TheWahlinGroup.com


Contact Info

Bloghttp://weblogs.asp.net/dwahlin

Twitter@DanWahlin

Email:[email protected]


rev 1.0/0111

Agenda

• The MVC Pattern• ASP.NET MVC 3• Getting Started with Razor• Demos


NO!


MVC Pattern - A Conceptual View

Controller

Model

View

Request

Response

Data

Tran

sfer

Business InteractionLayer

User InteractionLayer

Binds the model and view together and selects which view to display next

Decouples the backend business logic from the front end

Visualizes the application data supplied by the model


Model

• Has business/domain logic• ASP.NET MVC doesn’t tell you what to use:

– LINQ to SQL– nHiberate– Entity Framework– PLINQO– Custom/POCO object

rev 1.0/0111


View

• Should be “thin” and dumb• No business logic• Only Display logic / Transformation of data• JavaScript is valid for client side - jQuery

rev 1.0/0111


Controller

• Should also be "thin"• Controller has "Actions"• Requests always come through the controller• Decides what data is needed• Tells which View to render• Tells the View what "Model" render

rev 1.0/0111


rev 1.0/0111

Agenda



What is ASP.NET MVC?

• ASP.NET MVC implements the Model-View-Controller pattern

• Provides an alternative to ASP.NET Web Forms• Available from http://www.asp.net/mvc/mvc3

rev 1.0/0111 INTRODUCTION-10


Goals of ASP.NET MVC Framework

rev 1.0/0111

• Clean url schemes (think SEO)• Support existing ASP.NET runtime features• 100% control over rendered HTML• Testable by default (built with TDD in mind)• Support third-party view engines • Support static and dynamic languages • Auto-mapping of form variables to object

properties• Built-in validation support


Key ASP.NET MVC 3 Features

• Razor View Engine• .cshtml extension• Dynamic ViewBag Property• Global Filters• JSON binding for Action Parameters• Enhanced .NET 4 Validation Support• Unobtrusive JavaScript for validation• Layout Page• Partial-Page Output Caching• Support for Dependency Injection

rev 1.0/0111


ASP.NET MVC 3 Project Structure

rev 1.0/0111 INTRODUCTION-13

Razor Pages (Views)

"Master Page"

Controllers

Model Classes


Steps to use ASP.NET MVC

1. Create a controller class in the Controllers folder2. Add one or more Actions (methods) into the controller3. Right-click on an Action and select Add View from the

menu

rev 1.0/0111


rev 1.0/0111

Agenda



What is Razor?

• ASP.NET MVC 3 ships with a new View Engine called "Razor"

• Less markup transitions as compared to the ASP.NET Web Forms View Engine

• Provides a compact way to mingle code with markup

• Uses the @ character

rev 1.0/0111


Without Razor

<ul><% foreach (var cust in Customers) {

%> <li><%: cust.Name %></li><% } %>

</ul>

rev 1.0/0111


With Razor

<ul>@foreach (var cust in Customers) { <li>@cust.Name</li>}

</ul>

rev 1.0/0111


Razor Fundamentals

• Razor provides a compact syntax for mixing "code" with markup:

rev 1.0/0111

Code Blocks

@{ int age = 50; }

HTML Encoding @Model.FirstName

Code + Markup

@foreach(var item in items) { <span>@item.Property</span> }

Unencoded HTML

@Html.Raw(Model.Message)


Razor Example

@model ProjectName.ViewModels.CustomerViewModel<fieldset> <legend>Customer Data</legend> <p> <label for="FirstName">First Name:</label> @Html.EditorFor(m => m.Customer.FirstName) @Html.ValidationMessageFor(m => m.Customer.FirstName, "*") </p> <p> <label for="LastName">Last Name:</label> @Html.EditorFor(m => m.Customer.LastName) @Html.ValidationMessageFor(m => m.Customer.LastName, "*") </p></fieldset>

rev 1.0/0111


Razor Layout Pages

• Razor uses a _Layout.cshtml file as a "master page"

_Layout.cshtml<html><title>@ViewBag.Title</title><body> @RenderBody()</body></html>

Index.cshtml@{ ViewBag.Title = “Your Page Title”; }<div>Hello World!</div>


rev 1.0/0111

Agenda



Thanks!

Bloghttp://weblogs.asp.net/dwahlin

Twitter@DanWahlin

Email:[email protected]


ASP.NET MVC 3 Demo Site

• Download an ASP.NET MVC 3 demo site from http://mvcmusicstore.codeplex.com

rev 1.0/0111


Razor Tools

• Web Forms View to Razor View Converter:

https://github.com/telerik/razor-converter

• MVC 2 to MVC 3 Project Converter

http://aspnet.codeplex.com/releases/view/59008

rev 1.0/0111

Technology

Getting Started with ASP.NET MVC 3 and Razor