Advance Web Application

Development
Instructor: Dr. Syed Ali Raza
Department of Computer Science
GC University Lahore
 Lecture 3
Introduction to ASP.Net MVC
Design Problems & Decisions
⚫ Construction and testing
⚫ how do we build a web application?
⚫ what technology should we choose?
⚫ Re-use
⚫ can we use standard components?
⚫ Scalability
⚫ how will our web application cope with large numbers of requests?
⚫ Security
⚫ how do we protect against attack, viruses, malicious data access, denial
of service?
⚫ Different data views
⚫ user types, individual accounts, data protection
⚫ Need for general and reusable solution: Design Patterns
Design Pattern
⚫ A general and reusable solution to a commonly occurring
problem in the design of software
⚫ A template for how to solve a problem that has been used in
many different situations
⚫ NOT a finished design
⚫ the pattern must be adapted to the application
⚫ cannot simply translate into code
Design Problem
⚫ Need to change the look-and-feel without changing the
core/logic
⚫ Need to present data under different contexts (e.g.,
powerful desktop, web, mobile device).
⚫ Need to interact with/access data under different contexts
(e.g., touch screen on a mobile device, keyboard on a
computer)
⚫ Need to maintain multiple views of the same data (list,
thumbnails, detailed, etc.)
Design Solution
⚫ Separate core functionality from the presentation and
control logic that uses this functionality
⚫ Allow multiple views to share the same data model
⚫ Make supporting multiple clients easier to implement, test,
and maintain
What is MVC?
⚫ The MVC pattern is 30+ years old!
⚫ It is a powerful and elegant means of separating concerns
⚫ It makes it easier to test application
⚫ It promotes parallel development thanks to the loose
coupling between the three main components
The MVC Pattern
⚫ Model-View-Controller (MVC) is a software architecture
pattern
⚫ Originally formulated in the late 1970s by Trygve
Reenskaug as part of the Smalltalk
⚫ Originally developed for desktop
⚫ Then adapted for internet applications
⚫ Code reusability and separation of concerns
The MVC pattern
⚫ The MVC paradigm is a way of breaking an
application, or even just a piece of an application's
interface, into three parts
⚫ the model
⚫ the view
⚫ the controller.
⚫ MVC was originally developed to map the traditional
input, processing, output roles into the GUI realm:
⚫ Input → Processing → Output
⚫ Controller → Model → View
Model View Controller
⚫ Model View -- It's got three layers like Oreos do.

⚫ Model, View and creamy Controller

The MVC pattern
⚫ Model
⚫ objects are the parts of the application that implement the
logic for the application’s data domain
⚫ View
⚫ components that display the application’s user interface
⚫ Controller
⚫ components that handle user interaction, work with the
model, and ultimately select a view to render
What is MVC?
The Model

⚫ Most programs are supposed to do work, not just be

“another pretty face”
⚫ but there are some exceptions
⚫ The Model is the part that does the work--it models the
actual problem being solved
⚫ Business logic and validation of the application’s data
domain
⚫ The Model should be independent of both the Controller
and the View
⚫ But it provides services (methods) for them to use
⚫ Independence gives flexibility, robustness
The View

◆ Typically, the user has to be able to see, or view, what the program is doing

◆ Application’s user interface using data from the model

◆ The View shows what the Model is doing

⚫ The View is a passive observer; it should not affect the model

◆ The Model should be independent of the View, but (but it can provide access
methods)

◆ The View should not display what the Controller thinks is happening

◆ Very little code

The Controller

⚫ The Controller decides what the model is to do

⚫ Often, the user is put in control by means of a GUI
⚫ in this case, the GUI and the Controller are often the same
⚫ The Controller and the Model can almost always be
separated (what to do versus how to do it)
⚫ The design of the Controller depends on the Model
⚫ The Model should not depend on the Controller
Controller Communication
⚫ Communicates with view
⚫ determines which objects are being manipulated
⚫ e.g., which object was selected with mouse click

⚫ Calls model methods to make changes

⚫ model makes change and notifies views to update
How MVC works?

Controller
Request

Step 1
Incoming request directed to Controller
How MVC works?

Controller
Model

Step 2
Controller processes request and forms a data Model
How MVC works?

Controller

View

Step 3
Model is passed to View
How MVC works?

Controller

View

Step 4
View transforms Model into appropriate output format
How MVC works?

Controller

View

Response

Step 5
Response is rendered
 Advantages
◆ Input processing is separated from output processing.
◆ Controllers can be interchanged, allowing different user interaction
modes.
◆ Multiple views of the model can be supported easily.
Clean URLs
⚫ REST-like URLs
⚫ /products/update
⚫ Friendlier to humans
⚫ /product.aspx?catId=123 becomes
/products/chocolate/
⚫ Friendlier to web crawlers
⚫ Search engine optimization (SEO)
MVC Frameworks
⚫ PHP
⚫ CakePHP
⚫ CodeIgniter
⚫ Java
⚫ Spring
⚫ Perl
⚫ Catalyst
⚫ Dancer
⚫ Python
⚫ Django
⚫ Flask
⚫ Grok
⚫ Ruby
⚫ Ruby on Rails
⚫ Camping
⚫ Nitro
⚫ Sinatra
⚫ JavaScript
⚫ AngularJS
⚫ JavaScriptMVC
⚫ Spine
⚫ ASP
⚫ ASP.NET MVC (.NET Framework)
The ASP.NET MVC History
⚫ ASP.NET MVC 1.0
⚫ Released on 13 March 2009
⚫ ASP.NET MVC 2.0 (Areas, Async)
⚫ Released just one year later, on 10 March 2010
⚫ ASP.NET MVC 3.0 (Razor) – 13 January 2011
⚫ ASP.NET MVC 4.0 (Web API) – 15 August 2012
⚫ ASP.NET MVC 5.0 (Identity) – 17 October 2013
⚫ ASP.NET MVC 6.0 – 18 November 2015
⚫ Now is the era of ASP.NET MVC Core
ASP.NET MVC
⚫ Separation of application tasks (input logic, business logic,
and UI logic), testability, and test-driven development
(TDD) by default
⚫ An extensible and pluggable framework
⚫ A powerful URL-mapping component that lets you build
applications that have comprehensible and searchable
URLs
⚫ Don’t repeat yourself, keep it simple (DRY/KISS
principles)
ASP.NET MVC - Life Cycle
⚫ A life cycle is simply a series of steps or events used to
handle some type of request or to change an application
state.
⚫ ASP.NET webforms platform features a complex page life
cycle. Other .NET platforms, like Windows phone apps,
have their own application life cycles.
⚫ One thing that is true for all these platforms regardless of
the technology is that understanding the processing
pipeline can help you better leverage the features available
and MVC is no different.
ASP.NET MVC - Life Cycle
⚫ MVC has two life cycles −
⚫ The application life cycle
⚫ The request life cycle
The Application Life Cycle
⚫ The application life cycle refers to the time at which the
application process actually begins running IIS until the
time it stops. This is marked by the application start and
end events in the startup file of your application.
The Request Life Cycle
⚫ It is the sequence of events that happen every time an
HTTP request is handled by our application.
⚫ The entry point for every MVC application begins with
routing. After the ASP.NET platform has received a
request, it figures out how it should be handled through
the URL Routing Module.
⚫ Modules are .NET components that can hook into the
application life cycle and add functionality. The routing
module is responsible for matching the incoming URL to
routes that we define in our application.
The Request Life Cycle
⚫ All routes have an associated route handler with them and
this is the entry point to the MVC framework.
The Request Life Cycle
⚫ The MVC framework handles converting the route data into a
concrete controller that can handle requests. After the
controller has been created, the next major step is Action
Execution. A component called the action invoker finds and
selects an appropriate Action method to invoke the controller.
⚫ After our action result has been prepared, the next stage
triggers, which is Result Execution. MVC separates declaring
the result from executing the result. If the result is a view type,
the View Engine will be called and it's responsible for finding
and rending our view.
⚫ If the result is not a view, the action result will execute on its
own. This Result Execution is what generates an actual
response to the original HTTP request.
MVC Pattern in ASP.NET MVC
HTTP Request
Web ASP.NET MVC
/Users/Ivo/
server Routing engine
Select controller and
invoke action (method)
User
Controller
(C# class)
HTTP Response
(HTML, File, JSON, …) Select view & CRUD
pass data (model) model

View engine
Model
(Razor) Use model data
The Tools
⚫ Tools that we need:
⚫ IDE: Visual Studio 2017 (2015 is also OK)
⚫ .NET Framework
⚫ Web server
⚫ Microsoft SQL Sever (Express or LocalDB)
⚫ Visual Studio installer will install everything we need
The Technologies
⚫ Technologies that ASP.NET MVC uses
⚫ C#
⚫ ASP.NET
⚫ HTML(5), Razorpages and CSS
⚫ AJAX, Single-page apps
⚫ Databases (Microsoft SQL Server)
⚫ Entity Framework
⚫ JavaScript (jQuery, Bootstrap, AngularJS, etc.)