MVC Framework

MVC Framework
Ashton Feller
4/16/2015

What is MVC?
• Formulated in 1979 by Trygve
Reenskaug working at XEROX
• Attempt to solve the problem of
bridging the gap between a user’s
mental model and the digital model
that exists on the computer
• In particular, large and complex data
set manipulation and control.

Basic Diagram
The following basic MVC (Model View Controller)
diagram illustrates two things.
1. The separation of concerns of logic and view
2. The relationship between user and system

Original Description
• Model: data as a single object or a
hierarchy/tree of objects. Deals with
only one problem domain.
• View: The visual representation.
Highlight and suppress model data.
• Controllers: Link between the User
and the System. It presents data to
Users by arranging various Views
appropriately.

Web Diagram
Expanding on the basic model, the web model
shows a general process for how the
framework reacts to HTTP requests.

Web Description
• Models: Classes that represent the
problem domain. May contain logic
for storing/retrieving from database.
• Views: Templates to generate the
final view at runtime. Can return
CSV, PDF, etc. but typically HTML.
• Controller: Responsible for
accepting requests from a User and
deciding the View to serve up if any.

Before ASP.NET MVC
• ASP.NET Web Forms was the main
Microsoft based framework for web.
• Attempted to plant a stateful system
into a stateless one.
• Caused tightly coupled integration
and minimal extensibility.
• Difficult to understand and maintain.
• No separation of concerns.

First to MVC
• Ruby on Rails first produced a model
view controller framework for web.
• Developers start moving away from
ASP.NET to this MVC framework.
• Microsoft, realizing the traction MVC
was gaining in the web arena and
wanting to keep their technology
experts, releases their ASP.NET
MVC Framework in 2009.

Why Choose MVC?
• The original MVC framework is a
highly adaptable design and has
done very well adapting to the web.
• Enhances developer productivity and
ease-of-use.
• Features include: HtmlHelpers,
Validators, Attribute Based Model
Validation, Pluggable Components,
Dependency Resolution (Testability)

How does MVC work?
The MVC Page Lifecycle

How does MVC work?
• Step 1: Request to ASP.NET stack is
handed over to the routing engine.
• Step 2: If the Controller is found, it is
invoked; otherwise an error occurs.
• Step 3: The Controller interacts with
the Model as required. If there is
incoming data, Model binding is done
by ASP.NET MVC to make the
incoming data into a strongly typed
Model based on the parameters.

How does MVC work?
• Step 4: The model if invoked,
retrieves or saves appropriate data
and returns to the Controller.
• Step 5: The Controller then builds a
View. MVC Cycles through all View
Engines to find a match and renders
that view. The ViewEngine returns
the ActionResult to the Controller.
The Controller uses the ActionResult
as a part of its HTTP response.

What is routing?
• A friendly URL for HTTP requests.
• Replaces the call for a specific
filename with a customized route.
• I.E. www.domain.com/Users/Add
• Default configuration is as follows
– /Controller/Action
– /Controller/Action/ID(Optional)
• Additionally, we can specify GET or
POST Actions with the same name.

Controllers
• In .NET, controllers are C# classes
that inherit the MVC Controller class.
• If custom logic is wanted for an entire
application, a new inheritable class
can be created inheriting from the
ASP.NET MVC Controller class.
• Controllers are primarily responsible
for serving up a view based on a
data model.

Controllers
• Controllers may contain additional
logic like registration process logic.
• Controllers (and actions) may be
“tagged” with attributes to specify
additional processes to adhere to.
– [Authorize]
– [HttpGet]
– [HttpPost]
– [CustomAttributes]

Controller Actions
• Each public method that returns an
ActionResult class or derived class in
a controller is an action.
• ActionResults describe a view to
return to the browser.
• Views can be HTML, JSON Data
(JavaScript), PDF files, CSV files,
and any other file type. The browser
knows what to do with the file.

Model/View Relationship
• In ASP.NET MVC, the Model is a C#
class with a set of public properties
that can be tagged with MVC specific
attributes (like validation).
• Each View has an associated Model
that is used to populate and render
HTML and is sent back to the server,
perhaps modified, on a form (or
HTTP) post to the same Action.

Model/View Relationship
• The Controller controls what data is
retrieved from the data store, how
that data gets fitted to the Model, and
which View template gets used to
produce the response to the request.
• A single View is associated with a
single Action and in ASP.NET must
follow the directory structure
necessary for the MVC framework.

Web Forms Differences
• In ASP.NET Web Forms, ASP controls
were used to populate client side events
that would “POST back” to the server.
• MVC does not render events and calls
HTTP GET and POST exclusively.
• JavaScript can be used to call additional
MVC Controller/Actions while on one
page. This is useful for downloading
files or getting JSON data for JavaScript

MVC Benefits
• Ability to interact the same Model in
multiple Views.
• Allow the user to customize views for
their particular use of the same data.
– For example, an analyst may wish to
see data in a spread sheet while a
manager is more inclined to a chart;
both people are able to have their View
built without changing any business
models or recreating logic.

MVC Pitfalls
• Every tool isn’t without its faults.
• MVC is more complex than Web
Forms due to indirection.
• The event-driven nature has
potential to make debugging tougher.
• Frequent updates to a View can
break the UI. If updates are rapid-
fire, batching model updates to send
to the view is one possible solution.

MVC – What’s Next?
• Multiple MVC Frameworks
• Derivatives of MVC Include:
– Model View ViewModel (MVVM)
• Specifically termed by Microsoft
• Windows Presentation Foundation
• Adopted by AngularJS
– Model View Binder (MVB)
• MVVM Frameworks outside of Microsoft
• Backbone Framework
– Model View Whatever (MVW)

What’s in a name?
• Small differences represented by
these naming convention are only
useful for highly technical
conversations. (Architecture or
Designing of Systems)
• Majority of these systems are similar
with a few caveats.
• Using AngularJS and MVC (or any
two) together repeats some work (or
is completely incompatible).

AngularJS
• Technically an MVVM or MVB
framework, Angular feels like MVC.
• Angular allows dependency injection
and modular additions to features
• Key Components:
– Angular App, Angular Routing Engine,
Angular Services Modules, Angular
Controller Factories, Angular ($scope)
Data Models, Angular Directives,
Angular Broadcast

AngularJS
• Benefits:
– Runs more business logic in the client
browser decreasing server load.
– Quickness of content loading by
circumventing HTTP and receiving
HTML content to populate the DOM.
– Ability to build logical responses to UI
input directly in browser which
enhances functionality of web apps.
– Reduced lines of code compared to
other JavaScript frameworks

AngularJS
• Drawbacks:
– Potential for rewriting validation and/or
API integration code on the server side.
– Without local storage use, session or in
progress data can be lost on refresh.
– Is not supported by browsers older than
a couple years (IE 8 not supported).
– Integration with other frameworks is
tricky and not recommended.
– Relatively new framework so parts can
change and UI tools are sparse.

MVC Takeaway
• MVC adapted to web (ASP.NET) is a
loosely coupled, attribute utilizing,
web application framework.
• Easy to customize interfaces with
integrated validation for forms.
• Increases efficiency of developers.
• Reduces maintenance of systems.
• Allows friendly URL usage.
• Users better understand the data.

MVC Framework

Recommended

More Related Content

What's hot (20)

Similar to MVC Framework (20)

MVC Framework