ASP.net MVC 4 introduction Introductory lecture I gave at Wikilogia (NOV 2014)

1. Hatem Hamad
Nov 2014

2.  What is ASP.NET MVC?
 ASP.NET MVC Power.
 ASP.NET Web Forms vs. ASP.NET MVC
 What is MVC?
 ASP.NET MVC Parts:
Model
 Controller
 View
 Router

3.  New Web Application (Presentation Layer).
 Based on Model-View-Controller Design
Pattern.

4. Complete control on HTML.
Smooth Web 2.0 Development .
SEO-friendly URLs.
 Easy Test Driven Development (TDD).
 Stateless.

5.  ASP.NET Web Forms
 Advantages:
▪ Fast Development.
▪ Windows Application Development Experience.
▪ Event Driven.
▪ View State.
▪ Web Controls.
 Disadvantages:
▪ Hard to Control HTML.
▪ Unfriendly URLs.
▪ Single “Form” tag in single page.
▪ Hardly Extensible (Ex: JavaScript Libraries ,CSS , etc..)

6.  ASP.NET MVC
 Advantages:
▪ Model-View-Controller Design Pattern.
▪ Web Application Development Experience.
▪ Easy to control HTML.
▪ Razor view engine
▪ One of the greatest view engines
▪ With intellisense, integrated in Visual Studio
▪ Reuse of current skills (C#, LINQ, HTML, etc.)
▪ Search engine optimization (SEO) URL’s.
▪ Adopt REST concepts.
 Disadvantages:
▪ Stateless.

7.  ASP.NET MVC
 References:
▪ http://en.wikipedia.org/wiki/
ASP.NET_MVC_Framework
▪ http://www.dotnet-tricks.com/
Tutorial/mvc/
XWX7210713-A-brief
-history-of-Asp.Net-MVC
-framework.html

8. Model–view–controller (MVC) is a software
architecture pattern.
 Code reusability and separation of concerns
 Originally developed for
desktop, then adapted
for internet applications.

9.  Model:
 Set of classes that describes the data we are
working with as well as the business
 Rules for how the data can be
changed and manipulated
 May contain data validation rules

11.  View:
 Defines how the application’s user interface (UI) will be
displayed
 Web: Template to dynamically generate HTML

13.  Controller:
 The core MVC component
 Process the requests with the help of views and models
 A set of classes that handles
 Communication from the user
 Interactions between Model(s) & View(s)
 Every controller has one or more "Actions"

15.  Model ( Data Object).
 Controller (Control Application Actions).
 View (Renders HTML).
 Router (URL Mapping).

16.  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)

19.  Helps with concurrent development
 Performing tasks concurrently
▪ One developer works on views
▪ Another works on controllers
 Almost anything can be replaced or extended
 Interface-based architecture
 Model binders (request data to CLR objects)
 Custom action result types
 View engine (Razor, WebForms, NHaml, Spark)
 View helpers (HTML, AJAX, URL, etc.)
 Custom data providers (ADO.NET), etc.

20. http://yoursite.com/Security/Login
http://yoursite.com/Login
http://yoursite.com/Products/Details/58
http://yoursite.com/Products/58
http://yoursite.com/Customers/Details.aspx?id=21
http://yoursite.com/Customers/Details/21
Default Value
Regular Expression
URL

21.  REST-like
 /products/update
 /Wiki/posts/2014/11/28/mvc-is-cool
 Friendlier to humans
 /product.aspx?catId=123 or post.php?id=123
 Becomes /products/chocolate/

22.  Technologies that ASP.NET MVC uses
 C# (OOP, Unit Testing, async, etc..)
 HTML(5) and CSS
 JavaScript (jQuery, KendoUI, etc..)
 AJAX, Single-page apps
 Databases (MS SQL)
 Entity Framework and LINQ)
 Web and HTTP

23.  Hello World Demo.
 Single Form Demo.
 Two Forms Demo.
 JavaScript Demo.
 Routers Demo.

24.  Tools that we need:
 IDE: Visual Studio 2012<2013 more efficient>
(Express for Web)
▪ JustCode and Web Essentals
 Framework: .NET Framework 4.5
 Web server: IIS 8 (Express)
 Data: MS SQL Sever (Express or LocalDB)
 Web Platform Installer 4.0 will install everything we need for
us
 microsoft.com/web/downloads/platform.aspx
 Install Visual Studio Express 2012 for Web

27. 27
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
Configuration file

30.  Free, open source package management
 Makes it easy to install and
update open source libraries
and tools
 Part of Visual Studio 2012
 Configurable package sources
 GUI-based package installer
 Package manager console
30

31. Install and update packages as easy as adding a
reference

32. Hatem Hamad
E-mail : hatem.h.hamad@gmail.com
LinkedIn: Hatem Hamad