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

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 Accept: text/html, */* 200 OK Content-Type: text/html Cache-Control: public 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-Type: text/html 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 Accept: text/html, */* 303 See Other Location: http://localhost/page/Welcome.html Cache-Control: public Last-Modified: Tue, 29 Jan 2008 16:00:00 GMT Vary: Accept

GET /page/Welcome.html Accept: text/html, */* 200 OK Content-Type: text/html Content-Location: http://localhost/page/Welcome Cache-Control: public Last-Modified: Tue, 29 Jan 2008 16:00:00 GMT <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 Content-Location: http://localhost/page/Welcome Cache-Control: public Last-Modified: Tue, 29 Jan 2008 16:00:00 GMT <?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 Cache-Control: public Last-Modified: Tue, 29 Jan 2008 16:00:00 GMT Vary: Accept GET /page/Welcome.txt Accept: text/plain 200 OK Content-Type: text/plain Content-Location: http://localhost/page/Welcome Cache-Control: public Last-Modified: Tue, 29 Jan 2008 16:00:00 GMT 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 Cache-Control: no-cache

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

DELETE /page/Welcome 204 No Content Cache-Control: no-cache

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.” Tim Bray (XML Co-inventor)

“ If you’re ready for REST I suggest you jump on board right away and get ahead of the curve You’ll have to train your developers in REST principles. You definitely need to provide guidance to your people. What you want to do is work to the point where REST becomes the default for all your distributed applications.” Anne Thomas Manes (Burton Group)

Links http://del.icio.us/alan.dean/mvc http://thoughtpad.net/alan-dean Email [email_address] © MMVIII

Introduction To ASP.NET MVC

More Related Content

What's hot (20)

Viewers also liked (12)

Similar to Introduction To ASP.NET MVC (20)

More from Alan Dean (8)

Recently uploaded (20)

Introduction To ASP.NET MVC