Introduction To ASP.NET MVC

Introducing ASP.NET MVC Alan Dean, Senior Technologist

Model-View-Controller (MVC)

is a well-known design pattern

The original 1978 implementation is described

in depth in the influential 1992 paper

“ Applications Programming in Smalltalk-80:

How to use Model-View-Controller (MVC)”

by Steve Burbeck

…“ the concept of the design pattern in software provides a key to helping developers leverage the expertise of other skilled architects.”

Grady Booch, 1995

MVC consists of three kinds of objects

The Model is the application object

The View is the screen presentation

The Controller defines the way the user interface reacts to user input

Before MVC, user interface designs tended

to lump these objects together

MVC decouples them to

increase flexibility and reuse

Controller Model View

In his paper

Steve Burbeck describes two variations of MVC

a passive model and an active model

The passive model is employed when one controller manipulates the model exclusively

The controller modifies the model and then informs the view that the model has changed and should be refreshed

The model in this scenario is completely independent of the view and the controller, which means that there is no means for the model to report changes in its state

Controller View Model handleEvent service update getData

The HTTP protocol is an example of this.

The browser displays the view and responds to user input, but it does not detect changes in the data on the server.

Only when the browser explicitly requests a refresh is the server interrogated for changes.

Separation of Concerns (SoC)

Object types become ‘pluggable’

Intra-team dependency is reduced

Testability is enhanced

Application flow can be hard to grok

MVC Web Frameworks

Java has Swing , Struts , Grails and others

Perl has Catalyst , Gantry , Jifty and others

PHP has Zend , Zoop , Agavi and others

Python has Django , Gluon , Pylon and others

Ruby on Rails is famously ‘opinionated’

… and .NET?

.NET MVC Web Frameworks

Spring.NET

http://www.springframework.net/

Maverick.NET

http://mavnet.sourceforge.net/

MonoRail

http://www.castleproject.org/monorail/

… and now ASP.NET MVC from Microsoft

http://asp.net/downloads/3.5-extensions/

“ The ASP.NET MVC framework is a lightweight, highly testable presentation framework that is integrated with existing ASP.NET features, such as master pages and membership-based authentication.

The MVC framework is defined in the System.Web.Mvc namespace and is a fundamental, supported part of the System.Web namespace”

Demo Create a new ASP.NET MVC Solution

HTTP Request Flow HTTP Response GET /Home/Index HTTP/1.1 HTTP Request Route Handler Controller Model View

HTTP Request Flow public class Global : HttpApplication { protected void Application_Start( object sender, EventArgs e) { RouteTable .Routes.Add( new Route { Url = "[controller]/[action]/[id]" , Defaults = new { action = "Index" , id = ( string ) null }, RouteHandler = typeof ( MvcRouteHandler ) }); } } HTTP Response Route Handler HTTP Request Controller Model View

HTTP Request Flow public class HomeController : Controller { [ ControllerAction ] public void Index() { CompanyInfo companyInfo = new CompanyInfo (); companyInfo.CompanyName = "Your company name here" ; RenderView( "Index" , companyInfo); } } HTTP Response Controller HTTP Request Route Handler Model View

HTTP Request Flow public class CompanyInfo { public string CompanyName { get ; set ; } } HTTP Response Model HTTP Request Route Handler Controller View

HTTP Request Flow public partial class Index : ViewPage < CompanyInfo > { } Response View <% @ Page Language ="C#" AutoEventWireup ="true" CodeBehind ="Index.aspx.cs" Inherits ="MvcApplication.Views.Home.Index" %> < html > < head > < title > <%= this.ViewData.companyName %> </ title > </ head > < body > <%= Html.ActionLink( “Homepage" , "Index" , "Home" ) %> < div > Welcome! </ div > </ body > </ html > HTTP Request Route Handler Controller Model

HTTP Request Flow HTTP/1.1 200 OK Content-Type: text/html <html> <head> <title>Your company name here</title> </head> <body> <a href="/Home/Index">Index</a> <div>Welcome!</div> </body> </html> HTTP Request Route Handler Controller Model View HTTP Response

Wiki A wiki is software that allows users to create, edit, and link web pages easily

Ward Cunningham, developer of the first wiki, WikiWikiWeb , originally described it as

"the simplest online database that could possibly work"

Wiki Database

CREATE TABLE [dbo].[PageTable]

(

[Id] int IDENTITY (1,1) NOT NULL ,

[Guid] uniqueidentifier NOT NULL ,

[LastModified] datetime NOT NULL ,

[Removed] datetime NULL ,

[Title] varchar (255) NOT NULL ,

[Body] ntext NOT NULL

);

Wiki HTTP API

GET /

GET /page.html

POST /page

GET /page/[title]

GET /page/[title].txt

GET /page/[title].html

GET /page/[title].atom

PUT /page/[title]

DELETE /page/[title]

GET

The GET method means retrieve whatever information (in the form of an entity) is identified by the Request-URI.

Safe & Idempotent

GET /

Accept: text/html, */*

303 See Other

Location: http://localhost/page.html

Cache-Control: public

Expires: Thu, 31 Jan 2008 16:00:00 GMT

GET /page.html

200 OK

Content-Type: text/html

Expires: Thu, 31 Jan 2008 16:00:00 GMT

<html>

<head><title>…</title></head>

<body>

<form

action=" /page " method=" post "

enctype=" application/x-www-form-urlencoded ">

<input type="text" name="title" maxlength="255" />

<textarea name="body" rows="25" cols="80"></textarea>

<input type="submit" value="Create Page" />

</form>

</body>

</html>

POST

The POST method is used to request that the origin server accept the entity enclosed in the request as a new subordinate of the resource identified by the Request-URI

POST /page

Content-Type: application/x-www-form-urlencoded

title=Welcome&body=Welcome+to+my+new+wiki.

201 Created

Content-Location: http://localhost/page/Welcome

Cache-Control: no-cache

<html>

<head>

<title>…</title>

<meta http-equiv=" refresh "

content="0;url= http://localhost:64701/page/Welcome ">

</head>

<body>…</body>

</html>

GET /page/Welcome

303 See Other

Location: http://localhost/page/Welcome.html

Last-Modified: Tue, 29 Jan 2008 16:00:00 GMT

Vary: Accept

GET /page/Welcome.html

200 OK

<html>

<head>

<title>…</title>

<link

href=" http://localhost/page/Welcome.atom "

rel=" alternate " title="…"

type=" application/atom+xml " />

</head>

<body>…</body>

</html>

GET /page/Welcome.atom

Accept: application/atom+xml

200 OK

Content-Type: application/atom+xml

<?xml version="1.0" encoding="utf-8”?>

<feed xml:lang="en" xmlns="http://www.w3.org/2005/Atom">

…

<link href=" http://localhost:64701/page/Welcome " rel=" source " />

<link href=" http://localhost:64701/page/Welcome.atom " rel=" self " type="application/atom+xml" hreflang="en" title="…" />

<link href=" http://localhost:64701/page/Welcome.html " rel=" alternate " type="text/html" hreflang="en" title="…" />

<link href=" http://localhost:64701/page/Welcome.txt " rel=" alternate " type="text/plain" hreflang="en" title="…" />

<entry>…</entry>

</feed>

GET /page/Welcome

Accept: text/plain

303 See Other

Location: http://localhost/page/Welcome.txt

Vary: Accept

GET /page/Welcome.txt

Accept: text/plain

200 OK

Content-Type: text/plain

Welcome to my new wiki.

PUT

The PUT method requests that the enclosed entity be stored under the supplied Request-URI.

If the Request-URI refers to an already existing resource, the enclosed entity SHOULD be considered as a modified version of the one residing on the origin server.

Idempotent

PUT /page/Welcome

Content-Type: text/plain

Welcome to my new [[wiki]].

204 No Content

DELETE

The DELETE method requests that the origin server delete the resource identified by the Request-URI.

Idempotent

DELETE /page/Welcome

204 No Content

RE presentational S tate T ransfer

REST: The Web Used Correctly

A system or application architecture

… that uses HTTP, URI and other Web

standards “correctly”

… is “on” the Web, not tunnelled through it

REST is an Architectural Style

Defines a set of key “constraints”

… that, if met, make an architecture “RESTful”

… with the Web as one example

Equate “REST” with “RESTful HTTP usage”

Stefan Tilkov

Deriving REST

Client-Server

Stateless

Cache

Uniform interface

Layered system

Code on Demand

“ The central feature that distinguishes the REST architectural style from other network-based styles is its emphasis on a uniform interface between components.”

Roy Fielding

Uniform Interface

Uniform resource identification

A set of well-defined operations for manipulation

A shared set of media-types

Hypertext as the engine of application state

Benefits of REST

Hypertext is standardized

fewer UIs

Identification is standardized

less communication

Exchange protocols are standardized

fewer integrations

Interactions are standardized

fewer semantics

Data formats are standardized

fewer translations

“ No matter how hard I try, I still think the WS-* stack is bloated, opaque, and insanely complex. I think it is going to be hard to understand, hard to implement, hard to interoperate, and hard to secure.”