際際滷

際際滷Share a Scribd company logo
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 users
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 isnt 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  Whats 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)
Whats 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.

More Related Content

What's hot (20)

Why MVC?
Why MVC?Why MVC?
Why MVC?
Wayne Tun Myint
MVC - Introduction
MVC - IntroductionMVC - Introduction
MVC - Introduction
Sudhakar Sharma
MVVM ( Model View ViewModel )
MVVM ( Model View ViewModel )MVVM ( Model View ViewModel )
MVVM ( Model View ViewModel )
Ahmed Emad
ASP.NET MVC.
ASP.NET MVC.ASP.NET MVC.
ASP.NET MVC.
Ni
Introducing ASP.NET Core 2.0
Introducing ASP.NET Core 2.0Introducing ASP.NET Core 2.0
Introducing ASP.NET Core 2.0
Steven Smith
Asp.net MVC training session
Asp.net MVC training sessionAsp.net MVC training session
Asp.net MVC training session
Hrichi Mohamed
Spring ppt
Spring pptSpring ppt
Spring ppt
Mumbai Academisc
Ppt of Basic MVC Structure
Ppt of Basic MVC StructurePpt of Basic MVC Structure
Ppt of Basic MVC Structure
Dipika Wadhvani
ASP.NET MVC Presentation
ASP.NET MVC PresentationASP.NET MVC Presentation
ASP.NET MVC Presentation
ivpol
Spring MVC Framework
Spring MVC FrameworkSpring MVC Framework
Spring MVC Framework
H湛ng Nguy畛n Huy
Spring Boot and REST API
Spring Boot and REST APISpring Boot and REST API
Spring Boot and REST API
07.pallav
ASP.NET Web API
ASP.NET Web APIASP.NET Web API
ASP.NET Web API
habib_786
Introduction to Angularjs
Introduction to AngularjsIntroduction to Angularjs
Introduction to Angularjs
Manish Shekhawat
Asp.Net Core MVC , Razor page , Entity Framework Core
Asp.Net Core MVC , Razor page , Entity Framework CoreAsp.Net Core MVC , Razor page , Entity Framework Core
Asp.Net Core MVC , Razor page , Entity Framework Core
mohamed elshafey
introduction to Vue.js 3
introduction to Vue.js 3 introduction to Vue.js 3
introduction to Vue.js 3
ArezooKmn
types of events in JS
types of events in JS types of events in JS
types of events in JS
chauhankapil
Laravel ppt
Laravel pptLaravel ppt
Laravel ppt
Mayank Panchal
ASP.MVC Training
ASP.MVC TrainingASP.MVC Training
ASP.MVC Training
Mahesh Sikakolli
Angular
AngularAngular
Angular
sridhiya
Spring Web MVC
Spring Web MVCSpring Web MVC
Spring Web MVC
zeeshanhanif
MVVM ( Model View ViewModel )
MVVM ( Model View ViewModel )MVVM ( Model View ViewModel )
MVVM ( Model View ViewModel )
Ahmed Emad
ASP.NET MVC.
ASP.NET MVC.ASP.NET MVC.
ASP.NET MVC.
Ni
Introducing ASP.NET Core 2.0
Introducing ASP.NET Core 2.0Introducing ASP.NET Core 2.0
Introducing ASP.NET Core 2.0
Steven Smith
Asp.net MVC training session
Asp.net MVC training sessionAsp.net MVC training session
Asp.net MVC training session
Hrichi Mohamed
Ppt of Basic MVC Structure
Ppt of Basic MVC StructurePpt of Basic MVC Structure
Ppt of Basic MVC Structure
Dipika Wadhvani
ASP.NET MVC Presentation
ASP.NET MVC PresentationASP.NET MVC Presentation
ASP.NET MVC Presentation
ivpol
Spring Boot and REST API
Spring Boot and REST APISpring Boot and REST API
Spring Boot and REST API
07.pallav
ASP.NET Web API
ASP.NET Web APIASP.NET Web API
ASP.NET Web API
habib_786
Introduction to Angularjs
Introduction to AngularjsIntroduction to Angularjs
Introduction to Angularjs
Manish Shekhawat
Asp.Net Core MVC , Razor page , Entity Framework Core
Asp.Net Core MVC , Razor page , Entity Framework CoreAsp.Net Core MVC , Razor page , Entity Framework Core
Asp.Net Core MVC , Razor page , Entity Framework Core
mohamed elshafey
introduction to Vue.js 3
introduction to Vue.js 3 introduction to Vue.js 3
introduction to Vue.js 3
ArezooKmn
types of events in JS
types of events in JS types of events in JS
types of events in JS
chauhankapil
Angular
AngularAngular
Angular
sridhiya

Similar to MVC Framework (20)

Mvc 130330091359-phpapp01
Mvc 130330091359-phpapp01Mvc 130330091359-phpapp01
Mvc 130330091359-phpapp01
Jennie Gajjar
MVC architecture
MVC architectureMVC architecture
MVC architecture
baabtra.com - No. 1 supplier of quality freshers
Asp 1a-aspnetmvc
Asp 1a-aspnetmvcAsp 1a-aspnetmvc
Asp 1a-aspnetmvc
Fajar Baskoro
Aspnetmvc 1
Aspnetmvc 1Aspnetmvc 1
Aspnetmvc 1
Fajar Baskoro
Asp 1-mvc introduction
Asp 1-mvc introductionAsp 1-mvc introduction
Asp 1-mvc introduction
Fajar Baskoro
Getting started with MVC 5 and Visual Studio 2013
Getting started with MVC 5 and Visual Studio 2013Getting started with MVC 5 and Visual Studio 2013
Getting started with MVC 5 and Visual Studio 2013
Thomas Robbins
Mvc
MvcMvc
Mvc
Furqan Ashraf
Asp.net,mvc
Asp.net,mvcAsp.net,mvc
Asp.net,mvc
Prashant Kumar
Web engineering - MVC
Web engineering - MVCWeb engineering - MVC
Web engineering - MVC
Nosheen Qamar
Mvc presentation
Mvc presentationMvc presentation
Mvc presentation
MaslowB
Spring Web Presentation 123143242341234234
Spring Web Presentation 123143242341234234Spring Web Presentation 123143242341234234
Spring Web Presentation 123143242341234234
horiadobrin
Mvc part 1
Mvc part 1Mvc part 1
Mvc part 1
Gandhi Ghanashyam
Sitecore mvc
Sitecore mvcSitecore mvc
Sitecore mvc
pratik satikunvar
MVC 4
MVC 4MVC 4
MVC 4
Vasilios Kuznos
Asp.net mvc basic introduction
Asp.net mvc basic introductionAsp.net mvc basic introduction
Asp.net mvc basic introduction
Bhagath Gopinath
MVC
MVCMVC
MVC
Ravi Bansal
Asp.net c# MVC-5 Training-Day-1 of Day-9
Asp.net c# MVC-5 Training-Day-1 of Day-9Asp.net c# MVC-5 Training-Day-1 of Day-9
Asp.net c# MVC-5 Training-Day-1 of Day-9
AHM Pervej Kabir
Aspnet mvc
Aspnet mvcAspnet mvc
Aspnet mvc
Hiep Luong
Mvc Brief Overview
Mvc Brief OverviewMvc Brief Overview
Mvc Brief Overview
rainynovember12
Architectural Design & Patterns
Architectural Design&PatternsArchitectural Design&Patterns
Architectural Design & Patterns
Inocentshuja Ahmad

MVC Framework

  • 2. What is MVC? Formulated in 1979 by Trygve Reenskaug working at XEROX Attempt to solve the problem of bridging the gap between a users mental model and the digital model that exists on the computer In particular, large and complex data set manipulation and control.
  • 3. 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
  • 4. 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.
  • 5. Web Diagram Expanding on the basic model, the web model shows a general process for how the framework reacts to HTTP requests.
  • 6. 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.
  • 7. 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.
  • 8. 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.
  • 9. 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)
  • 10. How does MVC work? The MVC Page Lifecycle
  • 11. 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.
  • 12. 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.
  • 13. 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.
  • 14. 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.
  • 15. 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]
  • 16. 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.
  • 17. 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.
  • 18. 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.
  • 19. 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
  • 20. 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.
  • 21. MVC Pitfalls Every tool isnt 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.
  • 22. MVC Whats 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)
  • 23. Whats 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).
  • 24. 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
  • 25. 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
  • 26. 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.
  • 27. 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.