learn

Step-by-step ASP.NET MVC Tutorial for Beginners | Mosh



Sharing buttons:

hi welcome to the complete ace

phenomenal MVC course my name is

Mohammad Ani and I'm going to be your

instructor over the next few hours

before we get started let me quickly

show you the application we're going to

build this application is called Weebly

and it's supposed to be used at video

rental stores we have two different

roles here admin and staff member let me

login as admin

on the top we have three links on the

navigation bar new rental customers and

movies let's start with the list of

customers

you can see this table has pagination

sorting and searching

if we delete a customer we get this

bootstrap dialog box for confirmation we

can also add a new customer and here we

have a business rule if the customer

wants to go on a monthly quarterly or

annual membership type they have to be

at least 18 years old otherwise we get a

validation error so you see this

application is more than just crud

there are some business rules involved

now let's take a look at the list of

movies it's very similar to the list of

customers but let me show you something

if I log out and log in as a guest or

staff member and by the way we can log

in with Facebook as well so with what

you learn in this course you can easily

extend this application and add support

for Google and Twitter authentication

let's login now back in the list of

movies I get a read-only view of the

list of movies I cannot add update or

delete a movie so these features are

only available to admins now with the

list of customers and movies in the

database you can add a new rental so

when a customer comes to the counter we

look them up here

and then we add all the movies are going

to rent and again here we have another

business rule these movies have limited

availability so as we are renting out

these movies we need to keep track of

availability of movies so once again

this application is more than just crud

so are you excited to build this

application with me I hope you are let's

begin

so what is this MVC all about

well MVC stands for Model View

controller and it's one of architectural

patterns for implementing user

interfaces although it was originally

developed for desktop applications back

in 1970s it's been widely adopted as an

architecture for web applications and as

a result many frameworks have been

created that enforce this pattern a

spoon and an NBC is one of them there

are many other similar MVC frameworks

like Ruby on Rails or Express for note

in an MVC application model represents

the application data and behavior in

terms of its problem domain and

independent of the user interface for

example in our video rental application

our model will consist of classes like

movie customer rental transaction and so

on these classes have properties and

methods that purely represent the

application state and rules they are not

tied to the user interface which means

we can take these classes and use them

in a different kind of app like a

desktop or a mobile app they are playing

old CLR objects or pocos v in MVC

represents the view and is the HTML

markup that we display to the user and C

is a controller which is responsible for

handling an HTTP request for example

imagine our application is hosted at

vidlink comm when we send a request to

vit lucam slash movies a controller will

be selected to handle this request this

controller will get all the movies from

the database put them in a view and

return the view to the client or the

browser so with this architecture you

see each component has a distinct

responsibility and this results in

better separation of concerns and a more

maintainable application now there is

one more piece to this architecture

which is not in the acronym MVC but

isn't really always there it's a router

earlier I told you that when a request

comes in the application a controller

will be selected for handling that

request

selecting the right controller is the

responsibility of a router a router

based on some rules knows that the

request

with the URL slash movies should be

handled by class called movies

controller more accurately it should be

handled by one of the methods of this

class because the class can have many

different methods in asp.net MVC we

refer to methods of a controller as

actions so it's more accurate to say

that an action in a controller is

responsible for handling a request so

this was a sudden MVC in three minutes

okay

along with this course first of all you

need Visual Studio 2013 or higher in

this course I'm using Visual Studio 2013

Community Edition which is free also I'm

going to use a few plugins to increase

my productivity and make my development

experience more enjoyable so open up

visual studio under tools go to

extensions and updates'

on the left side select online and here

search for Visual Studio productivity

power tools so you can see I have

installed productivity power tools 2013

this is an extension that brings in a

lot of useful features to increase your

productivity next search for web

essentials again you can see I've

installed this plug-in in your case you

will see a button to install this plugin

and the last plug-in which is optional

is resharper so you don't necessarily

need resharper to follow along with this

course but I highly recommend you to

download and install it

because I'm going to show you lots of

time-saving tips and tricks

resharper is a commercial plug-in and

the price is somewhere about 70 to 90

dollars a year and i highly recommend

you to invest this money and add

resharper to your toolbox because the

number of hours you will save per year

will save you for more than $90 a year

and by the way I'm not a resharper

affiliate I don't get a penny from

promoting this

I'm just recommending resharper because

I only teach you the best tools because

I want you to be outstanding in your

career now whether you want to get a

resharper license or not is your

decision but you can get a free 30 day

trial version of resharper to try the

time-saving tricks I'm going to show you

in the course and if you don't want to

get resharper that's perfectly fine

don't panic I will show you how to get

things done without resharper as well

all right our development environment is

ready next we're going to create our

first MVC application

so in Visual Studio go to the file menu

new project on the left side under

templates expand visual C sharp and web

and here select asp.net web application

I'm going to call this bitly and store

it in my C Drive and the projects folder

now here you see add to source control

is selected because I'm going to add

this to get if you don't have get on

your machine or you don't want to add

this on your source control don't worry

about this so on tick the check box okay

now here in the list of templates select

MVC I'll make sure host in the cloud is

not selected because we're not going to

deploy this in the cloud yet select okay

now because I selected add to source

control I say this dialog box where I

can select either team foundation

version control or TFS or git I'm going

to select get okay okay beautiful our

project is created let's see what we've

got inside this project so open up

solution explorer here we've got a bunch

of folders like app on the line data

which is where our database file will be

stored we have app on the line start

which includes a few classes that are

called when the application is started

let's take a look at one of these for

example route config so this is the

configuration of our routing rules here

you see we have a route with the name

default and with this URL pattern so if

a URL matches this pattern the first

part of the URL is assumed to be the

name of the controller the second part

is assumed to be the name of the action

and the third part is an ID we can pass

to that action with this rule if we send

the request to slash movies slash

popular it's not the runtime we'll call

a method or an action called popular in

movies controller or as another example

if it's on the request to slash movies

slash edit /

is not the runtime will call the Edit

action of the movies controller and will

pass one as the ID to this action so

back here you can see we have some

default values in this round

so if our URL doesn't have any of these

parts it will be passed to the home

controller similarly if the URL has only

the controller but not the action it

will be handled by the index action so

if we go to slash movies since the

action name is not specified in the URL

it will be indexed in movies controller

also you can see that ID is an optional

parameter because not every action needs

an ID we only need this when we're

working with a specific resource like a

movie or a customer with the given ID we

also have this content folder where we

store our CSS files images and any other

client-side assets next we have

controllers and you can see our default

project template has three controllers

account which has actions for sign up

login logout home which represents the

home page and manage which provides a

number of actions for handling requests

around users profile like changing

password enabling two-factor

authentication using social logins and

so on we have fonts which shouldn't

really be here in the root I would

personally prefer to move this under

content folder but we'll leave that for

a later lecture we have models so all

our domain classes will be here next we

have scripts where we store our

JavaScript files and finally we have

views so V in MVC now look here we have

folders names after controllers in our

application let me expand controllers

again so we have account home and manage

controller and interestingly we have

three folders with the same names

excluding controller so by convention

when we use a view in a controller

asp.net will look for that view in a

folder with the same name as the

controller we also have a folder called

share it which includes the views that

can be used across different controllers

and finally we've got a few other files

here fav icon is the icon of the

application displayed in the browser

global a si X is one of the traditional

files that has been in asp.net for a

long time and it's a class that provides

hooks for various events in the

applications lifecycle so let's expand

this and open the c-sharp file so when

the application is started this method

will be called and here you can see we

are registering a few things like the

routes so when the application is

started we tell the runtime these are

the routes for our application next we

have packages that config which is used

by NuGet package manager if you have

never worked with NuGet it's a package

manager similar to NPM or node package

manager or Bower if you'll never works

with any package managers before we use

them to manage the dependencies of our

application so let's say our application

has dependency to five external

libraries instead of going to five

different websites for downloading these

libraries we use a package manager and

this package manager will download these

dependencies from its central repository

also if in the future one of these

libraries has a newer version again we

use our package manager to upgrade one

or more of the existing packages we

don't have to go to five different

websites we also have this startup that

CS which is a new approach

Microsoft is taking for starting the

application so the next version of

asp.net called asp.net core 1.0 which is

not ready yet they've dropped global

data ax and all this sort of logic is

implemented in this startup class and

finally we have web config which is an

XML that includes the configuration for

our application out of all the elements

you see in this XML mostly you will need

to work with only two sections

connection strings which is where we

specify database connection strings and

appsettings which is where we define

configuration settings for our

application okay now that you have a

good understanding of what is inside

this project let's see the building

blocks of MVC architecture in action

okay solution Explorer right-click

models and add a new class here I'm

going to call this movie we give it a

couple of properties like integer ID and

string name to quickly create a property

just type prop press tab this is a code

snippet you specify the type then press

tab again and the name of the property

so this class is a plain old CLR object

or poco which represents the state and

behavior of our application in terms of

its problem domain in this case it

doesn't have any behavior or logic it

just has a couple of properties which we

use for representing state now let's say

we want to create a page where we

randomly pick a movie and render its

details assuming that this page would be

under slash movies slash random we need

to create a controller called movies

controller with an action called random

so in solution Explorer right click

controllers add controller here we have

different templates and most of them are

used for auto generating some code which

we call scaffolding but we are not going

to use any of these templates because I

want you to learn how to create a

controller from scratch so select the

first one add call this movies

controller so this controller is

very simple class that derives from the

controller class and here we have an

action called index which returns action

result I'm going to change the name of

this action to random so this will be

called when we go to slash movies slash

random now in this method I'm going to

create an instance of our movie model so

a movie new movie now because I'm using

resharper resharper automatically

resolved the namespace for this class if

you're not using resharper you need to

go on top of this file and manually type

using vit Lee dot models back here let's

set the name of the movie Shrek in a

real world application

we often get a model from a database but

for now to keep things simple let's just

focus on the core building blocks of MVC

apps now here you can see that this

method is returning a view and the

reason this view is red is because

resharper is telling me that this view

file does not exist in the application

so in the solution Explorer under views

look inside movies folder we don't have

a view called random so right click Add

view call this random here we have

template which we can use to auto

generate a view but we're not going to

use this feature under options you can

tick this box to create this view as a

partial view a partial view is not a

complete page it's like a widget that we

can reuse on different views we are not

interested in that

so untick here we have a check box for

selecting the layout for this view a

layout is like a template or a master

page we want all the views in our

application to have the same look and

feel so let's select the layout

fault our MVC project has a layout under

views shared called

underline layout so select this and add

the view okay here you see a mixture of

HTML and see sharp code prefixed with an

ad sign so on the top you have a block

and inside this block we are setting two

properties one is view back the title

which we'll look at later but basically

this is going to be the title of our

page shown in the browser an expert

setting the layout for this view after

this code block we have just plain HTML

now I want to go back to the controller

press ctrl + tab this way we can switch

between open tabs look view is no longer

read because now we have a view on the

disk now I want to put this model movie

model in our view so we can render it

again ctrl tab to go back to the view I

want to change this heading and render

the name of our movie so we need to

write c-sharp code we start with add

sign and then type model every view has

this property which gives us access to

the model we pass to it in the

controller now in the intellisense note

that the type of this model is dynamic

it's not a movie so if I use the dot

operator

I cannot see the name property of this

movie here so on top of the file we need

to use a directive to specify the type

of the model for this view so a design

model and this has to be lowercase and

here we specify the fully qualified name

of our model class so the name of the

application widly that models that movie

now if you're using resharper you don't

have to remember this fully qualified

name you can just type movie and press

enter resharper automatically resolves

the name space okay back here now we can

type model dot and look we've got ID and

name properties here so let's render the

name

all right now let's run the application

because we are in the random view and

this view is inside the movies folder if

we press ctrl + f5 now our browser will

take us to slash movies slash random so

ctrl f5 okay congratulations so you have

seen a model a view and a controller in

action throughout the rest of the course

will work on more sophisticated

scenarios but the fundamentals will be

very similar to what you have seen in

this video

okay now let's go to the homepage I

don't like this default template that

comes with our application it looks a

little bit ugly so let's find a better

template our asp.net MVC application

uses bootstrap as its front-end CSS

framework so to replace this template we

need to find a bootstrap template head

over to boots watch comm here you see a

bunch of different templates for

bootstrap under themes select lumin so

scroll down our navigation bar will look

like this here we can see the buttons

tables forms so nice and clean now under

Newman select bootstrap dot CSS this is

the bootstrap CSS file but with modified

Styles you need to save this file on the

disk and I would suggest to call it

bootstrap - lumen to distinguish from

the original bootstrap file then add it

in the project under the content folder

so here you see I have both bootstrap

and bootstrap - lumen now we need to

replace the reference to bootstrap with

bootstrap lumen so on our app on the

line start open up bundle config this is

where we define various bundles of

client-side assets for example we can

combine and compress multiple JavaScript

or CSS files into a bundle and this way

we reduce the number of HTTP requests

required to get these assets when a page

is loaded at this result in a faster

page load so here you see we have a few

bundles one for jQuery and inside this

bundle we have the jQuery script we have

another bundle for jQuery validation

plug-in and inside this bundle we have

all the files that match this pattern we

have another bundle from moderniser one

for bootstrap and another one for our

CSS assets in

our CSS bundle we have bootstrap and

site dot CSS which includes a few

generic styles for our application

now ad - lumen here now because we have

modified our c-sharp code we need to

compile it in order to see the changes

so press ctrl + f5 to compile and run

the application again alright here's our

new home page with a new look and feel

now get ready for a quick quiz I want to

test your knowledge about what you have

learned in this section so this was just

a quick introduction to a nice banana

MVC now let me quickly give you a heads

up about what is coming up over the next

few sections in the next section we're

going to look at the fundamentals on a

spinet an MVC in detail by the end of

this section you will have a good and

in-depth understanding of how a speed

and an MVC works next we'll use entity

framework to connect our application to

a database

they'll be using code first workflow for

this so if you're new to code first this

is a great eye opener then we'll add

forms and implement validation so at

this point you will know how to

implement crud operations in asp.net MVC

next we'll look at using asp.net Web API

to build restful services so I will

explain what restful convention means

and how you can create restful services

using asp.net Web API once we build our

API s

we'll shift our focus to client-side

development so we'll use jQuery to

consume some of these API so in this

section you're going to learn about two

very useful jQuery plugins next we'll

implement authentication and

authorization using a speed and identity

framework so you will understand exactly

how a speed and an identity works and

how you can customize it for your

applications next I'll talk about

performance optimization I will

introduce you to three-tier architecture

and for each tier I will show you how

you can optimize the performance of your

application in that tier

then in Section ten we'll put everything

together and I will show you a

systematic way to build a feature

end-to-end and finally in the last

section you will learn about building

and deployment so there is a lot to

cover and I will see you in the next

section

well hello it's mahshar your instructor

I just wanted to let you know that what

you've been watching so far is actually

picked from my complete a spoon and nbc5

course on udemy in case you're

interested to have the complete course

you can get it with a discount

using the link in the video description

and if not that's perfectly fine

continue watching as the next section is

coming up have a great day in this

section we're going to take a closer

look at building blocks of a Sweden ATM

receipt and by the end of this section

you will have a much deeper

understanding of how this framework

works more specifically we're going to

look at controller's actions routing

views and view models so let's get

started

so in the last section you noticed that

our random action returns an action

result this action result is the base

class for all action results in asp.net

MVC so depending on what an action does

it will return an instance of one of the

classes that derive from action result

in a random action we're calling this

view method here which is just a helper

method inherited from the base

controller class this method allows us

to quickly create a view result

alternatively we can return a view

result like this return new view result

you can see that it's easier to just

call the view method and this approach

is way more common amongst a speed-up

net MVC developers now you might be

asking why is the return type of this

method action result even though we're

actually returning a view result well in

case of this action we could simply set

the return type to view result and this

is actually good practice especially

when it comes to unit testing this

action this way will save ourselves from

an extra cast in our unit tests we look

at unit testing in the second part of

this course but sometimes it's possible

that in an action we may have different

execution paths and return different

action results in that case we need to

set the return type of that action to

action result so we can return any of

its subtypes okay if your result is one

of the action results that you work with

most of the time let's take a look at

other types of action results we have

partial view result to return a partial

view content result to return simple

text redirect result to redirect the

user to a URL redirect a rapt result to

redirect an action instead of a URL JSON

result to return a serialized JSON

object file result to return a file HTTP

not found result to return and not found

or 404 error an empty result which is

used when an action doesn't need to

return any values like void

as you can see for all these types

except em to result we have a helper

method in the base controller class so

let's see some of these in action back

in the code I'm going to comment this

out let's return content like hello

world let's run the application with

ctrl + f5 and navigate to slash movies

slash random so look we just get plain

string contents in the response another

example let's return HTTP not found now

build the application with ctrl shift B

this will compile the application

without opening a new tab in the browser

now press Alt + tab to switch back to

Chrome and ctrl R to refresh the page

okay look we got this standard 404 error

now for empty result we don't have a

helper method so if you want to create

an action that doesn't return anything

you need to return an instance of empty

result like this return new empty result

ctrl shift B to build

Alt + tab control R okay look there's

nothing in the response and the last

example return redirect to action here

we specify the name of the action and

then the controller now sometimes as we

are redirecting the user from one page

to another we need to pass arguments to

the target action to pass arguments we

use an anonymous object as the third

argument to this method so new anonymous

object let's say page is 1 and sort by

is name

build back to Chrome refresh okay look

we got redirected to the home page and

you can see in the browser address bar

that the arguments we sent are appearing

as part of the query string so this is

pretty much all you need to know about

action results by the way don't think

you need to memorize any of these stuff

for the most part you'll be using view

HTTP not found and redirect result

in the last lecture we looked at action

results which are the output of our

actions now let's take a look at action

parameters which are the inputs to our

actions when a request comes in the

application asp.net MVC automatically

Maps request data to parameter values

for action methods so if an action

method takes a parameter the MVC

framework looks for a parameter with the

same name in the request data if a

parameter with that name exists the

framework will automatically pass the

value of that parameter to the target

action this parameter value can be

embedded in the URL it can be in the

query string or in the data posted using

a form so back in the movies controller

I'm going to create a new action public

action result edit with a parameter

called ID and here I just want to return

simple Content ID equals plus ID let's

run the application

first we compile with control shift B on

10 tab back to the browser I'm going to

change the URL to movies slash edit / 1

this is an example of a parameter

embedded in the URL you can see that it

gets automatically mapped by the MVC

framework I can also pass this parameter

in the query string so ctrl L I'm going

to change this to ID equals 1 it gets

mapped again but let's see what happens

if I rename this parameter to movie ID

to rename you press f2 so all references

are renamed automatically movie ID one

more time billed back to the browser

refresh

we got an exception the parameters

dictionary contains a null entry for

parameter movie ID

so if not the NBC couldn't find a

parameter called movie ID embedded in

the URL or in the query string or in the

request body passed by form and that's

why we get this exception now I can

change the query string parameter to

movie ID there is gone but in this case

I cannot embed one in the URL because

the name of the parameter in our default

route is ID it's not movie ID let's have

a look at our default rap one more time

so in solution Explorer open up route

config look here's our default route and

the parameter we have here is called ID

so the value that we pass here will be

identified as ID not movie ID and in

movies controller this movie ID will not

be initialized when this action is

called now let's rename this back to ID

so this is how a smelvin

MVC Maps requests data to parameters our

actions we can also use optional

parameters in our actions so let's

create a new action public action result

index so this action will be called when

we navigate to movies now in this action

imagine we'll return a view with the

list of movies in the database we can

add two optional parameters here page

index and string sort by so if page

index is not specified we display the

movies in page 1 and similarly if sort

by is not specified we sort the movies

by their name now to make your parameter

optional we should make it non level

so for page index I'm going to add a

question mark here to make it an

honorable integer and four sort by we

don't have to do anything because the

string type in c-sharp is a reference

type and it's not able now inside the

action we check to see if these

parameters have a value so if page index

has value I put the nut operator here so

if it doesn't have a value

I initialize it to 1 similarly if string

is null or whitespace we pass sort by

here then we initialize it to name and

finally for the purpose of our demo I'm

just going to return simple content so

string that format page index equals the

first parameter and sort by equals the

second parameter and I pass page index

and sort by here okay

now build control shift B back to the

browser let's go to movies so you can

see I didn't have to specify any

parameters and by default page index is

one and sort by its name I can override

this parameter so I can pass page index

set it to two

and you can see it's updated here a sort

by is still name I can overwrite that to

sort by release date

now it's updated now in this case we

cannot embed these parameters in the URL

because that would require a custom

route that includes two parameters in

the next lecture I will show you how to

create a custom route

so this default route

application works for most scenarios but

there are situations where we need a

route with multiple parameters for

example in our video rental app we may

want to have a route like this where we

can get the movies by the release year

and month so let me show you how to

create a custom route in route config

class before our default route we call

route map route the reason you need to

add this route before the default route

is because the order of this route

matters you need to define them from the

most specific to most generic otherwise

a more generic route will be applied to

a URL and that's not what you want this

method has a few overloads the one we

use most of the time is the one that

takes three parameters named URL and

defaults so let's give our new router

name and this name should be unique so

movies by release date now let's put

this on a new line to keep the code

consistent and clean next parameter is

the URL pattern so movies slash released

here we need two parameters year and

month I note that I've enclosed these

parameters in curly braces now the third

argument we need to specify the defaults

we use an anonymous object for that so

new anonymous object here we set the

name of the controller to movies and the

action to by release date that's it

that's how we define a custom route now

let's create this action so save back to

movies controller I'll show you a quick

way to create an action type MVC action

for and press tab so this is another

code

snippet so we call this by release date

this action takes two parameters year

and month for the month we could use a

bite because the largest number we want

here is 12 but it doesn't really matter

now here again I want to return simple

content so here plus slash plus month

now build back to the browser let's

navigate to movies slash released

I'm not specifying any parameters we got

a 404 error because our URL has not

matched any of our rap patterns now

let's put the year and the month so our

ramp parameters are here we can also add

constraints to our route for example

let's say we want to enforce that the

year and month parameters to be four and

two digits respectively so back in a rap

definition we supply another argument to

map route method again we use an

anonymous object and here we can use

regular expressions to apply constraints

so I want the year to be four digit

number so set it to a verbatim string

backslash D which represents a digit and

the number in curly braces represents

the number of repetitions the reason I

put an add sign here is because

backslash is an escape character and if

you don't use app sign here we'll have

to add another backslash and this looks

a little bit ugly so undo that's better

now similarly I'm going to set months to

a regular expression backslash D with

two digits billed back to the browser

refresh we got a 404 error and that's

because of our constraint but if you add

a zero here everything works now let me

show you another example let's say we

want to constrain the year to 2015 and

2016 now this doesn't quite make sense

in the context of listing movies by year

but sometimes you may want to limit the

route parameters to a few specific

values again we can use a regular

expression to apply that constraint so

I'm going to change this to 2015 or 2016

so this is how we define custom route in

a snap that M you see in the next

lecture I will show you a cleaner way to

create a custom route

okay look at this code currently we have

only one customer out here but if you're

working on a larger application sooner

or later this file is going to grow with

a lot of custom routes and over time it

becomes a mess plus another issue with

this approach is that you have to go

back and forth between your actions and

custom routes and the third issue is

that if we go back to movies controller

and rename this action to by release

here you can see it's not updated here

and that's because of this magic string

so when we rename a controller or an

action we have to remember to come back

here and apply that name change as well

so this code is fragile because of this

magic string in asp.net MVC five

Microsoft introduced a cleaner a better

way to create a custom route instead of

creating the route here we can apply it

using an attribute to the corresponding

action so you might ask Marsh why did

you teach me the old and poor way of

creating custom routes because you may

be working with an existing code base

with convention based custom routes so

you need to understand how they work but

if you're building a new application or

improving an existing one I would

recommend you to use attribute routing

now let me show you how to define this

custom route using an attribute first in

order to use attribute routing you need

to enable it so routes dot map MVC

attribute routes I call this method

now let's delete this route save back to

the controller we apply the route

attribute and here we pass the URL

template so movies slash released slash

here slash month now to apply a

constraint got colon and then we add

regex to apply a regular expression this

is like a function that we call in

parentheses we pass the actual regular

expression so digit repeated four times

note that this regular expression is not

a string so unlike verbatim strings we

have to repeat this backslash twice now

with attribute routes we can also apply

other kinds of constraints for example I

can apply a second constraint to this

month parameter so after regex colon

again this time I'm going to use range

to set the range between 1 and 12

so you see attribute routes are more

powerful we also have a bunch of other

constraints like min max min length and

max lengths for Strings

integer float quit and so on you don't

have to memorize any of these

constraints just be aware that they are

supported by the framework if you need

to apply constraints to your attribute

routes just Google asp.net MVC attribute

route constraints okay so far we have

looked at controllers and routing in

detail now we're going to slowly

transition to views so in the next

lecture I will show you a few different

ways to pass data to views

earlier in the introduction section we

created this action to display a movie

and its action we passed our model to

the view by passing it as an argument to

the view method there are two other ways

to pass data to views and that's what

I'm going to show you in this lecture

one way is to use the view data

dictionary so every controller has a

property called view data which is of

type view data dictionary so in this

example we can pass our movie to the

view like this and we remove it from

here now let's go to the view with

resharper we can quickly navigate to the

view for this action by putting the

cursor on the view method and pressing

ctrl b and it's drop down you see the

name of the view random that CS HTML if

you're not using resharper you need to

go to solution explorer and find the

view under views movies right here okay

now instead of using model property we

need to use view data now dot look we

can't access the name property of our

movie because each item in the

dictionary is of type object so we need

to explicitly cast it to the movie now

don't type anything just watch for a

second because this code is going to get

a little bit ugly that's what I meant

so all these noisy parentheses compare

this to what we had before model dot

name which one do you think is better

it's obvious another problem with this

approach is this magic string here so

back in the controller if we change this

movie to random movie we have to

remember to go back into view and make

this change here as well otherwise we'll

get a null reference exception so this

way of passing data to the views is

fragile we had this in the very first

version of MVC and then Microsoft

decided to improve this but in a very

poor way so they introduced view

back which is a dynamic type so back in

the controller instead of using view

data with a magic string we use viewbag

with a magic property so this movie

property is added to the view back at

runtime which means we don't get compile

time safety if we decide to change this

magic property to random movie again we

have to remember to go back into view

and change it here plus we'll have the

casting issue as well so honestly I have

no idea what Microsoft was thinking when

they introduced this view back as an

improvement for view data so please do

not use view data or view back if you

want to pass data to a view just use the

approach I showed you earlier so back in

the controller we get rid of these and

just pass the movie object here now you

might be curious where does this movie

object go in the view result let me show

you so I create an instance of your

result your result that view data model

so this movie object we pass here will

be assigned to this property this view

method here would take care of that so

we don't have to write all this extra

code what I want you to note here is

that this view data it's not a regular

dictionary it's a view data dictionary

so you can either use it as a dictionary

with key value pairs or use its model

property to work with an object and

that's the preferred way next we're

going to look at view models

in a random view currently we just

displayed the name of a movie but what

if we also wanted to display the list of

customers who have rented this movie in

our domain model there may not be a

relationship between the movie and

customer classes so we need to pass two

different models to this view one is the

movie the other is the list of customers

but here we have only one model property

so how do we solve this problem we use a

view model a view model is a model

specifically built for a view it

includes any data and rules specific to

that view so let's see a view model in

action first I'm going to add a customer

class to the models folder add class

customer let's give it a couple of

properties ID and name now we use this

models folder purely for our domain

classes like movie customer and so on we

put view models in a separate folder so

let's create a new folder add new folder

view models and then we add a new class

here

random movie viewmodel

so as a convention we use the viewmodel

suffix this class needs two properties

one is the movie note that as I type the

movie here resharper automatically added

this namespace here the other property

is a list of customers now let's go back

to our controller in the random action

I'm going to quickly create a list of

customers use the object initialization

syntax to add to customer objects here

customer 1 and 2 now we create a view

model object random movie view model

again resharper automatically resolved

the namespace now let's initialize the

movie property and the customers okay so

this is our view model now instead of

sending the movie here we send the view

model now look we have a red underline

here argument type random movie view

model is not assignable to model type

movie so basically that means in the

random view because the type of the

model for this view is the movie we

cannot give it a view model so we need

to change this to random movie view

model now we have an error

here because our view model doesn't have

the name property so we change it to

model the movie thing and you can see

here we have access to model that

customers in the next lecture I will

show you how to render the list of

customers

okay in this lecture we're going to

examine the razor review syntax in

asp.net MVC so you have learned that

here we can write C sharp code by

prefixing it with an axe sign to render

the list of customers we can simply use

a for each block so add sign for each of

our customer and model customers we use

a code block here this is compulsory in

a speed added MVC views even if what

you're going to put inside the for each

block is only one line now here inside

this block we can either continue

writing c-sharp code like using an if

statement or we can write HTML so the

view engine in MVC called razor view

engine knows how to parse this syntax

let's say we want to display these

customers using list items so outside

this for each block I use the UL tag

let's close it here and inside the

forage block we use Li and here we

switch back to c-sharp so at sign

customer dot name we can also use an if

block to conditionally render content

for example if no one has rented this

movie before we want to display a custom

message

so if model that customers that count is

zero code block here we can add a

paragraph

no one has rented this movie before or

if you don't want to use the P tag you

can simply use text this is not part of

the standard HTML but it's something

that the Razr of your engine understands

so if no one has rented this movie this

if block will render our text without

any markup around it okay now we add an

else block here and move this ul right

here

you can see working with razor views is

pretty easy now let me show you a few

more techniques let's say here in H do

you want to conditionally add a class

popular if the movie has been rented by

at least five customers otherwise we

don't want to have this class here how

do we do that first we use a code block

so at sign code block here we can write

any sushar code so I'm going to declare

a variable call it class name and

initialize it like this if model that

customers the count is greater than five

it should be popular otherwise it should

be known now here we can render class

name with this code if class name is

null this class attribute will not be

rendered in the final HTML it will be

added only if class name is popular so

let's try it

run the application with ctrl f5 okay

right

the heading inspect

look we don't have the class attribute

because currently we have only two

customers now let's go back to the view

I'm going to change this condition to

greater than zero save now we don't have

to recompile the application because

this is just a view so we can switch

back to the browser refresh

look at the heading we have the class

popular so this is how you render

classes dynamically by the way this

technique is not limited to classes you

can use this technique to render any

attributes dynamically and one last tip

you can add comments in your razor views

using this syntax at-sign star star @

sign and we can make it multiple lights

this is a comment on multiple lights

so earlier when we created the view I

briefly explained what a partial view is

in this video we're going to take a

closer look at partial views so in

solution explorer open up views

share it lay out this is the bootstrap

template that defines the overall look

and feel of our website so we've got the

standard HTML head and body sections

inside the body we've got a div that

represents our navigation bar let's

collapse this all down control and press

M twice below this navbar we have a

container for our pages note this call

to render body method so what we put in

our views will be placed here when the

view is rendered and you can see below

that we've got a horizontal line and the

footer now I told you that a partial

view is like a small view that we can

reuse on different views but partial

views are not necessarily for reusing

markup sometimes we can use them to

break down a large view into smaller

more maintainable partial views for

example let me expand this navigation

bar element again you can see that we

have a fair amount of markup on this

view while this is not terribly bad we

can improve the maintainability of this

layout but extracting the part that

represents the navigation bar into a

partial view so let's do that

back in solution Explorer right-click

shared add

view

by convention we prefix partial view

names with an underscore so let's call

this underscore navbar

we need to tick this check box here

create as a partial view this way this

view will not have a layout okay now

roll tab to get back to the layout

scroll up a little bit so here's our

navbar element again put the cursor on

this element hold down the ctrl and

press M twice ok collapsed control eggs

to cut

- navigation bar paste it here now we

can see in this partial view we only

have a navigation bar nothing else so

next time we want to change something on

our navigation bar you can simply jump

to this partial view we don't have to

scroll up and down in the main layout

save now back to the layout so here's

the content area of our pages the

navigation bar was above that so here we

need to render that partial view use add

sine HTML this is a property of our

views which is of type HTML helper so

it's a class that provides a number of

useful methods to work with HTML we're

going to use the partial method here we

pass the name of our partial view

underlined navbar that's it that's how

we use a partial view on another view

now optionally we can pass a model to

this partial view as the second argument

of this partial method in this case we

don't have a model in our layout but let

me temporarily just declare a model for

demonstration so on top of this view I'm

going to add the model directive and

let's set this to random movie view

model now here if I don't specify a

model the model that is currently passed

to this layout view will be

automatically pass through this partial

view but let's say this navbar expects a

movie not the entire random movie view

model then we can supply a model as a

second argument so model dot movie okay

we've covered a lot of ground about

various components of a snap than MVC so

in the next lecture you will get a cheat

sheet to quickly overview the materials

in this section and then I'm going to

give you an exercise to put what you've

learned in action

okay I want you to use what you have

learned in this section and implement a

few simple features in our video app so

you can see here on the navigation bar I

have changed the application name to

read Li and now we have only two links

customers and movies in the customers

page we have a table with a list of

customers and currently we have only two

customers now these customers are not

coming from a database I've just hard

coded them in my action for this

exercise don't worry about the database

in the next section we're going to use

an entity framework to generate a

database for our application now back

here in the list of customers if I click

on John Smith I go to a new page at this

address

customers slash details slash one which

is the idea of that customer if I change

this to two you see Mary Williams but if

I change this to three we get a standard

404 error page because we don't have a

customer with that ID now in the future

we can replace this pouring standard

page with a custom design before now

don't worry about it what I want you to

do as part of this exercise is to cater

for various situations like when we have

a customer versus when we don't have a

customer now let's go back in the list

of customers if we don't have a customer

we should see a message like we don't

currently have any customers so let me

temporarily go back to my action and

comment out the code that generates this

list and then refresh the page look this

is what I was talking about

so when implementing this view cater for

these scenarios

the list of movies is very similar

currently we have two hard coded movies

Shrek and wall-e and there is no link

under these movies if you want you can

add them but it's going to be exactly

like the exercise for customers so go

ahead and use what you have learned in

this section to make these changes and

by the way before you get started look

at the PDF I've attached to this lecture

there are additional materials in that

PDF that you need to read in order to do

this exercise

if you want to see my solution you can

simply head over to github.com slash Maj

- gamma daddy here you see I have a

repository created for this course

lately - MBC - five here we can get the

latest source code or one of the

previous versions of the application you

can see currently I have eight commits

so let's take a look

so as I'm recording these lectures and

modifying this application I make small

changes to the code and commit it to the

repository for example you can see in

the previous lecture I extracted the

navigation bar into a partial view let's

take a look at this commit I'm going to

change the view mode to split because

it's easier to see the before and after

changes so we can see in layout dot CSS

HTML on the left side this is what we

had and on the right side this is what

we currently have so the red lines were

removed and the green lines were added

you can see that I remove this div which

was our navigation bar and replace it

with HTML that partial method let's

scroll down here is another file nav bar

that's es HTML which is a new file

because previously we had nothing here I

know we've got all this markup for the

navigation bar so you can see I've got

another comment here solution section to

exercise display the list of customers

and movies so throughout this course as

you do your exercises you can always

come back here and look at my solution

and by the way when required I always

add comments to my solution so you know

why I did something in a certain way so

be sure to read these comments

all right in this module you learn the

fundamentals of a speed up an MVC or

specifically you learn about action

result action parameters convention

based routing attribute routing and

raiser views in the next section we're

going to use entity framework and

connect our application to a database so

I will see in the next section well if

you made it this far you seem to be very

enthusiastic about learning asp.net MVC

5 and I highly recommend you to take my

complete a splat an MVC 5 course on

udemy this course contains seven and a

half hours of content in terms of

high-quality video and audio along with

lots of exercises and real-world

examples if you're interested you can

get the course with a discount using the

link in the video description I hope to

see you in the course