ASP.

NET MVC Introduction

MVC, Models, Views,
Controllers, ASP.NET

SoftUni Team
Technical Trainers
Software University
http://softuni.bg
Table of Contents
1. The MVC Pattern
 Model, View, Controller
 The MVC Pattern for Web and Examples
2. ASP.NET MVC
 Comparison with ASP.NET
 ASP.NET MVC Advantages
3. Creating ASP.NET 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
 ASP.NET MVC (.NET Framework)

10
ASP.NET MVC
ASP.NET Core

Presentation

ASP.NET
Caching .NET Globalization

Pages OWIN Web API Runtime

Profile Roles Identity

Routes Handlers Etc...

12
ASP.NET 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
ASP.NET History
 Classic ASP introduced in late 1990's
 2002 – ASP.NET 1.0 (Web Forms)
 2008 – ASP.NET 3.5 (First version of MVC)
 Two more versions in next two years
 2010 – ASP.NET 4 (VS 2010, MVC 2.0, Razor)
 2012 – ASP.NET 4.5 (First version of Web API, VS 2012)
 2013 – SignalR
 2013 – Visual Studio 2013, One ASP.NET, MVC 5
 2014 – ASP.NET vNext, Roslyn, OWIN, …
14
One ASP.NET
 Web Forms
 Component-based
 ASP.NET MVC
 Web Pages
 Lightweight framework for dynamic content
 Web API
 Framework for building RESTful Web services
 SignalR
 Real-time client-server communication
15
ASP.NET MVC
 Runs on top of ASP.NET
 Not a replacement for Web Forms
 Leverage the benefits of ASP.NET
 Embrace the Web
 SEO-friendly URLs, HTML 5, SPA
 Adopt REST concepts
 Uses MVC pattern
 Conventions and Guidance
 Separation of concerns
16
ASP.NET 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 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 – soon enough
18
ASP.NET 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 (ADO.NET), etc.
20
Clean URLs
 REST-like URLs
 /products/update
 /blog/posts/2013/01/28/mvc-is-cool
 Friendlier to humans
 /product.aspx?catId=123 becomes /products/chocolate/
 Friendlier to web crawlers
 Search engine optimization (SEO)

21
Community-Based
 ASP.NET MVC, Web API, and Web Pages source code is available
in CodePlex
 http://aspnetwebstack.codeplex.com/

 You can vote for new features in ASP.NET UserVoice site

 http://aspnet.uservoice.com/forums/41199-general-asp-net

 vNext is on GitHub
 https://github.com/aspnet

22
MVC Pattern in ASP.NET MVC

23
Creating ASP.NET 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

 http://www.microsoft.com/visualstudio/eng/2013-downloads

25
The Technologies
 Technologies that ASP.NET MVC uses
 C# (OOP, unit testing, async, etc.)
 ASP.NET
 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 ASP.NET 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

Web.config – 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 ASP.NET MVC are available via a private NuGet feed
 In your Package Manager settings add the following package source:

 http://www.myget.org/F/aspnetwebstacknightly/

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 ASP.NET MVC, WebForms and EF

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

 Glimpse.EF6

2. Run the project

3. Configure it:
 http://localhost:port/Glimpse.axd

39
Tracing with Glimpse
 The Trace tab shows any messages during the lifetime of the
HTTP request traced to:
 System.Diagnostics.Trace or System.Diagnostics.Debug
Trace.TraceInformation("Info example");
Trace.TraceWarning("Warning example");
Debug.WriteLine("Debug example");

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

 Glimpse is a tool that helps with debugging

42
ASP.NET MVC – Introduction

https://softuni.bg/courses/asp-net-mvc/
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

 "ASP.NET MVC" course by Telerik Academy under CC-BY-NC-SA license

44
Free Trainings @ Software University
 Software University Foundation – softuni.org
 Software University – High-Quality Education,
Profession and Job for Software Developers
 softuni.bg
 Software University @ Facebook
 facebook.com/SoftwareUniversity
 Software University @ YouTube
 youtube.com/SoftwareUniversity
 Software University Forums – forum.softuni.bg