Download "How to build a website with Umbraco 10 - Part 15 - View Components"

Please wait. We're preparing links for easy ad-free video watching and downloading.

Previous video: Electric Smoke Background - Royalty Free Footage Next video: Hearts of Iron 3 | Their Finest Hour | Germany | Part 8 | Fate of France

Hearts of Iron 3 | Their Finest Hour | Germany | Part 8 | Fate of France

Hearts of Iron 3 | Their Finest Hour | Germany | Part 8 | Fate of France

Channel: Benjamin Magnus Games

Electric Smoke Background - Royalty Free Footage

Electric Smoke Background - Royalty Free Footage

Channel: footageisland

Complete 3 Hour ASP NET 6.0 and Entity Framework Core Course!

Complete 3 Hour ASP NET 6.0 and Entity Framework Core Course!

Channel: tutorialsEU

Make a 2D TOP-DOWN SHOOTER in just 10 MINUTES (Godot Game Engine)

Make a 2D TOP-DOWN SHOOTER in just 10 MINUTES (Godot Game Engine)

Channel: Eli Cuaycong

Melodyne • Sound Editor on bass (Melodyne studio)

Melodyne • Sound Editor on bass (Melodyne studio)

Channel: Celemony

POPULAR OVERLAYS! (cyber, Y2K, glitches, edgy, baddie, soft etc.)

POPULAR OVERLAYS! (cyber, Y2K, glitches, edgy, baddie, soft etc.)

Channel: afi edits

How to paint a realistic tree with loose brush strokes - Full lesson in acrylic.

How to paint a realistic tree with loose brush strokes - Full lesson in acrylic.

Channel: gagnonstudio

HHO 49 plates Hydrogen Generator. Gift at 500k views. Make hho

HHO 49 plates Hydrogen Generator. Gift at 500k views. Make hho

Channel: Inventive - Water fuel

Drupal 8 Beginner, Lesson 16: Introduction to Content Types

Drupal 8 Beginner, Lesson 16: Introduction to Content Types

Channel: OSTraining

How To Create a Digital Countdown Clock in Cinema 4D + Freebie

How To Create a Digital Countdown Clock in Cinema 4D + Freebie

Channel: thepixellab2011

CODESHARE6855

codeshare

code

share

paul

seal

prjseal

umbraco

umbraco10

v10

10

tutorial

series

free

training

howto

website

build

dotnet

core

view

component

viewcomponent

00:00:05

hi I'm Paul seale from co-chair.com UK

00:00:08

welcome to this the 15th episode in this

00:00:11

series where I'll show you how to build

00:00:12

a website in umbraco 10. in this episode

00:00:15

we're going to look at what view

00:00:17

components are so this will be one of

00:00:20

the first times we're actually looking

00:00:21

at some c-sharp coding.net6

00:00:24

as well so we're going to look at that

00:00:26

and just have a get a feel for what view

00:00:28

components are and how we can use them

00:00:30

in this project

00:00:31

so let's get started so I've got Visual

00:00:34

Studio open I've got my command line

00:00:37

running dot net watch run in my site

00:00:40

folder there you can see clean Dot site

00:00:42

folder I'm running the site

00:00:46

and this is the site now so one one of

00:00:50

the things about view components is that

00:00:52

it's

00:00:53

it's not part of the page request

00:00:55

there's no model binding and what I mean

00:00:58

by that is that if there were some

00:01:00

um queer strings on the page it could

00:01:02

automatically bind to

00:01:04

those as for the model passed in that's

00:01:07

what we might find normally but with a

00:01:09

view component yeah it's not part of the

00:01:11

request it's not part of a controller or

00:01:13

anything it's just a standalone

00:01:16

component that you can call

00:01:20

um the there are some documentation

00:01:21

about view components in dotnet6 so I

00:01:25

will leave that in the video for you

00:01:28

but we're going to use this to create

00:01:31

our own view component and what I'd like

00:01:33

to do is create one for the navigation

00:01:35

and if we have time one for the footer

00:01:39

so when I was doing those before I did

00:01:43

mention about view components but we

00:01:45

didn't want to get into it well now it's

00:01:46

time to get into it so view components

00:01:49

what are they then well Microsoft

00:01:53

says they are similar to partial views

00:01:55

but they're much more powerful

00:01:57

they don't use model binding they depend

00:01:59

on data passed when calling the view

00:02:01

component and this article was used was

00:02:04

written using controllers and Views but

00:02:07

components work with razor pages and

00:02:09

what we've been doing a lot lately with

00:02:12

umbraco feels a lot like razor Pages as

00:02:15

well because we've not really done much

00:02:16

with controllers

00:02:18

so that's why they're quite suitable

00:02:20

um so I've got Visual Studio code open

00:02:24

I'm just going to close all these tabs

00:02:27

and let's have a look at our master so

00:02:31

in the master is where we've been

00:02:33

calling these partials we've got one for

00:02:35

the metadata

00:02:36

we've got one for the navigation and

00:02:38

we've got one for the footer

00:02:40

now with a partial the routing for a

00:02:44

partial is under views and then partials

00:02:46

and then whatever folder you want really

00:02:49

so that's how we've been doing it so far

00:02:52

um but what I want to do this time is

00:02:55

create some view components

00:02:57

and there's different rules for a view

00:03:00

component so

00:03:02

to create a view component it's got two

00:03:04

parts it's got the c-sharp class part of

00:03:07

it and then it's got the corresponding

00:03:10

um Razer file as well

00:03:19

so we can see this um over here so this

00:03:22

is our class

00:03:24

and there are three ways to create one

00:03:27

um

00:03:29

and I don't want this video just to be

00:03:30

me going through the documentation but

00:03:33

basically you can

00:03:35

you can create one by

00:03:37

inheriting from view component let me

00:03:40

just look for this

00:03:49

yeah it can be created only the

00:03:51

following so deriving from view

00:03:53

components so that is using it as as

00:03:57

when we create a class and we say it

00:03:59

inherits from this

00:04:01

or we can decorate the class with a view

00:04:04

component attribute

00:04:07

um or we can create a class where the

00:04:08

name ends with the suffix view component

00:04:10

so that's interesting that it's got

00:04:12

these three conventions

00:04:14

so what I like to do when I create mine

00:04:17

I'll show you my preferred way of doing

00:04:19

it so these can be in any folder in the

00:04:22

site as well but what I'm going to do is

00:04:24

I'm just going to create mine in in a

00:04:27

folder called components so I'm just

00:04:29

going to click on this file here so I'm

00:04:31

able to create a folder at the root and

00:04:33

call it components

00:04:35

foreign but as it says it can be any

00:04:38

file any folder name

00:04:42

then in this I'm going to create myself

00:04:45

a file so and I'm going to call this

00:04:48

navigation

00:04:51

now if I wanted to I could just call it

00:04:53

navigation view component and that now

00:04:55

because it's named that and the class

00:04:57

I'll call it that within the code as

00:04:59

well then it will automatically become

00:05:01

one but I sort of like do belt and

00:05:03

braces and

00:05:04

navigation view component dot CS

00:05:09

so we've got that now we can do public

00:05:12

oh let's do a namespace

00:05:16

namespace so we're in clean Dot site dot

00:05:21

components

00:05:24

if you're using visual studio you get

00:05:26

these things automatically now one thing

00:05:29

I've done here which might seem strange

00:05:31

if you're used to working with

00:05:33

um c-sharp from.net framework or earlier

00:05:36

versions of dot net Five and Below

00:05:40

um I'm I've ended my namespace line now

00:05:42

this is called a file scope namespace

00:05:45

and that allows us to instead of the old

00:05:48

way

00:05:49

where we would have this and then we

00:05:51

would indent it and have our class so

00:05:54

this would be navigation

00:05:57

public class

00:06:00

navigation

00:06:01

view component

00:06:06

um instead of doing that what I've done

00:06:09

is I've taken away these brackets so I

00:06:13

can pull back the indentation

00:06:15

to another level and I think it looks a

00:06:18

lot neater

00:06:19

so we've got our navigation view

00:06:22

component

00:06:23

but what I like to do

00:06:25

on this is I like to inherit from view

00:06:29

component

00:06:32

now if I control dot on that it it says

00:06:36

oh yeah using Microsoft asp.net core MVC

00:06:40

so it recognizes that I also

00:06:43

um when I work with it as well I also

00:06:47

put an attribute above it and just do

00:06:49

view component

00:06:53

Open brackets name equals

00:06:55

I don't know why I just it doesn't have

00:06:58

to be like that basically it picks up

00:07:01

this as the name so whatever's in front

00:07:03

of view component becomes the name

00:07:06

um

00:07:08

I could even I think because I've

00:07:10

inherited front view component and

00:07:12

because I've got that I've got like

00:07:14

three different things that you don't

00:07:15

need all of them but it will still work

00:07:17

but if I wanted to I could just take off

00:07:19

that and leave that as navigation I

00:07:22

could leave that

00:07:24

and now it will still work but I'm going

00:07:27

to do them all I'm going to call this

00:07:29

navigation

00:07:32

so view component name equals navigation

00:07:34

public class navigation view component

00:07:37

and then in there it's from view

00:07:39

component

00:07:41

and then if we just go down to here

00:07:44

the example one that we get in the

00:07:47

documentation from a bracket not from a

00:07:49

bracket from Microsoft

00:07:53

the here we go

00:07:55

so

00:07:57

um it's this what I'm looking for here

00:08:01

so we need a method in here called iview

00:08:04

component result task I view component

00:08:06

result invoke async so here oops I don't

00:08:11

know why that's deleted that

00:08:19

so

00:08:20

with a basic

00:08:23

um view component

00:08:24

the minimum we want to do is this so you

00:08:27

can pass what you see here is you can

00:08:29

pass variables in

00:08:31

so if we just do control dot make method

00:08:34

synchronous we don't have to right we'll

00:08:38

save that

00:08:40

so we are working with the a view

00:08:42

component called navigation

00:08:44

and this

00:08:46

is it's got all three of different ways

00:08:49

that you can Define it as a view

00:08:50

component

00:08:51

but you don't have to do all this now

00:08:54

this will then return a view and the

00:08:57

review that it wants is one called

00:08:59

default now what I want to do before I

00:09:02

create that view I want to just get the

00:09:05

site to pick up on this and complain

00:09:08

about this so yes I want to restart the

00:09:10

app

00:09:12

and I want the site to um

00:09:16

complain then it can't find this view so

00:09:18

I'm going to add it to the master

00:09:19

instead of calling the

00:09:22

um instead of calling the partial view

00:09:24

like it was doing on the master template

00:09:28

I'm going I'm going to get it to call it

00:09:31

from there so instead of this I'm going

00:09:32

to do a weight component

00:09:35

dot invoke async

00:09:40

and then

00:09:41

um

00:09:42

or just check the official Microsoft

00:09:44

documents as well

00:09:51

there we are

00:09:52

so then

00:09:54

the name of the view component and then

00:09:57

any parameters you want to pass in

00:10:00

so this is correct so I'll just do

00:10:02

navigation

00:10:04

like that now it is complaining because

00:10:06

it doesn't know about that oh it's okay

00:10:08

now so I've told it I want it to render

00:10:11

the navigation component here

00:10:14

there is another way you can do it as

00:10:16

well you can do you can call this it

00:10:18

doesn't have to be async it can be

00:10:20

synchronous so you can take the async

00:10:23

off and then you can

00:10:25

um to take this off from being a task

00:10:27

and just call it invoke

00:10:29

so it doesn't have to be asynchronous

00:10:33

um so now I've called that let's just

00:10:35

save that and see what happens on the

00:10:36

front end of the site see if it falls

00:10:38

over or anything like that

00:10:41

there we go so what is it saying the

00:10:44

view components navigation default was

00:10:47

not found

00:10:49

so what it's telling us is that it's

00:10:51

looking in the views folder

00:10:53

and it's looking for the components

00:10:56

navigation default so let's go down to

00:11:00

here and let's do that

00:11:03

so we're going to create a components

00:11:05

folder at this level

00:11:07

inside the views

00:11:11

and then we're going to create another

00:11:13

file under that

00:11:16

new file

00:11:17

and then we'll call this default Dot

00:11:20

cshtml

00:11:24

and then

00:11:25

um

00:11:26

this we can just put anything so I'm

00:11:29

just going to put eight one hello

00:11:33

so it's not particularly got a model to

00:11:36

be passed to it or anything but for now

00:11:39

that's what we're going to use let's

00:11:41

refresh the page and see what happens so

00:11:44

it doesn't recognize it I might need to

00:11:47

dotnet watch run

00:11:49

so I'm going to cancel that and run it

00:11:51

again

00:11:57

foreign

00:12:10

so hopefully we won't see an error but

00:12:13

just make sure we've got the correct

00:12:14

spelling for the file so default is

00:12:18

correctly spelled component oh and it's

00:12:21

just enough in the components folder so

00:12:23

that is going to error and we'll see why

00:12:27

is still saying they can't find it it's

00:12:29

looking for components navigation

00:12:31

default

00:12:32

so let's put this inside another folder

00:12:35

so create a folder inside components and

00:12:37

call it navigation

00:12:41

then move this into that folder

00:12:45

are you sure you want to move it yes I

00:12:46

do

00:12:47

now we should be able to reload the page

00:12:52

and it should know about it

00:12:55

so we're going to see a big hello up

00:12:57

there so instead of the navigation menu

00:12:59

now we've got hello

00:13:01

so

00:13:03

that's how we do it with that so let's

00:13:05

see if we can change the name of it so

00:13:07

we could do we could copy this

00:13:10

and we could paste it in there I'm going

00:13:14

to rename this and I'm going to call

00:13:16

this goodbye

00:13:21

and don't ask me why

00:13:23

um and then inside this I'm going to say

00:13:25

goodbye

00:13:27

save that so for now let's just reload

00:13:31

the page and see what happens

00:13:33

so the default one is hello how do we

00:13:37

get it to say the goodbye one well we

00:13:40

can go into the view component and we

00:13:41

can tell it what the name of the view

00:13:44

component is so of the vo to use so we

00:13:47

can say uh goodbye

00:13:53

and I think we might need to

00:13:57

tell it them so yeah the string of the

00:13:59

view name and then the model

00:14:01

so we can just say null for the model

00:14:05

that might it might complaint about that

00:14:07

we might need to do like this view name

00:14:12

oops

00:14:15

and I might just take off that like that

00:14:18

let's just see how that is so I

00:14:20

specified this is the view name rather

00:14:23

than it being the model this is actually

00:14:24

the view name

00:14:26

so we'll reload the page and there we go

00:14:28

we've loaded the goodbye one so I know

00:14:31

what some people do is they prefer to

00:14:33

instead of having all of their partial

00:14:36

views called default all the time it's

00:14:39

quite hard to understand what what it is

00:14:42

so in this instance instead of it being

00:14:44

called default they'd call it navigation

00:14:46

as well so it'll be in the components

00:14:48

navigation and then navigation

00:14:50

uh but what I'm showing you here is you

00:14:53

can you can do the different ways so

00:14:55

yeah if we wanted to

00:14:58

you could call it like that and then you

00:15:01

could

00:15:02

go to your default rename that

00:15:04

to be navigation

00:15:07

and then

00:15:09

save your view component

00:15:13

and then if we wait for it to load

00:15:16

yeah it's showing the navigation one so

00:15:19

we could do that but I'm just going to

00:15:20

leave it as default so that means that I

00:15:23

can delete that

00:15:25

and it means that I can delete the

00:15:28

goodbye file don't need it anymore

00:15:30

goodbye

00:15:31

and then rename navigation to be default

00:15:35

dot CS HTML

00:15:38

well that's good then so what do we get

00:15:41

out of this like what are we gaining to

00:15:43

me it looks like more Plumbing well yeah

00:15:45

it could be uh seen as more Plumbing but

00:15:50

you get the chance to use what we call

00:15:52

dependency injection in this so it's

00:15:54

good to keep the logic out of the views

00:15:57

and it's good not to need a controller

00:16:00

um for this as well so it you can just

00:16:03

basically call it from your view here

00:16:06

we're just calling it here so no

00:16:08

controller was in in was needed and you

00:16:12

can basically pass in a model at this

00:16:14

point so I could do

00:16:17

um

00:16:19

Bob equals 10.

00:16:22

like that and then in my component up

00:16:25

here I can have a int

00:16:29

Bob

00:16:32

and then my in my review

00:16:35

I'll return Bob

00:16:37

and then in my default

00:16:41

I will do at modelint

00:16:49

and then I will do

00:16:52

at model

00:16:56

now let's have a look so I'm I think

00:16:59

I've done it right I might be wrong here

00:17:02

no the model item passed into the view

00:17:05

data dictionary is of type

00:17:07

home page oh okay

00:17:13

let me have a look at the documentation

00:17:16

I've obviously done something wrong it's

00:17:18

not how I always do it I'm just making

00:17:22

it up for the example here so I think

00:17:25

that's where I've gone wrong in just

00:17:27

making something up for the example so

00:17:28

I've got model I enumerable blah blah

00:17:31

blah

00:17:33

and then model there

00:17:36

so that's right so

00:17:39

in invoke async navigation

00:17:46

uh let's see how they're

00:17:49

invoking it

00:17:53

so it says all right here we go

00:17:56

component in bokeh sync

00:18:00

so it should be correct so what I want

00:18:02

to do is I want to just do another

00:18:04

rebuild I'm going to do Ctrl C

00:18:08

I'm just going to run the.net watch run

00:18:10

again

00:18:14

it could be that it just needed to

00:18:16

rebuild after that

00:18:18

because in theory what I do have here is

00:18:21

correct I've told it my model isn't int

00:18:23

I've told it to return my view

00:18:28

and pass in the model of Bob

00:18:33

and so hopefully

00:18:36

this won't error now

00:18:40

there we go it's returned Bob so Bob

00:18:44

parameter is 10. so it's quite handy

00:18:47

that you can pass these values in so if

00:18:49

you imagine you might have values that

00:18:52

you can pull from

00:18:54

um on Bracco so we could do model Dot

00:18:57

and then on the home page have we got

00:18:59

any properties

00:19:02

um

00:19:05

we do have properties like level that's

00:19:08

an INT I'll just save that

00:19:10

and then we reload this

00:19:14

you know it's passing in a value from

00:19:16

the model so you can see that and then

00:19:19

you can pass that into your component

00:19:22

um but what we do want to pass in really

00:19:24

is whatever the

00:19:27

because if we just get back on topic and

00:19:29

remember what the whole point of this is

00:19:31

in the partials we've got a navigation

00:19:33

and that navigation

00:19:36

was

00:19:37

um looking at the current page and then

00:19:40

getting the home page well we can take

00:19:42

this logic out of here

00:19:45

and this as well and then basically

00:19:50

our view

00:19:53

can just care about the navigation

00:19:56

items and it doesn't need to know about

00:19:59

the home page or anything like that

00:20:01

the navigation items is an innumerable

00:20:04

of a navigation item

00:20:08

so what I'm saying here is that we could

00:20:10

do I innumerable

00:20:15

navigation item

00:20:19

foreign there we go

00:20:21

and then

00:20:24

we'll just do control Dot

00:20:27

no code actions available

00:20:31

so it doesn't recognize what a

00:20:32

navigation item is so we might need a

00:20:34

using on this using clean Dot site Dot

00:20:41

well

00:20:44

where's our models

00:20:46

I've not done this for a while so I've

00:20:48

forgotten where we kept our models

00:20:52

so if I go to app settings

00:20:55

development

00:20:57

no if I go to up settings models Builder

00:21:00

source code manual

00:21:03

there's no particular namespace uh did

00:21:06

we put it in the view Imports file

00:21:10

view Imports

00:21:14

oh it's there it's that one I need

00:21:23

oh I numberable

00:21:25

foreign

00:21:27

so yeah let's just have a look because

00:21:28

it's already in the view Imports I

00:21:30

shouldn't need that I numberable

00:21:32

innumerable of navigation items save

00:21:35

that right now it's a bit happier okay

00:21:40

um

00:21:41

then we want to go back to our partial

00:21:44

view here

00:21:46

and instead of this home page and then

00:21:48

blah blah blah we're going to copy these

00:21:51

we're going to put this code in here

00:21:56

the model that we're passing is going to

00:21:58

be the page so that would be I publish

00:22:01

content

00:22:06

like that

00:22:08

this will do control Dot and get the

00:22:11

namespace for it

00:22:14

um

00:22:15

we don't need them back over thingy

00:22:18

anymore we can just change that for

00:22:19

Content because that's going to be

00:22:21

what's passed in

00:22:22

home page we can just make sure that

00:22:24

we've got the published models defined

00:22:27

and then now we have some navigation

00:22:29

items

00:22:31

and that is saying it could be null

00:22:34

so if it's not what we should really do

00:22:37

is like this and then we'll do

00:22:38

innumerable or innumerable

00:22:41

dot empty

00:22:43

and then we'll just do I publish content

00:22:49

there we go

00:22:52

oh no it should be navigation items

00:22:56

yeah there we are

00:22:59

and then return into the view navigation

00:23:02

items

00:23:04

so then the last thing what we want to

00:23:06

do is on the master

00:23:08

in here instead of model dot level we

00:23:11

just pass in model so that whatever page

00:23:13

we're on

00:23:16

foreign

00:23:19

content and then from there we'll be

00:23:22

able to get the home page we'll be able

00:23:24

to get the navigation items and then

00:23:27

return it back to the view and then in

00:23:30

here we'll take this

00:23:32

we will

00:23:34

cut all of that out so we'll copy it

00:23:37

whatever

00:23:38

we don't we really don't need this I'm

00:23:40

going to just delete all the contents of

00:23:42

that in the navigation file

00:23:45

just for effect and then save in here

00:23:48

so now

00:23:51

it's complaining because we don't have a

00:23:53

home page URL fair enough I didn't think

00:23:56

that one through did I

00:23:59

um but here's the navigation item so

00:24:02

this is what model is

00:24:07

model

00:24:13

if model is not normal and that it's got

00:24:15

some then for each item in model because

00:24:19

that's an innumerable of navigation item

00:24:22

itself

00:24:23

there we go

00:24:28

now it's complaining here because of the

00:24:31

home page so we could just cheat and do

00:24:33

like that

00:24:35

which I'm inclined to do or instead of

00:24:38

having a model which is just this

00:24:40

innumerable like this we could create

00:24:43

another model

00:24:44

so let's just do that

00:24:47

so in our

00:24:49

project we want to create a folder

00:24:52

called models

00:24:54

foreign

00:24:56

now we could do one called view models

00:24:59

or whatever but it's fine so we'll do a

00:25:01

new file and we're just going to call

00:25:03

this a um navigation

00:25:08

view model

00:25:11

oops

00:25:14

dot CS

00:25:15

and in that we're going to we're going

00:25:17

to have a namespace

00:25:19

whoops namespace clean Dot site dot

00:25:24

models

00:25:26

and end that namespace then we want a

00:25:28

public

00:25:29

class

00:25:31

and this one's called navigation view

00:25:33

model

00:25:36

Dot and not DOT CS what am I doing

00:25:40

so is complaining for some reason oh

00:25:42

it's happy again now so we want on this

00:25:45

we want a

00:25:47

home URL public string home URL

00:25:52

uh getting set

00:25:55

and then we want public I innumerable or

00:25:59

a numberable

00:26:00

of I published oh no over navigation

00:26:04

item

00:26:08

and just call this navigation items get

00:26:11

set

00:26:20

yeah Visual Studio formats things a lot

00:26:22

easier

00:26:24

but I'm just doing it anyway give you a

00:26:26

chance to catch up so control dot on

00:26:28

there

00:26:30

so now we've got home URL and we've got

00:26:32

the navigation items and they're on our

00:26:34

navigation view model

00:26:36

so

00:26:37

whoops

00:26:39

what we can do is we can go into our

00:26:41

view component

00:26:42

and at this point here

00:26:45

we can do a VAR

00:26:48

model equals new

00:26:51

oh

00:26:54

and then

00:26:55

we can do an initializer like this and

00:26:58

we can tell it what we wanted to do now

00:27:01

it doesn't know what navigation view

00:27:02

model is so we have to control dot on it

00:27:05

to get that if you're not getting all

00:27:07

these intellisense and things just make

00:27:08

sure you've got the C sharp extension

00:27:10

installed

00:27:12

so it's that one C sharp by Microsoft

00:27:17

um so there's two properties here so

00:27:19

we've got the home URL equals homepage

00:27:23

dot URL

00:27:26

and then it's comma there and then we'll

00:27:28

do navigation items

00:27:31

equals navigation items

00:27:35

there we are

00:27:37

and then in here instead of passing

00:27:39

navigation items through we can just do

00:27:42

model

00:27:43

so now what we can do is

00:27:48

copy that

00:27:49

oh I keep doing Ctrl shift s

00:27:53

then we can go to our partial view again

00:27:56

that is confusing I can see why people

00:27:58

do like

00:27:59

name it something but instead of

00:28:02

innumerable of navigation item we can

00:28:05

just say model is navigation view model

00:28:09

we just need to make sure that we've got

00:28:11

the using

00:28:16

using clean Dot site top models

00:28:20

then that will be happy

00:28:22

and then where we had this href there we

00:28:24

can just do at model dot home URL

00:28:28

and then where we've got this modeled at

00:28:30

any we can just put in in the modern

00:28:32

navigation items

00:28:35

model.navigation items

00:28:38

and then model dot navigation items

00:28:43

oh keep doing it

00:28:45

right so that should now render the

00:28:48

navigation so it should work as it was

00:28:50

doing before

00:28:52

but we've moved it out to a view

00:28:54

component

00:28:56

um

00:28:58

let's give it a whirl

00:29:00

I might yeah do you want to restart yes

00:29:03

of course I do

00:29:10

rebuild all that and then we'll see it

00:29:12

up here starting to rebuild and reload

00:29:16

the page

00:29:24

any minute now so the nav should be back

00:29:26

it should be all worky worky back in

00:29:30

business

00:29:32

yeah so I think I don't think we need to

00:29:35

do the footer you get the idea we could

00:29:37

probably do that on the next video

00:29:40

I just don't want to make the videos too

00:29:42

long so what you might find is that I do

00:29:44

that separately and just push the code

00:29:46

up for that one

00:29:47

so if you want the code you can get that

00:29:49

from the repository here at the end of

00:29:52

every lesson I update it and I put the

00:29:55

tags in and with with the tag you can

00:29:58

click on the tag and you can get the

00:30:00

source code

00:30:01

for that code you can also go back to

00:30:06

the code here and you can choose

00:30:09

tags and you can get the code at the

00:30:12

point of these and you can check out

00:30:15

so if you thought the repository and you

00:30:17

want to get back to those tags you can

00:30:18

do there's all different ways

00:30:20

so yeah let's just go back to main so

00:30:23

yeah that it that will link will be in

00:30:25

the video description as well so you can

00:30:27

get to the code there

00:30:28

if you do like the video

00:30:31

um please click on like And subscribe to

00:30:33

my channel and if you did want to say

00:30:35

thanks bye buy buy me a coffee you can

00:30:37

do here by going to co-chair.com

00:30:42

it is appreciated when people do but

00:30:44

it's not expected at all it's only if

00:30:47

you if you can afford it and you want to

00:30:49

but all of my content's free anyway so

00:30:52

don't worry about that

00:30:54

uh but yeah it's just a channel for you

00:30:56

if you want to and yeah I'm sorry for a

00:30:59

bit of a gap a bit of a break but I've

00:31:01

been doing lots of things

Description:

In this video we start to use View Components. We learn about what they are and how we can use them in our Umbraco project. Links Code: https://github.com/prjseal/Umbraco-10-Tutorial/ View Components Documentation https://learn.microsoft.com/en-us/aspnet/core/mvc/views/view-components?view=aspnetcore-6.0 Coffee: https://www.paypal.com/donate/

Preparing download options

Popular

HD video

Only sound

All

* — If the video is playing in a new tab, go to it, then right-click on the video and select "Save video as..."

** — Link intended for online playback in specialized players

Questions about downloading video

How can I download "How to build a website with Umbraco 10 - Part 15 - View Components" video?

http://unidownloader.com/ website is the best way to download a video or a separate audio track if you want to do without installing programs and extensions.
The UDL Helper extension is a convenient button that is seamlessly integrated into YouTube, Instagram and OK.ru sites for fast content download.
UDL Client program (for Windows) is the most powerful solution that supports more than 900 websites, social networks and video hosting sites, as well as any video quality that is available in the source.
UDL Lite is a really convenient way to access a website from your mobile device. With its help, you can easily download videos directly to your smartphone.

Which format of "How to build a website with Umbraco 10 - Part 15 - View Components" video should I choose?

The best quality formats are FullHD (1080p), 2K (1440p), 4K (2160p) and 8K (4320p). The higher the resolution of your screen, the higher the video quality should be. However, there are other factors to consider: download speed, amount of free space, and device performance during playback.

Why does my computer freeze when loading a "How to build a website with Umbraco 10 - Part 15 - View Components" video?

The browser/computer should not freeze completely! If this happens, please report it with a link to the video. Sometimes videos cannot be downloaded directly in a suitable format, so we have added the ability to convert the file to the desired format. In some cases, this process may actively use computer resources.

How can I download "How to build a website with Umbraco 10 - Part 15 - View Components" video to my phone?

You can download a video to your smartphone using the website or the PWA application UDL Lite. It is also possible to send a download link via QR code using the UDL Helper extension.

How can I download an audio track (music) to MP3 "How to build a website with Umbraco 10 - Part 15 - View Components"?

The most convenient way is to use the UDL Client program, which supports converting video to MP3 format. In some cases, MP3 can also be downloaded through the UDL Helper extension.

How can I save a frame from a video "How to build a website with Umbraco 10 - Part 15 - View Components"?

This feature is available in the UDL Helper extension. Make sure that "Show the video snapshot button" is checked in the settings. A camera icon should appear in the lower right corner of the player to the left of the "Settings" icon. When you click on it, the current frame from the video will be saved to your computer in JPEG format.

What's the price of all this stuff?

It costs nothing. Our services are absolutely free for all users. There are no PRO subscriptions, no restrictions on the number or maximum length of downloaded videos.