introduction to asp.net mvc

The ASP.NET MVC Framework

Jess ChadwickIndependent Consultant

Microsoft MVP, ASPInsider

We thank the following companies for their gracious sponsorship

Platinum Sponsors

Gold Sponsor

Agenda• What is ASP.NET MVC?– Overview / Goals– Quick demo

• The Pattern• AJAX-ifying your MVC app• Testability• Advanced Features

What is ASP.NET MVC?• Microsoft’s ASP.NET implementation of the

MVC software pattern• More control over your HTML and URLs• More easily testable framework• A new Web Project type for ASP.NET• An option / alternative

DEMO: MVC HELLO WORLDLet’s whet the appetite!

What’s the Point?• This is not “Web Forms v.Next”– All about alternatives

• Flexibility– Extend it… or not– Create your own Controller- and View- Engines or use

others such as Brail or NHaml• Fundamental– Part of System.Web namespace– Fully supported

• KISS & DRY

Driving Goals• Separation of Concerns– Easy testing & TDD– Highly-maintainable applications

• Extensible and Pluggable– Plug in what you need– Build your own custom build

Driving Goals (cont’d)

• Clean URLs and HTML– SEO and REST friendly

• Great interaction with ASP.NET– Handlers, Modules, Providers, etc. still work– .ASPX, .ASCX, .MASTER pages• Visual Studio ASP.NET Designer surface

SO, WHAT IS IT?

The Pattern

Model

ControllerView

The Model“The center of the universe”

• This represents your core business domain…AKA – your “bread and butter”

• Preferably independent of any specific technology

Views Are for rendering/output. Are pretty “stupid”

Web Forms as default ViewEngine .ASPX, .ASCX, .MASTER, etc.

Html Helpers for rendering markup Can replace with other view technologies:

Template engines (NVelocity, Brail, …). Output formats (images, RSS, JSON, …). Mock out for testing.

Can use loosely typed or strongly typed data

Controllers• URLs route to actions on controllers, not

pages• Controller executes logic, loads data (if

any), and chooses view.• Can also redirect to other views & URLs

public ActionResult ShowPost(int id) { Post p = PostRepository.GetPostById(id); if (p == null) { return View("nosuchpost", id); } else { return View(“showpost", p); }}

ASP.NET MVC vs. Web Forms

View (ASPX)

--------------Controller

(Code-Behind)

ASP.NET Web Forms (Page Controller)

Model

Data

Product Controller

List View

ASP.NET MVC (Front Controller)

Model Data

Detail View

Model

ControllerView

The MVC Pattern in action• Browser makes a request• Route is determined• Controller is activated• Method (Action) on

Controller is invoked• Controller does some stuff• Renders View, passing in

custom ViewData• URLs are rendered,

pointing to other Controllers

Request FlowRequest

HTTPRouting

Route RouteHandler

HttpHandler Controller

ViewEngine View

Response

URL Routing• Developers add Routes to a global RouteTable• Mapping creates a RouteData - a bag of key/values

routes.MapRoute( "blog/bydate/{year}/{month}/{day}", new { controller = “blog”, action = “show” }, Constraints = new RouteValueDictionary { {"year", @"\d{1.4}"}, {"month", @"\d{1.2}"}, {"day", @"\d{1.2}"}} })

URL Routing (cont’d)

• Separate assembly, not closely tied/related to ASP.NET MVC

DEMO: ONLINE CATALOG SAMPLE

USING ASP.NET MVC TO CREATE RICH WEB EXPERIENCES

I don’t care if “Web 2.0” is a cliché!

ASP.NET MVC: User Controls

• Isolate reusable view components– (Not the logic to retrieve the data!)

DEMO

Adding User Controlsto Your Views

This should be nothing new, but it does prepare us for bigger and better things…

ASP.NET MVC: Partial Rendering

• You can render user controls:– As part of a page, or…– Down the wire by themselves!

DEMO: AJAX-IFYING THE ONLINE CATALOG SAMPLE

TESTABILITY“What!? I can mock out HttpContext!?”

Designed for Testability• Mockable Intrinsics–HttpContextBase, HttpResponseBase,

HttpRequestBase• Extensibility – IController– IControllerFactory– IRouteHandler–ViewEngineBase

Testing Controller Actions• No requirement to test within ASP.NET runtime!– Use RhinoMocks, TypeMock, Moq, etc.– Create Test versions of the parts of the runtime you

want to stub[TestMethod]public void ShowPostsDisplayPostView() { TestPostRepository repository = new TestPostRepository(); TestViewEngine viewEngine = new TestViewEngine();

BlogController controller = new BlogController(…); var result = controller.ShowPost(2) as ViewResult;

Assert.AreEqual("showpost",result.ViewName); Assert.IsTrue(repository.GetPostByIdWasCalled); Assert.AreEqual(2, repository.LastRequestedPostId);}

DEMO: TEST-DRIVEN DEVELOPMENT

“Wasn’t this supposed to come first?”

ADVANCED ASP.NET MVC FEATURES• Filters• Extensibility

•View Engines•Controller Factories•Routing Handler

Filters• Add pre- and post-execute behaviors to

your controller actions• Useful for logging, compression, etc.

public abstract class ActionFilterAttribute{

public void OnActionExecuting(ActionExecutingContext context) ; public void OnActionExecuted(ActionExecutingContext context) ;

// New in Pre-Preview 3:public void OnResultExecuting(ResultExecutingContext context);public void OnResultExecuted(ResultExecutedContext context);

}

Extensibility

• Views• Controllers•Models• Routes

…all Pluggable

ViewEngineBase• View Engines render output• You get WebForms by default• Can implement your own–MVCContrib has ones for Brail, Nvelocity– NHaml is an interesting one to watch

• View Engines can be used to– Offer new DSLs to make HTML easier– Generate totally different mime/types• Images, RSS, JSON, XML, OFX, VCards, whatever.

Example View: Web Forms<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master"

AutoEventWireup="true"

CodeBehind="List.aspx" Inherits="MvcApplication5.Views.Products.List" Title="Products" %>

<asp:Content ContentPlaceHolderID="MainContentPlaceHolder" runat="server">

<h2><%= ViewData.CategoryName %></h2>

<ul>

<% foreach (var product in ViewData.Products) { %>

<li>

<%= product.ProductName %>

<div class="editlink">

(<%= Html.ActionLink("Edit", new { Action="Edit", ID=product.ProductID })%>)

</div>

</li>

<% } %>

</ul>

<%= Html.ActionLink("Add New Product", new { Action="New" }) %>

</asp:Content>

Example View: NHaml

%h2= ViewData.CategoryName %ul

- foreach (var product in ViewData.Products) %li = product.ProductName .editlink = Html.ActionLink("Edit", new { Action="Edit", ID=product.ProductID }) = Html.ActionLink("Add New Product", new { Action="New" })

Example View: Spark<h2>${CategoryName}</h2>

<viewdata products="IEnumerable[[Product]]"/> <ul if="products.Any()">

<li each="var p in products">${p.Name}</li> </ul> <else>

<p>No products available</p></else>

DEMO: FILTERS AND VIEW ENGINESNow we can really take control!

What’s the Point?• This is not “Web Forms v.Next”– All about alternatives

• Flexibility– Extend it… or not– Create your own Controller- and ViewEngines, or use

others such as Brail or NHaml• Fundamental– Part of System.Web namespace– Fully supported

• KISS & DRY

Questions?

Relevant Sessions Today• Extending ASP.NET MVC w/ MVCContrib

John Zablocki Noon – 1 PM

• Ignite Your MVC Application with Spark View Engine

Curtis Mitchell 4PM – 5:15 PM

Resources• The Bits• ASP.NET MVC: http://asp.net/MVC• MVCContrib: http://www.codeplex.com/MVCContrib

• Quickstart– http://quickstarts.asp.net/3-5-extensions/mvc/default.aspx

• Videos– ASP.NET: http://www.asp.net/learn/3.5-extensions-videos/ – MIX: http://sessions.visitmix.com

• Community/Blogs• ASP.NET Forums: http://forums.asp.net/1146.aspx• Scott Guthrie (ScottGu): http://weblogs.asp.net/scottgu/ • Scott Hanselman: http://www.hanselman.com/blog/ • Phil Haack: http://haacked.com/

– Sample Apps• MVC Samples: http://www.codeplex.com/mvcsamples • CodeCampServer: http://codecampserver.org

Jess ChadwickIndependent Consultant

Microsoft MVP, ASPInsiderjesschadwick@gmail.com

http://blog.jesschadwick.com