Introducing

ASP.NET MVC 5
- Day 1

By
I. Sekhar Srinivasan ( MCT )
Email Id :
sekharonline4u@gmail.com
Facebook :
http://facebook.com/sekharonline
YouTube :
http://youtube.com/sekharonline4u
Website:
www.sekhartheguru.net

Agenda
Introduction to ASP.NET MVC
Getting Started
Creating an Application in ASP.NET MVC
Working with Controllers in ASP.NET MVC
Understanding Razor View Engine
Understanding Bootstrap 3 usage in MVC

Why Should We Care About?

Build on ASP.NET
Scalable
Extensible
Testable

History of MVC
Introduced by TrygveReenskaug in 1979.
First used in SmallTalk 80.
MVC is also used by:

Java: Structs, Spring

PHP: Cake PHP
Python: Django
Ruby: Ruby on Rails
Perl: Catalyst
.NET: ASP.NET MVC

History of ASP.NET MVC Cont.

MVC Essentials
Models , Views
and Controllers
URL Routing
HTML Helpers
Model Binding

1.0
( 2009 )

Model Level
Validations using
Validation
Attributes
Lambda
Expressions in
HTML Helpers

2.0
( 2010 )

Razor Engine
View
Remote
Validations
Global Action
Filters
Dependency
Resolvers
Project Templates

3.0
( 2011 )

Attribute Based
Web API
Bundles and
Minification
Jquery Mobile
Integration
Open
Authentications

Routing
Async. Model
Web API 2
Bootstrap
Signal R
SPA

4.0
( 2012 )

5.0
( 2013 )

What MVC is Not?

Not the new Web Forms 4.0

Not a replacement for Web Forms, but Adds to it
It can not use Web Controls
Not a whole new engine but sits on ASP.NET engine
Not the best solution for REST

What is ASP.NET MVC ?

A new Web Application Project type
Simply an option
Not a replacement for WebForms
Builds on top ASP.NET
Manual vs Automatic Transmission

What ASP.NET MVC is?

Maintain Clean Separation of Concerns
Extensible and Pluggable
Enable clean URLs and HTML
Great integration within ASP.NET
Tooling Support

Tools to Use Setting Environment

VS.NET 2013: ASP.NET MVC 4 and ASP.NET MVC 5 are built-in
VS.NET 2012: ASP.NET MVC 3 and ASP.NET MVC 4 are built-in
VS.NET 2010 SP1: ASP.NET MVC 2 is built-in
To use MVC3:
Install "ASP.NETMVC3RTM

To use MVC4:
Install "ASP.NETMVC4forVisualStudio2010SP1"

New Features of ASP.NET MVC 5

ONE ASP.NET

Sites

Web Forms

Web Pages

Services

Single
Page
Apps

ASP.NET

MVC

Web API

Signal R

Introducing ASP.NET MVC

MVC is an Architectural Pattern which separates an application into 3 main components.

Model

View

Controller

ASP.NET MVC Flow

Controller
Request

Step 1
Incoming request directed to Controller

ASP.NET MVC Flow

Controller
Model
Step 2
Controller processes request and forms a data Model

ASP.NET MVC Flow

Controller

View
Step 3
Model is passed to View

ASP.NET MVC Flow

Controller

View
Step 4
View transforms Model into appropriate output format

ASP.NET MVC Flow

Controller

View
Step 5
Response is rendered

Response

Traditional Web Application Development

Requests

Slow

Slow

Slow

Slow

Thread Pool

Busy

Busy

Busy

Busy

Async. Programming in ASP.NET MVC 5

Requests
Slow

Thread Pool

To MVC or not To MVC, Thats the <?/>

MVC

Web Forms

You want full control over markup

You like programming against the reusable

control abstraction that encapsulate UI and logic

You want a framework that enforces separation

of concerns

You like using the WYSWIG designer and would

rather avoid angle brackets

TDD/Unit Testing is a priority for you

You like keeping logic on the server rather than

hand writing Javascript

Control abstractions get in your way more than

they help

Unit testing with the MVP pattern is sufficient

for your needs

You like writing Javascript

Understanding Controllers
It is a class which is used to accept the request from the user and
provide the response to the user.
Action
Results

Routing

Controllers
Action

Action
Filters

Action
Parameters

Controllers Actions
Actions are the ultimate request destination Public controller
methods
Non-static
No return value restrictions

Action Parameters
Actions can take a variety of parameters Primitive parameters (int,
bool, string)
Complex parameters
Model Binder looks for parameter values In route data
In form data
In query string

Results
Actions typically return an ActionResult

Action Selectors
ActionName
AcceptVerbs HttpPost, HttpGet

Action Filters

Custom Action Filters

Derive from ActionFilterAttribute base class

ASP.NET MVC Request Flow

Request

HTTP
Routing

Http
Handler

Route

Route
Handler

Controller

Response

View
Engine

View

Demos

Different Sizes !

Different Resolutions !

Devices supported by Bootstrap

Extremely Small
Devices
Phones(<768px)

col-xs-X

Small Devices
Tablets(768px)

Medium Devices
Desktops
(992px)

Large Devices
Desktops
(1200px)

col-sm-X

col-md-X

col-lg-X

What is Bootstrap 3 Grid System ?

1

10

11

Col-md-12
Col-md-6

Col-md-8
col-md-3
col-md-offset-3
Col-md-12col-md-offset-1
Col-md-6
col-md-3
col-md-offset-3
Col-md-8
Col-md-4

Col-md-6

Col-md-4
col-md-3
col-md-offset-1

12

Bootstrap Grid Mobile, Tablet and Desktop

Col-xs-X

Col-md-X

Col-sm-X

Col-md-8 col-sm-6 col-xs-12

10

11

12

Col-md-4 col-xs-6

Demos

Questions?
By
Sekhar Srinivasan ( MCT )
Email Id :
sekharonline4u@gmail.com
Facebook :
http://facebook.com/sekharonline
YouTube :
http://youtube.com/sekharonline4u
Website:
www.sekhartheguru.net