ASP.NET MVC

Training – Part 1AN ASP.NET MVC INTRODUCTION

Lee Englestone (@LeeEnglestone)

Tech Lead @ Kitbag.com

www.ManchesterDeveloper.com

Overview

This primer covers Microsofts implementation of the MVC pattern the ASP.NET MVC Framework

Examples shown in C# but we use VB.NET and there are some slight differences

Part 1

MVC Pattern, Models, Views, Controllers, Actions, Routing, ActionFilters, Razor, Layout Views, Capturng Input

Part 2

HtmlHelpers, PartialViews, Areas, Bundling, Minification, Scaffolding, TDD/Unit Testing, Dependency Injection, Bootstrap, Custom mobile views, ModelAttributes, ModelState, AsyncController

MVC Pattern/Architecture

ViewController

Model

Initialises

Selects and

Renders

Bound to

Separation of Concerns

• Controller = Code

• View = UI

• Model = Data

ASP.NET MVC v WebForms

WebForms

Maintain states with

VIewState, Postbacks and

Page Events

One big form on each page

Less control over rendered HTML

MVC

Does not automatically

maintain state between

requests. Uses HTTP GET and

POST

Can have multiple forms on a page

More control over rendered

HTML

TDD a lot easier

Seperation of Concerns

Note : MVC does not replace WebForms. WebForms are not evil and they

can also be used with best practices. But it’s easier to see the benefits of

using MVC (In my opinion) especially in Greenfield development

Url Structure

Uses Url Routing (not to be confused with re-writing)

Completely configurable

By default

http://www.site.com/Controller/Action/Id

For example /Product/View/Adidas-bag

If using ‘Areas’ then..

http://www.site.com/Area/Controller/Action/Id

Routing

Routes kept in RouteTable

Defined by default in

App_Start/RouteConfig.cs

Routes urls in an

expected format to an

Action on Controller

Can have restrictions..

i.e. Id must be integer or

2 characters long

The default route (if none provided is Home/Index)

Exercise : Create a new

MVC Application

Exercise : Create a new

MVC Application

ASP.NET MVC

Solution Structure

It should be obvious

where Models, Views and

Controllers live

Content = .css files

Controllers

The entry point of http / page

requests

Mapped to by Routing

Contain ‘Action’ methods

For example returning views,

content, redirects

Inherit from System.Web.Mvc.Controller

class

AsyncController also exists

(Discussed in Part 2)

Actions

Methods on Controllers

If no action is present in url, then the Index method is called (if exists)

so /home would execute Index Action on HomeController

These are just

returning empty

views at the moment

By default it will a

return a view with the

same name as the

Action

ViewBags are

dynamic objects..

ViewBags

Are dynamic objects

They circumvent strongly typing model properties

in views so use sparingly and only if necessary

We don’t use ViewBags

It’s a much better practice to instantiate a

‘Model’ with populated data and pass into the

view

ActionResult Types

EmptyResult

ContentResult*

JsonResult*

RedirectResult*

RedirectToRouteResult

ViewResult*

PartialViewResult*

FileResult

FilePathResult

FileContentResult

FileStreamResult

JavaScriptResult

*The main ones you’ll use

The Following things can be returned from Actions

Exercise : Run Application

Hit F5

Note: This is /Home/Index

i.e Home Controller, Index

Action

This design is the

Bootstrap css framework

(Discussed in Part 2)

Models

Models are usually simple classes with

a number or properties which will be

used in the Views

Properties can be decorated with

different attributes to provide

additional functionality (Covered in

Part 2)

Views

Views are returned from Controllers

Before the View is returned a Model can be

bound to it

They can access Properties on the Views Model in

in a type safe manner

Type of Model, the View uses

Binding to Properties on the Model

General code can be ran in

‘server’ blocks

Exercise : Create

HomeViewModel Model

Create a new file/class in /Models called

HomeViewModel.cs

Add a DateTime property on the class called Now

Add a string property on the class called Message

Exercise : Bind HomeViewModel to

Index View

In the Index Action on the HomeController..

Instantiate a new HomeViewModel object

Set Now property to DateTime.Now

Give Message some text

Return the Model in the View() result

Exercise : Update Home/Index

View to use HomeViewModel

Open /Views/Home/Index.cshtml

Add a @model declaration at the top to use your new

HomeViewModel

Bind the Message property and the Now property to

somewhere on the page using the Razor syntax

Press F5, refreshing page will hit controller and update time

each time

Razor View Syntax

Razor is a markup syntax

Uses @

Used in .cshtml & .vbhtml files

Slightly similar to WebForms <% %>

Code block & variable assignment

Using variable from earlier code

block

Iterating over collection

Conditional clauses

Layout Views

Similar to WebForms .Master pages

Provides common html for pages to share

Provides area for page specific content

Default located at Views\Shared\_Layout.cshtml

Default Layout View

HtmlHelpers that create

Hyperlinks (Discussed in Part 2)

Where main body of Views will appear

Partial View (Discussed in Part 2)

Script Bundle (Discussed in Part 2)

Style Bundle (Discussed in Part 2)

Action Filters

Can run code before / after an action is called

Commonly used ‘out of the box’ ActionFilters

[OutputCache(Duration=“60”)]

Caches and returns the previous result of the Action

for the declared duration. Can VaryByParam etc

[Authorize]

Only allow action to be executed if current user is

authenticated

(HttpContext.Current.User.Identity.IsAuthenticated)

[HttpPost]

Only allow requests HttpPosts to this Action

Exercise : ActionFilters

Add [OutputCache(Duration=60)] to Index method on HomeController

Run application

Refresh browser and notice Action code is not being executed subsequent times and the previous Action result (View) is returned.

Add [Authorize] to the About Action on the HomeController

Run application

Try to go to About page and notice you’ll be redirected to login page

Capturing Input with Forms

Html Form “action” must be to a Controller Action

that expects an HttpPost. (Decorated with

[HttpPost])

Name attributes of Inputs on the form need to

match property names on the Views Model(HtmlHelpers do this automatically, discussed in

Part 2)

Capturing Input with Forms

These 2 are actually the same,

the latter uses HtmlHelpers

These are also the same

(kind of). First = better

Exercise : Capturing Form dataExtend the Model

Add FirstName and LastName string properties to HomeViewModel class

Extend the View to accept user input

Update Home/Index View to include a form with FirstName and LastName fields (see previous slide) whose action is Home/Save

Create Thanks Model

Create new Model called Model/ThanksViewModel with FirstName, LastName properties

Create Thanks View

Create Home/Thanks View, that uses ThanksViewModel and displays FirstName and LastName on page

Extend HomeController

Add a Save Action that has [HttpPost] attribute, accepts HomeViewModel and returns a ThanksViewModel to Thanks View

Next time in Part 2..

HtmlHelpers,

PartialViews,

Areas,

Bundling,

Minification,

Scaffolding,

TDD/Unit Testing,

Dependency Injection,

Bootstrap,

Custom mobile views,

ModelAttributes,

ModelState,

AsyncController