Introduction to

ASP.NET MVC 4
Nikolay Kostov
Senior Software
Developer and
http://nikolay.it
Trainer
Telerik Software
Academy

Table of Contents
The MVC Pattern
ASP.NET MVC
Installation and Creating of
ASP.NET MVC Project
ASP.NET MVC Routing
Controllers and Actions
Razor Views
Areas
Kendo UI Widgets

The MVC Pattern

The MVC Pattern

Modelviewcontroller (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

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
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

View
Defines how the applications user
interface (UI) will be displayed
May support master views
(layouts) and sub-views (partial
views or controls)
Web: Template to dynamically
generate HTML

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

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

HTTP

The MVC Pattern for

Web

/
Request
Some/Page
/
Use
r
HTTP Response

View
(render
UI)

Front
controller
(dispatcher)

Delegate
request

Controll
er
Select
view &
pass data
Use model
data

CRUD
model

Model
(data)
9

MVC Frameworks
CakePHP (PHP)
CodeIgniter (PHP)
Spring (Java)
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
ASP.NET
WebFor
ms

ASP.NET
MVC

Presentation

ASP.NET
Caching

.NET

Globalization

Pages

Controls

Master Pages

Profile

Roles

Membership

Routes

Handlers

Etc...

Runtime

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

ASP.NET MVC

Runs on top of ASP.NET

Not a replacement for WebForms
Leverage the benefits of ASP.NET

Embrace the web

User/SEO friendly URLs, HTML 5, SPA
Adopt REST concepts

Uses MVC pattern

Conventions and Guidance
Separation of concerns
14

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#, LINQ,

HTML, etc.)
Application-based (not scripts like

15

The ASP.NET MVC

History

ASP.NET MVC 1.0

In February 2007, Scott Guthrie

("ScottGu") of Microsoft sketched
out the core of ASP.NET MVC
Released on 13 March 2009

ASP.NET MVC 2.0

Released just one year later, on 10
March 2010

ASP.NET MVC 3.0

Released on 13 January 2011

ASP.NET MVC 4.0

Released on 15 August 2012

16

Separation of Concerns

Each component has one

responsibility
SRP Single Responsibility Principle
DRY Dont 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
17

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,

18

Clean URLs

REST-like
/products/update
/blog/posts/2013/01/28/mvc-is-cool

Friendlier to humans
/product.aspx?catId=123 or
post.php?id=123
Becomes /products/chocolate/

Friendlier to web crawlers

Search engine optimization (SEO)
19

MVC Pattern in ASP.NET

ASP.NETMVC

Web
MVC
Request
Users/Ni
serv
Routing
ki/
er
Select
controller
engine
Controll
and invoke action
(method)
Use
er
r
(C#
HTTP Response
CRUD
Select
view &
(HTML, File,
class)
HTTP
/

JSON, )

View
engine
(Razor)

pass data
(model)

Use model
data

model

Model
(POCO)
20

ASP.NET MVC Request

21

The Technologies

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)
ORM (Entity Framework and LINQ)
Web and HTTP
22

Installation and
Creating of ASP.NET
MVC Project

Demo Project

Forum system like

http://stackoverflow.com
StackOverflow Forum Internet
Application

Features:
User profiles
Forum features
Posting messages
Voting for posts

Administration
Other useful features (tags, search,

24

The Tools

Tools that we need:

IDE: Visual Studio 2012 (Express for
Web)
JustCode and Web Essentals

Framework: .NET Framework 4.5

Web server: IIS 8 (Express)
Data: Microsoft SQL Sever (Express
or LocalDB)

Web Platform Installer 4.0 will

install everything we need for us
microsoft.com/web/downloads/platf
orm.aspx

Web Platform Installer

26

tfs.visualstudio.com
Powered by Microsoft
Collaboration platform at the core
of application lifecycle
management (ALM)
Source control system (TFS)
Free plan that includes:

Version control
Free builds
Up to 5 users
Unlimited number of projects
27

New ASP.NET MVC

Project

28

Internet Application
Project

29

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
Configuration file
30

Demo: Internet
application
Making changes and debugging

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
Configurable package sources
Simple as adding a reference
GUI-based package installer
Package manager console

32

Demo:
NuGet
Install and update
packages as easy as
adding a reference

ASP.NET MVC
Routing

ASP.NET MVC Routing

Mapping between patterns and a
combination of controller + action
+ parameters
Routes are defined as a global list
of routes

System.Web.Routing.RouteTable.Ro
utes

Something similar to Apache

mod_rewrite
Greedy algorithm

the first match wins

Register routes

In Global.asax in the
Application_Start() there is
RouteConfig.RegisterRoutes(RouteTable.
Routes);

RoutesConfig class is located in

Routes to
/App_Start/ in internet applications
ignore
The [*] means
template by default
allname
left
Route
Route pattern

Default
parameters

36

Routing Examples

http://localhost/Products
/ById/3

Controller: Products
Action: ById
Id: 3

37

Routing Examples (2)

http://localhost/Products
/ById

Controller: Products
Action: ById
Id: 0 (optional parameter)

38

Routing Examples (3)

http://localhost/Products

Controller: Products
Action: Index
Id: 0 (optional parameter)

39

Routing Examples (4)

http://localhost/

Controller: Home
Action: Index
Id: 0 (optional parameter)

40

Custom Route

http://localhost/Users/Nik
olayIT

Controller: Users
Action: ByUsername
Username: NikolayIT

41

Custom Route (2)

http://localhost/Users

Controller: Users
Action: ByUsername
Username: DefaultValue

42

Custom Route (3)

?
http://localhost/Users

Result: 404 Not Found

43

Route Constraints
Constraints are rules on the URL
segments
All the constraints are regular
expression compatible with class
Regex
Defined as one of the
routes.MapRoute() parameters

44

Debugging Routes

In actions we have access to a data

structure called RouteData
RouteData.Values["controller"]
RouteData.Values["action"]
RouteData.Values["id"]

We can use NuGet package

RouteDebugger
Install-Package RouteDebugger
Web.config: <add
key="RouteDebugger:Enabled"
value="true" />

Demo: Routes
ASP.NET MVC Routing

Controllers and
Actions
The brain
of the application

Controllers
The core component of the MVC
pattern
All the controllers should be
available in a folder by name
Controllers
Controller naming standard should
be "nameController" (convention)
Routers instantiate controllers in
every request

All requests are mapped to a specific

action

Actions

Actions are the ultimate request

destination
Public controller methods
Non-static
No return value restrictions

Actions typically return an

ActionResult

49

Action Results
Controller action response to a
browser request
Inherits from the base ActionResult
class
Different results types:

Name

Framework Behavior

Producing
Method

ContentResult

Returns a string literal

Content

EmptyResult

No response

FileContentResult
FilePathResult
FileStreamResult

Return the contents of a

file

File

50

Action Results (2)

Name

Framework
Behavior

Producing
Method

HttpUnauthorizedRe Returns an HTTP 403

sult
status
JavaScriptResult

Returns a script to
execute

JavaScript

JsonResult

Returns data in JSON

format

Json

RedirectResult

Redirects the client to

a new URL

Redirect /
RedirectPermane
nt

RedirectToRouteRes
ult

Redirect to another
action, or another
controllers action

RedirectToRoute /
RedirectToAction

ViewResult
PartialViewResult

Response is the
View /
responsibility of a view PartialView
engine

51

Action Parameters

ASP.NET MVC maps the data from

the HTTP request to action
parameters in few ways:
Routing engine can pass
parameters to actions
http://localhost/Users/NikolayIT
Routing pattern: Users/{username}

URL query string can contains

parameters
/Users/ByUsername?
username=NikolayIT

HTTP post data can also contain

52

Action Selectors
ActionName(string name)
AcceptVerbs

HttpPost
HttpGet
HttpDelete
HttpOptions

NonAction
RequireHttps
ChildActionOnly Only for
Html.Action()

53

Action Filters
Apply pre- and post-processing
logic
Can be applied to actions and to
controllers
Global filters can be registered in
Name
Description
GlobalFilters.
Filters
(orofin
OutputCache
Cache the output
a controller
ValidateInput(false)
Turn off request validation and allow
/App_Start/FilterConfig.cs)

dangerous input (html tags)

Authorize

Restrict an action to authorized users

or roles

ValidateAntiForgeryToken

Helps prevent cross site request

forgeries

HandleError

Can specify a view to render in the

event of an unhandled exception

54

Custom Action Filter

Create C# class file in /Filters/
Inherit ActionFilterAttribute
We can override:

OnActionExecuting(ActionExecuting
Context)
OnActionExecuted(ActionExecutedC
ontext)
OnResultExecuting(ResultExecuting
Context)
OnResultExecuted(ResultExecutedC
ontext)

55

Custom Action Filter (2)

public class LogAttribute : ActionFilterAttribute
{
public override void OnActionExecuting
(ActionExecutingContext filterContext) { /* */ }
public override void OnActionExecuted
(ActionExecutedContext filterContext) { /* */ }
public override void OnResultExecuting
(ResultExecutingContext filterContext) { /* */ }
public override void OnResultExecuted
(ResultExecutedContext filterContext) { /* */ }
}
[Log]
public class DepartmentController :
Controller { // ... }
56

Razor Views

Views
HTML templates of the application
A lot of view engines available

View engines execute code and

provide HTML
Provide a lot of helpers to easily
generate HTML
The most popular is Razor and
WebForms

We can pass data to views through

ViewBag, ViewData and Model
(strongly-typed views)

58

Razor
Template markup syntax
Simple-syntax view engine
Based on the C# programming
language
Enables the programmer to use an
HTML construction workflow
Code-focused templating approach,
with minimal transition between
HTML and code

Razor syntax starts code blocks

with a @ character and does not

59

Design Goals

Compact, Expressive, and Fluid

Smart enough to differ HTML from
code

Template
Easy to Learn
Is not a new language
Works with any Text Editor
Data
Has great Intellisense

Built in Visual Studio

Unit Testable

Generate
d Output

Without requiring a controller or

web-server

60

Pass Data to a View

With ViewBag (dynamic type):

Action: ViewBag.Message = "Hello
World!";
View: @ViewBag.Message

Strongly-typed views:
Action: return View(model);
View: @model ModelDataType;

With ViewData (dictionary)

ViewData["message"] = "Hello
World!";
View: @ViewData["message"]

61

How it works?
ByUsername.cs
html

Template

HTML
Output

Data

Generated
Output

UsersControll
er.cs

UserModel
.cs

62

Razor Syntax

@ For values (HTML encoded)

<p>
Current time is: @DateTime.Now!!!
Not HTML encoded value: @Html.Raw(someVar)
</p>

@{ } For code blocks (keep the

view
simple!)
@{
var productName = "Energy drink";
if (Model != null)
{
productName = Model.ProductName;
}
else if (ViewBag.ProductName != null)
{
productName = ViewBag.ProductName;
}
}
<p>Product "@productName" has been added in your shopping
cart</p>

63

Razor Syntax (2)

If, else, for, foreach, etc. C#

statements
HTML markup lines can be included
at any part
<div class="products-list">
@:
For plain text
line to be
@if (Model.Products.Count()
== 0)
{
rendered
<p>Sorry, no products found!</p>
}
else
{
@:List of the products found:
foreach(var product in Model.Products)
{
<b>@product.Name, </b>
}
}
</div>
64

Razor Syntax (3)

Comments
@*
A Razor Comment
*@
@{
//A C# comment
/* A Multi
line C# comment
*/

What about "@" and emails?

<p>
This is the sign that separates email names from domains:
@@<br />
And this is how smart Razor is: spam_me@gmail.com
</p>
65

Razor Syntax (4)

@() Explicit code expression

<p>
Current rating(0-10): @Model.Rating / 10.0
Current rating(0-1): @(Model.Rating / 10.0)
spam_me@Model.Rating
spam_me@Model.Rating *@
spam_me@(Model.Rating)
</p>

@* 6 / 10.0 *@
@* 0.6 *@
@*
@* spam_me6 *@

@using for including namespace

into view
@model for defining the model
for
the
view
@using
MyFirstMvcApplication.Models;

@model UserModel
<p>@Model.Username</p>

66

Layout
Define a common site template
Similar to ASP.NET master pages
(but better!)
Razor view engine renders content
inside-out

First view is redered, then layout

@RenderBody()
indicate where we want
the views based on this
layout to fill in their
core content at that

67

Views and Layouts

Views don't need to specify layout

since their default layout is set in
their _ViewStart file:
~/Views/_ViewStart.cshtml (code for
all views)

@{
Layout = "~/Views/Shared/_UncommonLayout.cshtml";
}

Each view can specify custom

layout pages
@{
Layout = null;
}

Views without layout:

68

Sections
You can have one or more
"sections" (optional)
They are defined in the views:

And may be rendered anywhere in

the layout page using the method
RenderSection()
@RenderSection(string name, bool
required)
If the section is required and not

69

View Helpers

Each view inherits WebViewPage

ViewPage has a property named
Html

Html property has methods that

return string and can be used to
generate HTML
Create inputs
Create links
Create forms

Other helper properties are also

available

70

HTML Helpers
Method

Type

Description

BeginForm,
BeginRouteForm

Form

Returns an internal object that

represents an HTML form that the
system uses to render the <form>
tag

EndForm

Form

A void method, closes the pending

</form> tag

CheckBox,
CheckBoxFor

Input

Returns the HTML string for a check

box input element

Hidden, HiddenFor

Input

Returns the HTML string for a hidden

input element

Password,
PasswordFor

Input

Returns the HTML string for a

password input element

RadioButton,
RadioButtonFor

Input

Returns the HTML string for a radio

button input element

TextBox,
TextBoxFor

Input

Returns the HTML string for a text

input element

Label, LabelFor

Label

Returns the HTML string for an HTML

label element

71

HTML Helpers (2)

Method

Type

Description

ActionLink,
RouteLink

Link

Returns the HTML string for an

HTML link

DropDownList,
DropDownListFor

List

Returns the HTML string for a

drop-down list

ListBox,
ListBoxFor

List

Returns the HTML string for a

list box

TextArea,
TextAreaFor

TextArea

Returns the HTML string for a

text area

Partial

Partial

Returns the HTML string

incorporated in the specified
user control

RenderPartial

Partial

Writes the HTML string

incorporated in the specified
user control to the
output stream

ValidationMessag
e,
ValidationMessag

Validation Returns the HTML string for a

validation message
72

Custom Helpers

Write extension methods for the

HtmlHelper
Return string or override ToString
method
TagBuilder manages closing tags
and attributes
Add namespace in web.config (if
needed)

73

Custom Helpers (2)

Another way to write helpers:

Create folder /App_Code/
Create a view in it (for example
Helpers.cshtml)
Write a helper in it using @helper

You can use the helper in any view

You have a lot of code in views? =>

write helpers

74

Partial Views

Partial views render portions of a

page
Sub Reuse pieces of a view
Html helpers Partial,
RenderPartial and Action

request

Razor partial views are still .cshtml

files

Located in the same

folder as other views
or in Shared folder

75

Areas

Areas
Some applications can have a large
number of controllers
ASP.NET MVC lets us partition Web
applications into smaller units
(areas)
An area is effectively an MVC
structure inside an application
Example: large e-commerce
application

Main store, users

Blog, forum
Administration

77

Demo: Areas

ASP.NET MVC structures

(areas)

Kendo UI Widgets
http://www.kendoui.com/

What is Kendo UI?

Framework for building modern
interactive web applications
Collection of script files and
resources (styles, images, etc.)
Leverages

JavaScript
HTML5
CSS3
jQuery
80

What Does Kendo UI

Provide?

Rich UI Widgets

HTML5 controls based on jQuery

Core
3 categories of UI Widgets
Web
DataViz
Mobile

Client-side DataSource
Abstraction for working with all
types of data on the client side
81

What Does Kendo UI

Provide(2)

MVVM Framework

Provides declarative binding and

two-way data synchronization in
your web application

Animation and Drag & Drop

Templating
Validation Framework
Server wrappers

ASP.NET MVC
Java and PHP
82

Include Kendo UI in
Project

Download it and unzip it (ask us for

license)
Kendo UI Complete for ASP.NET MVC

Copy and reference Kendo.Mvc.dll

Located in:
...\wrappers\aspnetmvc\Binaries\Mvc3

Copy JavaScript files into

ourProject\Scripts
js\kendo.all.min.js and
js\kendo.aspnetmvc.min.js

Copy CSS files and images into our

83

Include Kendo UI in
Project (2)

Reference Kendo UI scripts and

styles
In Views\Shared\_Layout.cshtml
<head>

In Views\Shared\_Layout.cshtml before
</body>

Add namespaces in
~/Views/Web.config
84

Using Kendo UI

Pure HTML and JavaScript

ASP.NET MVC wrappers

Kendo code MUST be after jQuery

reference!
85

Demo: Kendo UI

http://
demos.kendoui.com/web/overview/index.h
tml

Summary
Modelviewcontroller (MVC) is a
software architecture pattern
ASP.NET MVC is a great platform
for developing internet
applications
Routes maps URLs to controllers
and actions
Razor views are powerful engine
for combining models and
templates into HTML code
Our project can be divided into

87

Introduction to ASP.NET
MVC 4

?
?

BG Coder - - online judge

,
ASP.NET - , , C#, .NET, ASP.NET
ASP.NET MVC HTML, SQL, C#, .NET, ASP.NET MVC
,
iPhone, Android, W P7, PhoneGap
-
-
C# , ,

?
,



SEO -
,
, HTML, CSS, JavaScript, Photoshop
free C# book, C#, Java, C#
" "
" cloud "

Questions?

?
http

Free Trainings @ Telerik

Academy

C# Programming @ Telerik
Academy

Telerik Software Academy

academy.telerik.com

Telerik Academy @ Facebook

csharpfundamentals.telerik.com

facebook.com/TelerikAcademy

Telerik Software Academy Forums

forums.academy.telerik.com