MVC Framework

Ashton Feller
Ashton FellerBeacon Services Provider, Information Technology Management, Problem Solver, Strategic Customer Awareness
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.
1 de 27

Recomendados

Introduction to mvc architecture por
Introduction to mvc architectureIntroduction to mvc architecture
Introduction to mvc architectureravindraquicsolv
1.3K visualizações17 slides
Model view controller (mvc) por
Model view controller (mvc)Model view controller (mvc)
Model view controller (mvc)M Ahsan Khan
786 visualizações28 slides
MVC ppt presentation por
MVC ppt presentationMVC ppt presentation
MVC ppt presentationBhavin Shah
14K visualizações36 slides
ASP.NET MVC Presentation por
ASP.NET MVC PresentationASP.NET MVC Presentation
ASP.NET MVC Presentationivpol
23.6K visualizações11 slides
Model View Controller (MVC) por
Model View Controller (MVC)Model View Controller (MVC)
Model View Controller (MVC)Javier Antonio Humarán Peñuñuri
36.3K visualizações14 slides
MVC architecture por
MVC architectureMVC architecture
MVC architectureEmily Bauman
1.8K visualizações20 slides

Mais conteúdo relacionado

Mais procurados

MVC Architecture por
MVC ArchitectureMVC Architecture
MVC ArchitecturePrem Sanil
504 visualizações9 slides
Why MVC? por
Why MVC?Why MVC?
Why MVC?Wayne Tun Myint
10.5K visualizações23 slides
ASP.NET Basics por
ASP.NET Basics ASP.NET Basics
ASP.NET Basics baabtra.com - No. 1 supplier of quality freshers
2.8K visualizações54 slides
Introduction to ASP.NET por
Introduction to ASP.NETIntroduction to ASP.NET
Introduction to ASP.NETRajkumarsoy
16.8K visualizações21 slides
Asp.net basic por
Asp.net basicAsp.net basic
Asp.net basicNeelesh Shukla
3.1K visualizações84 slides
ASP.NET MVC Presentation por
ASP.NET MVC PresentationASP.NET MVC Presentation
ASP.NET MVC PresentationVolkan Uzun
5.4K visualizações34 slides

Mais procurados(20)

MVC Architecture por Prem Sanil
MVC ArchitectureMVC Architecture
MVC Architecture
Prem Sanil504 visualizações
Why MVC? por Wayne Tun Myint
Why MVC?Why MVC?
Why MVC?
Wayne Tun Myint10.5K visualizações
Introduction to ASP.NET por Rajkumarsoy
Introduction to ASP.NETIntroduction to ASP.NET
Introduction to ASP.NET
Rajkumarsoy16.8K visualizações
Asp.net basic por Neelesh Shukla
Asp.net basicAsp.net basic
Asp.net basic
Neelesh Shukla3.1K visualizações
ASP.NET MVC Presentation por Volkan Uzun
ASP.NET MVC PresentationASP.NET MVC Presentation
ASP.NET MVC Presentation
Volkan Uzun5.4K visualizações
Spring Framework - MVC por Dzmitry Naskou
Spring Framework - MVCSpring Framework - MVC
Spring Framework - MVC
Dzmitry Naskou10.7K visualizações
ASP.NET MVC. por Ni
ASP.NET MVC.ASP.NET MVC.
ASP.NET MVC.
Ni 1.1K visualizações
ASP.NET Lecture 1 por Julie Iskander
ASP.NET Lecture 1ASP.NET Lecture 1
ASP.NET Lecture 1
Julie Iskander17.2K visualizações
.Net Core por Bertrand Le Roy
.Net Core.Net Core
.Net Core
Bertrand Le Roy10.1K visualizações
java Servlet technology por Tanmoy Barman
java Servlet technologyjava Servlet technology
java Servlet technology
Tanmoy Barman8.6K visualizações
Asp.net and .Net Framework ppt presentation por abhishek singh
Asp.net and .Net Framework ppt presentationAsp.net and .Net Framework ppt presentation
Asp.net and .Net Framework ppt presentation
abhishek singh3.9K visualizações
ASP.NET Web API por habib_786
ASP.NET Web APIASP.NET Web API
ASP.NET Web API
habib_7867.1K visualizações
ASP.NET Core MVC + Web API with Overview por Shahed Chowdhuri
ASP.NET Core MVC + Web API with OverviewASP.NET Core MVC + Web API with Overview
ASP.NET Core MVC + Web API with Overview
Shahed Chowdhuri4.6K visualizações
Asp.net. por Naveen Sihag
Asp.net.Asp.net.
Asp.net.
Naveen Sihag31.1K visualizações
Introduction to React JS por Arno Lordkronos
Introduction to React JSIntroduction to React JS
Introduction to React JS
Arno Lordkronos32.5K visualizações
Spring boot Introduction por Jeevesh Pandey
Spring boot IntroductionSpring boot Introduction
Spring boot Introduction
Jeevesh Pandey3.1K visualizações
Spring Framework - Core por Dzmitry Naskou
Spring Framework - CoreSpring Framework - Core
Spring Framework - Core
Dzmitry Naskou34.8K visualizações
Asp.net MVC training session por Hrichi Mohamed
Asp.net MVC training sessionAsp.net MVC training session
Asp.net MVC training session
Hrichi Mohamed6.3K visualizações

Similar a MVC Framework

Mvc 130330091359-phpapp01 por
Mvc 130330091359-phpapp01Mvc 130330091359-phpapp01
Mvc 130330091359-phpapp01Jennie Gajjar
264 visualizações28 slides
MVC architecture por
MVC architectureMVC architecture
MVC architecturebaabtra.com - No. 1 supplier of quality freshers
1.1K visualizações15 slides
Asp 1a-aspnetmvc por
Asp 1a-aspnetmvcAsp 1a-aspnetmvc
Asp 1a-aspnetmvcFajar Baskoro
19 visualizações22 slides
Aspnetmvc 1 por
Aspnetmvc 1Aspnetmvc 1
Aspnetmvc 1Fajar Baskoro
2K visualizações22 slides
Asp 1-mvc introduction por
Asp 1-mvc introductionAsp 1-mvc introduction
Asp 1-mvc introductionFajar Baskoro
2.1K visualizações40 slides
Getting started with MVC 5 and Visual Studio 2013 por
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 2013Thomas Robbins
14.9K visualizações40 slides

Similar a MVC Framework(20)

Mvc 130330091359-phpapp01 por Jennie Gajjar
Mvc 130330091359-phpapp01Mvc 130330091359-phpapp01
Mvc 130330091359-phpapp01
Jennie Gajjar264 visualizações
Asp 1a-aspnetmvc por Fajar Baskoro
Asp 1a-aspnetmvcAsp 1a-aspnetmvc
Asp 1a-aspnetmvc
Fajar Baskoro19 visualizações
Aspnetmvc 1 por Fajar Baskoro
Aspnetmvc 1Aspnetmvc 1
Aspnetmvc 1
Fajar Baskoro2K visualizações
Asp 1-mvc introduction por Fajar Baskoro
Asp 1-mvc introductionAsp 1-mvc introduction
Asp 1-mvc introduction
Fajar Baskoro2.1K visualizações
Getting started with MVC 5 and Visual Studio 2013 por Thomas Robbins
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 Robbins14.9K visualizações
Mvc por Furqan Ashraf
MvcMvc
Mvc
Furqan Ashraf844 visualizações
Asp.net,mvc por Prashant Kumar
Asp.net,mvcAsp.net,mvc
Asp.net,mvc
Prashant Kumar175 visualizações
Web engineering - MVC por Nosheen Qamar
Web engineering - MVCWeb engineering - MVC
Web engineering - MVC
Nosheen Qamar1.2K visualizações
Mvc presentation por MaslowB
Mvc presentationMvc presentation
Mvc presentation
MaslowB906 visualizações
Sitecore mvc por pratik satikunvar
Sitecore mvcSitecore mvc
Sitecore mvc
pratik satikunvar1.5K visualizações
MVC 4 por Vasilios Kuznos
MVC 4MVC 4
MVC 4
Vasilios Kuznos354 visualizações
Asp.net mvc basic introduction por Bhagath Gopinath
Asp.net mvc basic introductionAsp.net mvc basic introduction
Asp.net mvc basic introduction
Bhagath Gopinath294 visualizações
MVC por Ravi Bansal
MVCMVC
MVC
Ravi Bansal755 visualizações
Asp.net c# MVC-5 Training-Day-1 of Day-9 por AHM Pervej Kabir
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 Kabir923 visualizações
Aspnet mvc por Hiep Luong
Aspnet mvcAspnet mvc
Aspnet mvc
Hiep Luong2.2K visualizações
Mvc Brief Overview por rainynovember12
Mvc Brief OverviewMvc Brief Overview
Mvc Brief Overview
rainynovember121.3K visualizações
Architectural Design & Patterns por Inocentshuja Ahmad
Architectural Design&PatternsArchitectural Design&Patterns
Architectural Design & Patterns
Inocentshuja Ahmad679 visualizações
MVC architecture by Mohd.Awais on 18th Aug, 2017 por Innovation Studio
MVC architecture by Mohd.Awais on 18th Aug, 2017MVC architecture by Mohd.Awais on 18th Aug, 2017
MVC architecture by Mohd.Awais on 18th Aug, 2017
Innovation Studio144 visualizações

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 user’s 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 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.
  • 22. 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)
  • 23. 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).
  • 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.