Post on 14-Dec-2014
description
© 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
© Copyright The Wahlin Group: All rights reserved.
Contact Info
Bloghttp://weblogs.asp.net/dwahlin
Twitter@DanWahlin
Email:dwahlin@theWahlinGroup.com
© Copyright The Wahlin Group: All rights reserved.
rev 1.0/0111
Agenda
• The MVC Pattern• ASP.NET MVC 3• Getting Started with Razor• Demos
© Copyright The Wahlin Group: All rights reserved.
NO!
© Copyright The Wahlin Group: All rights reserved.
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
© Copyright The Wahlin Group: All rights reserved.
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
© Copyright The Wahlin Group: All rights reserved.
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
© Copyright The Wahlin Group: All rights reserved.
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
© Copyright The Wahlin Group: All rights reserved.
rev 1.0/0111
Agenda
• The MVC Pattern• ASP.NET MVC 3• Getting Started with Razor• Demos
© Copyright The Wahlin Group: All rights reserved.
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
© Copyright The Wahlin Group: All rights reserved.
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
© Copyright The Wahlin Group: All rights reserved.
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
© Copyright The Wahlin Group: All rights reserved.
ASP.NET MVC 3 Project Structure
rev 1.0/0111 INTRODUCTION-13
Razor Pages (Views)
"Master Page"
Controllers
Model Classes
© Copyright The Wahlin Group: All rights reserved.
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
© Copyright The Wahlin Group: All rights reserved.
rev 1.0/0111
Agenda
• The MVC Pattern• ASP.NET MVC 3• Getting Started with Razor• Demos
© Copyright The Wahlin Group: All rights reserved.
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
© Copyright The Wahlin Group: All rights reserved.
Without Razor
<ul><% foreach (var cust in Customers) {
%> <li><%: cust.Name %></li><% } %>
</ul>
rev 1.0/0111
© Copyright The Wahlin Group: All rights reserved.
With Razor
<ul>@foreach (var cust in Customers) { <li>@cust.Name</li>}
</ul>
rev 1.0/0111
© Copyright The Wahlin Group: All rights reserved.
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)
© Copyright The Wahlin Group: All rights reserved.
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
© Copyright The Wahlin Group: All rights reserved.
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>
© Copyright The Wahlin Group: All rights reserved.
rev 1.0/0111
Agenda
• The MVC Pattern• ASP.NET MVC 3• Getting Started with Razor• Demos
© Copyright The Wahlin Group: All rights reserved.
Thanks!
Bloghttp://weblogs.asp.net/dwahlin
Twitter@DanWahlin
Email:dwahlin@theWahlinGroup.com
© Copyright The Wahlin Group: All rights reserved.
ASP.NET MVC 3 Demo Site
• Download an ASP.NET MVC 3 demo site from http://mvcmusicstore.codeplex.com
rev 1.0/0111
© Copyright The Wahlin Group: All rights reserved.
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