ASP.

NET MVC Introduction

MVC, Models, Views,
Controllers, [Link]

SoftUni Team
Technical Trainers
Software University
[Link]
Table of Contents
1. The MVC Pattern
 Model, View, Controller
 The MVC Pattern for Web and Examples
2. [Link] MVC
 Comparison with [Link]
 [Link] MVC Advantages
3. Creating [Link] MVC Project
4. NuGet Package Management
5. Server Information with Glimpse
2
The MVC Pattern
Model-View-Controller
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
 Code reusability and separation of concerns
 Originally developed for desktop
 Then adapted for internet applications

4
Model
 Set of classes that describes the data we are working with
 Rules for how the data can be changed and manipulated
 May contain data validation rules
 Often encapsulate data stored in a database
 as well as code used to manipulate the data

 Most likely a Data Access Layer of some kind

 Apart from giving the data objects
 It doesn't have significance in the framework
5
View
 Defines how the application’s user interface (UI) will be displayed
 May support master views (layouts)
 May support sub-views (partial views or controls)
 Web: Template to dynamically generate HTML

6
Controller
 The core MVC component – holds the logic
 Process the requests with the help of views and models
 A set of classes that handles
 Communication from the user

 Overall application flow

 Application-specific logic

 Every controller has one or more "actions"

7
MVC Steps
 Incoming request routed to Controller
 For web: HTTP request
 Controller processes request and creates presentation Model
 Controller also selects appropriate result (view)
 Model is passed to View
 View transforms Model into appropriate output format (HTML)
 Response is rendered (HTTP response)

8
The MVC Pattern for Web

9
MVC Frameworks
 PHP: CakePHP, CodeIgniter, Laravel
 Java: Spring
 Perl: Catalyst, Dancer
 Python: Django, Flask, Grok
 Ruby: Ruby on Rails, Camping, Nitro, Sinatra
 JavaScript: AngularJS, JavaScriptMVC, Spine
 [Link] MVC (.NET Framework)

10
[Link] MVC
[Link] Core

Presentation

[Link]
Caching .NET Globalization

Pages OWIN Web API Runtime

Profile Roles Identity

Routes Handlers Etc...

12
[Link] Web Forms
 Stable and mature, supported by heaps of third party controls
and tools
 Event driven Web development
 Postbacks
 Viewstate
 Less control over the HTML
 Hard to test
 Rapid development
13
[Link] History
 Classic ASP introduced in late 1990's
 2002 – [Link] 1.0 (Web Forms)
 2008 – [Link] 3.5 (First version of MVC)
 Two more versions in next two years
 2010 – [Link] 4 (VS 2010, MVC 2.0, Razor)
 2012 – [Link] 4.5 (First version of Web API, VS 2012)
 2013 – SignalR
 2013 – Visual Studio 2013, One [Link], MVC 5
 2014 – [Link] vNext, Roslyn, OWIN, …
14
One [Link]
 Web Forms
 Component-based
 [Link] MVC
 Web Pages
 Lightweight framework for dynamic content
 Web API
 Framework for building RESTful Web services
 SignalR
 Real-time client-server communication
15
[Link] MVC
 Runs on top of [Link]
 Not a replacement for Web Forms
 Leverage the benefits of [Link]
 Embrace the Web
 SEO-friendly URLs, HTML 5, SPA
 Adopt REST concepts
 Uses MVC pattern
 Conventions and Guidance
 Separation of concerns
16
[Link] MVC (2)
 Tight control over markup
 Testable
 Loosely coupled and extensible
 Convention over configuration
 Razor view engine
 One of the greatest view engines
 With intellisense, integrated in Visual Studio
 Reuse of current skills (C#, EF, LINQ, JS, etc.)
 Application-based (not scripts like PHP)
17
The [Link] MVC History
 [Link] MVC 1.0
 Released on 13 March 2009
 [Link] MVC 2.0 (Areas, Async)
 Released just one year later, on 10 March 2010
 [Link] MVC 3.0 (Razor) – 13 January 2011
 [Link] MVC 4.0 (Web API) – 15 August 2012
 [Link] MVC 5.0 (Identity) – 17 October 2013
 [Link] MVC 6.0 – soon enough
18
[Link] MVC: Separation of Concerns
 Each component has one responsibility
 SRP – Single Responsibility Principle
 DRY – Don’t Repeat Yourself
 More easily testable
 TDD – Test-driven development
 Helps with concurrent development
 Performing tasks concurrently
 One developer works on views
 Another works on controllers 19
Extensible
 Replace any component of the system
 Interface-based architecture
 Almost anything can be replaced or extended
 Model binders (request data to CLR objects)
 Action/result filters (e.g. OnActionExecuting)
 Custom action result types
 View engine (Razor, WebForms, NHaml, Spark)
 View helpers (HTML, AJAX, URL, etc.)
 Custom data providers ([Link]), etc.
20
Clean URLs
 REST-like URLs
 /products/update
 /blog/posts/2013/01/28/mvc-is-cool
 Friendlier to humans
 /[Link]?catId=123 becomes /products/chocolate/
 Friendlier to web crawlers
 Search engine optimization (SEO)

21
Community-Based
 [Link] MVC, Web API, and Web Pages source code is available
in CodePlex
 [Link]

 You can vote for new features in [Link] UserVoice site

 [Link]

 vNext is on GitHub
 [Link]

22
MVC Pattern in [Link] MVC

23
Creating [Link] MVC Project
The Tools
 Tools that we need:
 IDE: Visual Studio 2013 (2012 is also OK)

 Framework: .NET Framework 4.5

 Web server: IIS 8.5 (Express)

 Data: Microsoft SQL Sever (Express or LocalDB)

 Visual Studio installer will install everything we need

 [Link]

25
The Technologies
 Technologies that [Link] MVC uses
 C# (OOP, unit testing, async, etc.)
 [Link]
 HTML(5) and CSS
 JavaScript (jQuery, Bootstrap, AngularJS, etc.)
 AJAX, Single-page apps
 Databases (Microsoft SQL Server)
 ORM (Entity Framework and LINQ)
 Web and HTTP
26
Visual Studio 2012: New Project

27
Default Layout for [Link] MVC Apps

28
Visual Studio 2013: New Project

29
VS 2013: Default Layout

30
Internet App Project Files
Static files (CSS, Images, etc.)

All controllers and actions

JavaScript files (jQuery, Modernizr, knockout, etc.)

View templates

_Layout.cshtml – master page (main template)

Application_Start() – The entry point of the application

[Link] – Configuration file

31
 Demo: Web Application
Making Changes and Debugging
NuGet Package Management
NuGet Package Management
 Free, open source package management
 Makes it easy to install and update open source libraries and
tools
 Part of Visual Studio 2012/2013
 Configurable package sources
 Simple as adding a reference
 GUI-based package installer
 Package manager console
34
Nightly Builds
 Nightly builds of [Link] MVC are available via a private NuGet feed
 In your Package Manager settings add the following package source:

 [Link]

35
 Demo: NuGet
Install and Update Packages
Server Information with Glimpse
The Open Source Diagnostics Platform
of the Web
Server Info with Glimpse
 Glimpse shows execution timings, server configuration, request
data and more
 Showed inside browser (like FireBug)

 With no changes to the application code

 Supports [Link] MVC, WebForms and EF

38
Install Glimpse
1. Install NuGet packages:
 Glimpse.Mvc5

 Glimpse.EF6

2. Run the project

3. Configure it:
 [Link]

39
Tracing with Glimpse
 The Trace tab shows any messages during the lifetime of the
HTTP request traced to:
 [Link] or [Link]
[Link]("Info example");
[Link]("Warning example");
[Link]("Debug example");

40
Demo: Glimpse
Summary
 Model–view–controller (MVC) is a software architecture pattern
 [Link] MVC is a great platform for developing Internet
applications
 Visual Studio is the main development tool for creating [Link]
MVC applications
 Almost everything in [Link] MVC is a package

 Glimpse is a tool that helps with debugging

42
[Link] MVC – Introduction

[Link]
License
 This course (slides, examples, demos, videos, homework, etc.)
is licensed under the "Creative Commons Attribution-
NonCommercial-ShareAlike 4.0 International" license

 Attribution: this work may contain portions from

 "[Link] MVC" course by Telerik Academy under CC-BY-NC-SA license

44
Free Trainings @ Software University
 Software University Foundation – [Link]
 Software University – High-Quality Education,
Profession and Job for Software Developers
 [Link]
 Software University @ Facebook
 [Link]/SoftwareUniversity
 Software University @ YouTube
 [Link]/SoftwareUniversity
 Software University Forums – [Link]