Up next in 10
Join us in this episode of Ask Me Anything Series on August 13 at 10:00 am EDT with Tomáš Herceg - Founder and CEO of RIGANTI as we unleash the possibilities of DotVVM.
ABSTRACT
DotVVM is an open-source framework for ASP.NET and ASP.NET Core which allows using the Model-View-ViewModel pattern for building web pages. One of the advantages of the approach is that you don’t need to build REST API – DotVVM will take care of making server data available on the client-side. DotVVM can also be used to modernize old ASP.NET Web Forms apps and porting them to .NET Core eventually. In this live show you'll how this can be achieved.
AGENDA
- Introduction to DotVVM
- How DotVVM works
- How can DotVVM run in Web Forms app and help with its journey to .NET Core
C# Corner - Global Community of Software and Data Developers
https://www.c-sharpcorner.com
#csharpcorner #dotnet #dotnetcore
Show More Show Less View Video Transcript
0:02
[Music]
2:06
[Music]
2:06
[Music] so
2:08
so
2:08
so [Music]
2:34
[Music]
2:34
[Music] i
2:36
i
2:36
i [Music]
2:40
[Music]
2:40
[Music] hi everyone welcome back to c sharp
2:42
hi everyone welcome back to c sharp
2:42
hi everyone welcome back to c sharp corner live show
2:43
corner live show
2:43
corner live show as always i'm your host stephen simon
2:46
as always i'm your host stephen simon
2:46
as always i'm your host stephen simon and we are back with a new episode of
2:48
and we are back with a new episode of
2:48
and we are back with a new episode of ask many things series if you are
2:50
ask many things series if you are
2:50
ask many things series if you are joining us for the very first time we do
2:52
joining us for the very first time we do
2:52
joining us for the very first time we do ask many this series every thursday at
2:54
ask many this series every thursday at
2:54
ask many this series every thursday at 10 a.m eastern time
2:56
10 a.m eastern time
2:56
10 a.m eastern time and 7 30 p.m indian time and if you're
2:59
and 7 30 p.m indian time and if you're
2:59
and 7 30 p.m indian time and if you're joining us from europe we do at 4pm over
3:01
joining us from europe we do at 4pm over
3:02
joining us from europe we do at 4pm over there
3:02
there
3:02
there so uh in today's show we're gonna talk
3:05
so uh in today's show we're gonna talk
3:05
so uh in today's show we're gonna talk about
3:05
about
3:05
about dot bbm and the guest for today's show
3:08
dot bbm and the guest for today's show
3:08
dot bbm and the guest for today's show is a
3:09
is a
3:09
is a thomas who is a founder and ceo for
3:11
thomas who is a founder and ceo for
3:11
thomas who is a founder and ceo for briganti a company based
3:13
briganti a company based
3:13
briganti a company based out of czech republic uh and is focused
3:16
out of czech republic uh and is focused
3:16
out of czech republic uh and is focused on custom software development
3:18
on custom software development
3:18
on custom software development consulting and solution architect
3:20
consulting and solution architect
3:20
consulting and solution architect services thomas is uh
3:22
services thomas is uh
3:22
services thomas is uh the creator of dot pvm and open source
3:24
the creator of dot pvm and open source
3:24
the creator of dot pvm and open source framework that simplifies
3:26
framework that simplifies
3:26
framework that simplifies creating a line of business web
3:28
creating a line of business web
3:28
creating a line of business web application
3:29
application
3:29
application and makes it easier for any tartan
3:31
and makes it easier for any tartan
3:31
and makes it easier for any tartan developer thomas was awarded microsoft
3:33
developer thomas was awarded microsoft
3:34
developer thomas was awarded microsoft most valuable professional award and a
3:36
most valuable professional award and a
3:36
most valuable professional award and a mic submission director
3:37
mic submission director
3:37
mic submission director for his influence in the technical
3:39
for his influence in the technical
3:39
for his influence in the technical communities public speaking
3:41
communities public speaking
3:41
communities public speaking publishing technical articles he has
3:43
publishing technical articles he has
3:43
publishing technical articles he has been presenting across the globe and
3:46
been presenting across the globe and
3:46
been presenting across the globe and czech republic about web development dot
3:48
czech republic about web development dot
3:48
czech republic about web development dot net
3:49
net
3:49
net software architecture cloud and related
3:52
software architecture cloud and related
3:52
software architecture cloud and related topic
3:52
topic
3:52
topic we're more than honored and humble to
3:54
we're more than honored and humble to
3:54
we're more than honored and humble to have thomas
3:56
have thomas
3:56
have thomas uh in today's show so let's welcome our
3:59
uh in today's show so let's welcome our
3:59
uh in today's show so let's welcome our guest thomas
4:17
[Music]
4:59
hi thomas welcome to the live show hey
5:02
hi thomas welcome to the live show hey
5:02
hi thomas welcome to the live show hey greetings from prague
5:05
greetings from prague
5:05
greetings from prague so how have you been doing thomas looks
5:07
so how have you been doing thomas looks
5:07
so how have you been doing thomas looks like you're joining us from czech
5:08
like you're joining us from czech
5:08
like you're joining us from czech republic right
5:10
republic right
5:10
republic right yeah how's life over there how school
5:13
yeah how's life over there how school
5:13
yeah how's life over there how school has affected there and how have you been
5:15
has affected there and how have you been
5:15
has affected there and how have you been doing and all this
5:16
doing and all this
5:16
doing and all this during lockdown yeah well so we have
5:19
during lockdown yeah well so we have
5:19
during lockdown yeah well so we have been
5:20
been
5:20
been heard back of it uh but i don't think it
5:22
heard back of it uh but i don't think it
5:22
heard back of it uh but i don't think it was so severe as
5:25
was so severe as
5:25
was so severe as in other countries in europe i think
5:27
in other countries in europe i think
5:27
in other countries in europe i think that the worst situation was in italy
5:29
that the worst situation was in italy
5:29
that the worst situation was in italy in the czech republic we get the wife a
5:32
in the czech republic we get the wife a
5:32
in the czech republic we get the wife a little bit later
5:33
little bit later
5:33
little bit later and a few weeks ago the life has
5:37
and a few weeks ago the life has
5:37
and a few weeks ago the life has returned back to normal i would say
5:39
returned back to normal i would say
5:39
returned back to normal i would say because
5:40
because
5:40
because all the shops and restaurants and
5:42
all the shops and restaurants and
5:42
all the shops and restaurants and services are now open
5:45
services are now open
5:45
services are now open and also some community conferences and
5:48
and also some community conferences and
5:48
and also some community conferences and meetups
5:49
meetups
5:49
meetups are starting going back from the online
5:52
are starting going back from the online
5:52
are starting going back from the online only
5:53
only
5:53
only version to alma also to the meeting
5:56
version to alma also to the meeting
5:56
version to alma also to the meeting people and networking
5:57
people and networking
5:57
people and networking there are of course some safety
5:59
there are of course some safety
5:59
there are of course some safety regulations but
6:01
regulations but
6:01
regulations but for small meetups they are running
6:03
for small meetups they are running
6:03
for small meetups they are running normally as
6:05
normally as
6:05
normally as before so let's hope that this
6:08
before so let's hope that this
6:08
before so let's hope that this will uh keep in this way and there's no
6:13
will uh keep in this way and there's no
6:13
will uh keep in this way and there's no second wave and i hope that the
6:15
second wave and i hope that the
6:15
second wave and i hope that the situation will get better
6:16
situation will get better
6:16
situation will get better in other countries as well that's really
6:19
in other countries as well that's really
6:19
in other countries as well that's really nice here thomas i think uh
6:20
nice here thomas i think uh
6:20
nice here thomas i think uh what i really love from what you said is
6:22
what i really love from what you said is
6:22
what i really love from what you said is like you guys are going back to the
6:24
like you guys are going back to the
6:24
like you guys are going back to the offline events
6:25
offline events
6:25
offline events in-person events right and as the buyers
6:27
in-person events right and as the buyers
6:27
in-person events right and as the buyers said you are regional director for
6:29
said you are regional director for
6:29
said you are regional director for microsoft fight you have been a mike's
6:31
microsoft fight you have been a mike's
6:31
microsoft fight you have been a mike's web
6:31
web
6:31
web for more than almost like 12 times
6:34
for more than almost like 12 times
6:34
for more than almost like 12 times community
6:35
community
6:35
community events and community contribution is
6:36
events and community contribution is
6:36
events and community contribution is something that is very very
6:38
something that is very very
6:38
something that is very very close to you and you have been doing it
6:39
close to you and you have been doing it
6:39
close to you and you have been doing it for more than a decade now
6:41
for more than a decade now
6:41
for more than a decade now thomas why don't you go ahead and talk a
6:42
thomas why don't you go ahead and talk a
6:42
thomas why don't you go ahead and talk a little bit about how was he 12 years
6:44
little bit about how was he 12 years
6:44
little bit about how was he 12 years journey of mvp
6:46
journey of mvp
6:46
journey of mvp and then becoming a regional director
6:48
and then becoming a regional director
6:48
and then becoming a regional director yeah so
6:49
yeah so
6:49
yeah so it was uh i'm doing this for a very long
6:52
it was uh i'm doing this for a very long
6:52
it was uh i'm doing this for a very long time i started
6:53
time i started
6:53
time i started when i was at university i was writing
6:56
when i was at university i was writing
6:56
when i was at university i was writing some
6:56
some
6:56
some articles now i'm a little bit ashamed of
7:00
articles now i'm a little bit ashamed of
7:00
articles now i'm a little bit ashamed of it because most of them were about
7:01
it because most of them were about
7:01
it because most of them were about visual basic development
7:03
visual basic development
7:03
visual basic development and uh so i get the fur i got the first
7:06
and uh so i get the fur i got the first
7:06
and uh so i get the fur i got the first mvp award for the visual basic category
7:09
mvp award for the visual basic category
7:09
mvp award for the visual basic category which is
7:10
which is
7:10
which is a little bit funny today then i switched
7:13
a little bit funny today then i switched
7:13
a little bit funny today then i switched to
7:13
to
7:13
to to see sharp but still there are some
7:16
to see sharp but still there are some
7:16
to see sharp but still there are some applications some really old
7:17
applications some really old
7:17
applications some really old applications i've
7:18
applications i've
7:18
applications i've created and they're in vb so once
7:22
created and they're in vb so once
7:22
created and they're in vb so once or twice a year i still do something
7:24
or twice a year i still do something
7:24
or twice a year i still do something with the vb
7:26
with the vb
7:26
with the vb so i don't hate this language i actually
7:29
so i don't hate this language i actually
7:29
so i don't hate this language i actually quite like it but of course c-sharp is
7:30
quite like it but of course c-sharp is
7:30
quite like it but of course c-sharp is much more practical so
7:32
much more practical so
7:32
much more practical so uh for last 10 years i'm doing mostly
7:35
uh for last 10 years i'm doing mostly
7:35
uh for last 10 years i'm doing mostly the c-sharp stuff
7:36
the c-sharp stuff
7:36
the c-sharp stuff and also a lot of azure and i'm speaking
7:39
and also a lot of azure and i'm speaking
7:40
and also a lot of azure and i'm speaking at
7:40
at
7:40
at various conferences mostly in the czech
7:42
various conferences mostly in the czech
7:42
various conferences mostly in the czech republic but sometimes
7:43
republic but sometimes
7:44
republic but sometimes also in other countries and i'm also
7:46
also in other countries and i'm also
7:46
also in other countries and i'm also organizing uh conferences i've started
7:49
organizing uh conferences i've started
7:49
organizing uh conferences i've started the update conference
7:51
the update conference
7:51
the update conference which happens every year in prague and
7:53
which happens every year in prague and
7:53
which happens every year in prague and uh
7:54
uh
7:54
uh last year we had 600 attendees and
7:57
last year we had 600 attendees and
7:57
last year we had 600 attendees and for the sessions for from speakers from
8:00
for the sessions for from speakers from
8:00
for the sessions for from speakers from all over the world
8:01
all over the world
8:02
all over the world and this year we will also have the
8:04
and this year we will also have the
8:04
and this year we will also have the update conference
8:05
update conference
8:05
update conference but it will be uh online so
8:10
but it will be uh online so
8:10
but it will be uh online so so i mean i mean anyway i think you have
8:11
so i mean i mean anyway i think you have
8:12
so i mean i mean anyway i think you have been doing a lot for this community so i
8:13
been doing a lot for this community so i
8:13
been doing a lot for this community so i just said 600 uh
8:14
just said 600 uh
8:14
just said 600 uh developers are coming for this fun event
8:17
developers are coming for this fun event
8:17
developers are coming for this fun event that that's a pretty big number
8:18
that that's a pretty big number
8:18
that that's a pretty big number right and and especially if it was in uh
8:21
right and and especially if it was in uh
8:21
right and and especially if it was in uh asia it would have been okay but for
8:22
asia it would have been okay but for
8:22
asia it would have been okay but for europe is like 600 it's a good number
8:24
europe is like 600 it's a good number
8:24
europe is like 600 it's a good number right
8:25
right
8:25
right we are quite over populated here so
8:29
okay okay uh moving moving forward uh
8:31
okay okay uh moving moving forward uh
8:32
okay okay uh moving moving forward uh thomas
8:32
thomas
8:32
thomas you say it says that you are the founder
8:35
you say it says that you are the founder
8:35
you say it says that you are the founder of dot pbm
8:36
of dot pbm
8:36
of dot pbm before you go ahead and start with the
8:38
before you go ahead and start with the
8:38
before you go ahead and start with the presentation all the viewers who have
8:39
presentation all the viewers who have
8:39
presentation all the viewers who have joined us today
8:40
joined us today
8:40
joined us today can you give a quick uh uh intro about
8:43
can you give a quick uh uh intro about
8:43
can you give a quick uh uh intro about what we are
8:43
what we are
8:43
what we are going to learn today and what you are
8:45
going to learn today and what you are
8:45
going to learn today and what you are actually going to cover in your in your
8:47
actually going to cover in your in your
8:47
actually going to cover in your in your session
8:47
session
8:47
session in next 35 minutes sure uh so
8:51
in next 35 minutes sure uh so
8:51
in next 35 minutes sure uh so uh dot vm is basically a web
8:54
uh dot vm is basically a web
8:54
uh dot vm is basically a web framework for asp.net and
8:57
framework for asp.net and
8:57
framework for asp.net and it supports both old asp.net and new
9:00
it supports both old asp.net and new
9:00
it supports both old asp.net and new asp.net
9:01
asp.net
9:01
asp.net cars so uh it anywhere where you have
9:04
cars so uh it anywhere where you have
9:04
cars so uh it anywhere where you have asp.net you can use the tvm and
9:07
asp.net you can use the tvm and
9:07
asp.net you can use the tvm and basically
9:08
basically
9:08
basically it's a model view view model frameworks
9:11
it's a model view view model frameworks
9:11
it's a model view view model frameworks so if you like the mvvm approach from
9:13
so if you like the mvvm approach from
9:13
so if you like the mvvm approach from for example wpf
9:15
for example wpf
9:15
for example wpf or from xamarin or something like that
9:17
or from xamarin or something like that
9:17
or from xamarin or something like that you will find
9:18
you will find
9:18
you will find that vvm very easy to start very easy to
9:21
that vvm very easy to start very easy to
9:21
that vvm very easy to start very easy to learn and adopt
9:22
learn and adopt
9:22
learn and adopt and also if you are building some
9:25
and also if you are building some
9:25
and also if you are building some applications
9:26
applications
9:26
applications where mvvm can be practical and
9:29
where mvvm can be practical and
9:29
where mvvm can be practical and typically this is the
9:30
typically this is the
9:30
typically this is the web applications with some admin
9:33
web applications with some admin
9:33
web applications with some admin dashboards or
9:35
dashboards or
9:35
dashboards or user interface for editing very complex
9:38
user interface for editing very complex
9:38
user interface for editing very complex very complicated forms
9:40
very complicated forms
9:40
very complicated forms with hundreds of fields then the mvvm
9:43
with hundreds of fields then the mvvm
9:43
with hundreds of fields then the mvvm pattern
9:44
pattern
9:44
pattern works really well in these scenarios so
9:47
works really well in these scenarios so
9:47
works really well in these scenarios so that vvm is a framework that leverages
9:50
that vvm is a framework that leverages
9:50
that vvm is a framework that leverages the mvvm
9:51
the mvvm
9:51
the mvvm approach for web developers in
9:54
approach for web developers in
9:54
approach for web developers in asp.net also it's quite interesting for
9:58
asp.net also it's quite interesting for
9:58
asp.net also it's quite interesting for uh modernizing old apps because it can
10:01
uh modernizing old apps because it can
10:01
uh modernizing old apps because it can run side by side with other web
10:04
run side by side with other web
10:04
run side by side with other web frameworks
10:05
frameworks
10:05
frameworks in asp.net so if you have old web forms
10:08
in asp.net so if you have old web forms
10:08
in asp.net so if you have old web forms applications
10:09
applications
10:09
applications i will show you how you can install vvm
10:12
i will show you how you can install vvm
10:12
i will show you how you can install vvm and write new pages in the tvm but it
10:15
and write new pages in the tvm but it
10:15
and write new pages in the tvm but it will still run
10:16
will still run
10:16
will still run and integrate seamlessly with the old
10:18
and integrate seamlessly with the old
10:18
and integrate seamlessly with the old application
10:19
application
10:19
application and if you decide to
10:22
and if you decide to
10:22
and if you decide to rewrite all these web forms pages into
10:25
rewrite all these web forms pages into
10:25
rewrite all these web forms pages into the tvm then you can
10:26
the tvm then you can
10:26
the tvm then you can even move to net car looks like you have
10:30
even move to net car looks like you have
10:30
even move to net car looks like you have taken the
10:31
taken the
10:31
taken the the old mvvm approach to steroids right
10:34
the old mvvm approach to steroids right
10:34
the old mvvm approach to steroids right so it is going to have a better better
10:36
so it is going to have a better better
10:36
so it is going to have a better better application and as
10:38
application and as
10:38
application and as you said very rightly one person showed
10:39
you said very rightly one person showed
10:39
you said very rightly one person showed that most of the applications were built
10:41
that most of the applications were built
10:41
that most of the applications were built on web forms right
10:42
on web forms right
10:42
on web forms right even i believe c-sharp conventional
10:43
even i believe c-sharp conventional
10:44
even i believe c-sharp conventional platform is built on websome so it will
10:45
platform is built on websome so it will
10:45
platform is built on websome so it will be very interesting to see on how on
10:47
be very interesting to see on how on
10:48
be very interesting to see on how on youtube what are the
10:49
youtube what are the
10:49
youtube what are the new capabilities distort pvm provides
10:51
new capabilities distort pvm provides
10:51
new capabilities distort pvm provides and the different uh
10:53
and the different uh
10:53
and the different uh options that will helps the existing web
10:55
options that will helps the existing web
10:55
options that will helps the existing web developers who come from a dot and
10:56
developers who come from a dot and
10:56
developers who come from a dot and background
10:57
background
10:57
background to build more efficient and in in a
11:00
to build more efficient and in in a
11:00
to build more efficient and in in a much better approach so uh thomas i
11:02
much better approach so uh thomas i
11:02
much better approach so uh thomas i think i'll bring your screen
11:04
think i'll bring your screen
11:04
think i'll bring your screen shall we start the session yeah sure
11:07
shall we start the session yeah sure
11:07
shall we start the session yeah sure perfect so i'll bring your screen into
11:09
perfect so i'll bring your screen into
11:09
perfect so i'll bring your screen into the stream
11:10
the stream
11:10
the stream there we have perfect and i think next
11:12
there we have perfect and i think next
11:12
there we have perfect and i think next 35 minutes is all yours
11:15
35 minutes is all yours
11:15
35 minutes is all yours thanks so as i said the vvm can be used
11:18
thanks so as i said the vvm can be used
11:18
thanks so as i said the vvm can be used for
11:18
for
11:18
for building new web apps as well as
11:21
building new web apps as well as
11:21
building new web apps as well as modernizing old apps
11:23
modernizing old apps
11:23
modernizing old apps it doesn't need to be web forms but the
11:25
it doesn't need to be web forms but the
11:25
it doesn't need to be web forms but the web forms will be the most
11:27
web forms will be the most
11:27
web forms will be the most common scenario so i will try to explain
11:29
common scenario so i will try to explain
11:29
common scenario so i will try to explain both both options
11:31
both both options
11:31
both both options and of course if you have any questions
11:33
and of course if you have any questions
11:33
and of course if you have any questions there is the
11:34
there is the
11:34
there is the option to uh post them in the comments
11:37
option to uh post them in the comments
11:37
option to uh post them in the comments and i will be happy to
11:39
and i will be happy to
11:39
and i will be happy to answer all those questions so
11:43
answer all those questions so
11:43
answer all those questions so basically that's uh that's what the tvm
11:46
basically that's uh that's what the tvm
11:46
basically that's uh that's what the tvm can do
11:46
can do
11:46
can do and it's open source it's developed on
11:50
and it's open source it's developed on
11:50
and it's open source it's developed on github
11:51
github
11:51
github i have started the project about five
11:53
i have started the project about five
11:53
i have started the project about five years ago and
11:54
years ago and
11:54
years ago and right now there is a team of about six
11:57
right now there is a team of about six
11:57
right now there is a team of about six or seven people who are
11:58
or seven people who are
11:58
or seven people who are regularly contributing to to the
12:00
regularly contributing to to the
12:00
regularly contributing to to the repository so it's not
12:02
repository so it's not
12:02
repository so it's not just a one-man show it's more people
12:04
just a one-man show it's more people
12:04
just a one-man show it's more people involved in the project
12:06
involved in the project
12:06
involved in the project and i'm mostly speaking about those
12:08
and i'm mostly speaking about those
12:08
and i'm mostly speaking about those video and then actually doing the
12:10
video and then actually doing the
12:10
video and then actually doing the development right now
12:11
development right now
12:12
development right now uh the vm is a member of the dotnet
12:14
uh the vm is a member of the dotnet
12:14
uh the vm is a member of the dotnet foundation it's an organization which
12:16
foundation it's an organization which
12:16
foundation it's an organization which aggregates
12:17
aggregates
12:17
aggregates a lot of open source dot net related
12:19
a lot of open source dot net related
12:19
a lot of open source dot net related projects which contribute to the dot net
12:21
projects which contribute to the dot net
12:21
projects which contribute to the dot net ecosystem
12:22
ecosystem
12:22
ecosystem so we are proud to be members of of this
12:25
so we are proud to be members of of this
12:25
so we are proud to be members of of this foundation and uh as i said
12:28
foundation and uh as i said
12:28
foundation and uh as i said the vm supports both old asp.net
12:31
the vm supports both old asp.net
12:31
the vm supports both old asp.net with uh dotnet framework uh the low
12:34
with uh dotnet framework uh the low
12:34
with uh dotnet framework uh the low supported version is four
12:35
supported version is four
12:35
supported version is four five one uh and also it supports
12:39
five one uh and also it supports
12:39
five one uh and also it supports even the newer newest asp.net core i
12:42
even the newer newest asp.net core i
12:42
even the newer newest asp.net core i have uh
12:43
have uh
12:43
have uh tried it with uh.net 5 preview and it
12:46
tried it with uh.net 5 preview and it
12:46
tried it with uh.net 5 preview and it worked so
12:47
worked so
12:47
worked so all the versions from the very old to
12:49
all the versions from the very old to
12:50
all the versions from the very old to the very new
12:50
the very new
12:50
the very new are supported and of course because we
12:54
are supported and of course because we
12:54
are supported and of course because we got my developers are very used to have
12:56
got my developers are very used to have
12:56
got my developers are very used to have great integration and great experience
12:58
great integration and great experience
12:58
great integration and great experience with visual studio
13:00
with visual studio
13:00
with visual studio so that's why we also developed the
13:02
so that's why we also developed the
13:02
so that's why we also developed the extension for visual studio so you have
13:05
extension for visual studio so you have
13:05
extension for visual studio so you have uh the support the intel science the
13:07
uh the support the intel science the
13:07
uh the support the intel science the project templates you have everything
13:09
project templates you have everything
13:09
project templates you have everything you need
13:10
you need
13:10
you need for building uh web apps in uh dot vvm
13:14
for building uh web apps in uh dot vvm
13:14
for building uh web apps in uh dot vvm and uh basically how it works as i said
13:17
and uh basically how it works as i said
13:17
and uh basically how it works as i said it's a
13:17
it's a
13:17
it's a mvvm so model view view mode approach
13:20
mvvm so model view view mode approach
13:20
mvvm so model view view mode approach which
13:21
which
13:21
which is great because uh a lot of developers
13:25
is great because uh a lot of developers
13:25
is great because uh a lot of developers already know this design pattern so it's
13:27
already know this design pattern so it's
13:27
already know this design pattern so it's very easy to adopt
13:29
very easy to adopt
13:29
very easy to adopt it's i think it's uh the the knowledge
13:32
it's i think it's uh the the knowledge
13:32
it's i think it's uh the the knowledge of this pattern is uh
13:34
of this pattern is uh
13:34
of this pattern is uh right now still much larger than the
13:36
right now still much larger than the
13:36
right now still much larger than the model view updater
13:38
model view updater
13:38
model view updater approach which is being favored in the
13:40
approach which is being favored in the
13:40
approach which is being favored in the last
13:41
last
13:41
last months but uh this is mvv yeah
13:44
months but uh this is mvv yeah
13:44
months but uh this is mvv yeah and basically you just need to write c
13:47
and basically you just need to write c
13:47
and basically you just need to write c sharp
13:48
sharp
13:48
sharp view models and html views you don't
13:51
view models and html views you don't
13:51
view models and html views you don't need to write
13:52
need to write
13:52
need to write tons of javascript and you
13:55
tons of javascript and you
13:55
tons of javascript and you don't even need to know javascript
13:57
don't even need to know javascript
13:57
don't even need to know javascript because vvm
13:59
because vvm
13:59
because vvm makes the some kind of translation from
14:01
makes the some kind of translation from
14:02
makes the some kind of translation from the c-sharp view model to the javascript
14:04
the c-sharp view model to the javascript
14:04
the c-sharp view model to the javascript view model
14:05
view model
14:05
view model which happens uh in um
14:08
which happens uh in um
14:08
which happens uh in um on the client side so basically you just
14:10
on the client side so basically you just
14:10
on the client side so basically you just need to know html
14:12
need to know html
14:12
need to know html and c-sharp and uh
14:16
and c-sharp and uh
14:16
and c-sharp and uh there are also uh quite a lot of
14:18
there are also uh quite a lot of
14:18
there are also uh quite a lot of components that are
14:20
components that are
14:20
components that are ready made for uh for the and the
14:22
ready made for uh for the and the
14:22
ready made for uh for the and the built-in in the framework
14:25
built-in in the framework
14:25
built-in in the framework so if you have been using for example
14:27
so if you have been using for example
14:27
so if you have been using for example grid view and web forms or the grid
14:29
grid view and web forms or the grid
14:29
grid view and web forms or the grid in wpf you will see that dot vm also has
14:33
in wpf you will see that dot vm also has
14:33
in wpf you will see that dot vm also has these components
14:35
these components
14:35
these components uh also included in the framework so you
14:38
uh also included in the framework so you
14:38
uh also included in the framework so you can
14:38
can
14:38
can just just use them it's it's quite easy
14:41
just just use them it's it's quite easy
14:41
just just use them it's it's quite easy to make
14:41
to make
14:41
to make a grid page uh displaying data with
14:45
a grid page uh displaying data with
14:45
a grid page uh displaying data with paging sorting and all those are those
14:47
paging sorting and all those are those
14:48
paging sorting and all those are those features
14:49
features
14:49
features um the pvm tries to
14:53
um the pvm tries to
14:53
um the pvm tries to integrate as much with the asp.net
14:56
integrate as much with the asp.net
14:56
integrate as much with the asp.net ecosystem as possible
14:58
ecosystem as possible
14:58
ecosystem as possible so that's why you don't need to
15:01
so that's why you don't need to
15:01
so that's why you don't need to ask if dot vvm supports for example
15:04
ask if dot vvm supports for example
15:04
ask if dot vvm supports for example authentication
15:05
authentication
15:05
authentication and authorization and things like that
15:07
and authorization and things like that
15:07
and authorization and things like that because they are included in the asp.net
15:08
because they are included in the asp.net
15:08
because they are included in the asp.net platform
15:09
platform
15:09
platform and that vm is using everything the
15:11
and that vm is using everything the
15:11
and that vm is using everything the platform
15:13
platform
15:13
platform actually offers so if
15:16
actually offers so if
15:16
actually offers so if microsoft adds a new authentication
15:18
microsoft adds a new authentication
15:18
microsoft adds a new authentication feature uh
15:19
feature uh
15:20
feature uh in the asp.net car you will get it
15:22
in the asp.net car you will get it
15:22
in the asp.net car you will get it immediately in the
15:23
immediately in the
15:23
immediately in the vm because vvm just
15:26
vm because vvm just
15:26
vm because vvm just makes sure that the correct html is
15:29
makes sure that the correct html is
15:29
makes sure that the correct html is rendered but all those other things
15:31
rendered but all those other things
15:31
rendered but all those other things it just integrates with the built-in sp
15:34
it just integrates with the built-in sp
15:34
it just integrates with the built-in sp net
15:34
net
15:34
net things like i said for example the
15:37
things like i said for example the
15:37
things like i said for example the authentication
15:38
authentication
15:38
authentication so everything that you can do and for
15:41
so everything that you can do and for
15:41
so everything that you can do and for example
15:41
example
15:41
example mvc color you can also do in in.vm
15:45
mvc color you can also do in in.vm
15:45
mvc color you can also do in in.vm because the infrastructure is shared
15:48
because the infrastructure is shared
15:48
because the infrastructure is shared and also that vm can coexist with other
15:51
and also that vm can coexist with other
15:51
and also that vm can coexist with other frameworks so if you are using for
15:53
frameworks so if you are using for
15:53
frameworks so if you are using for example signalr
15:54
example signalr
15:54
example signalr or something like that you can combine
15:56
or something like that you can combine
15:56
or something like that you can combine these things in the same application
15:59
these things in the same application
15:59
these things in the same application so you have single sign on and all those
16:01
so you have single sign on and all those
16:01
so you have single sign on and all those although everything is just
16:03
although everything is just
16:03
although everything is just integrated and that's
16:06
integrated and that's
16:06
integrated and that's also how you can modernize old apps
16:08
also how you can modernize old apps
16:08
also how you can modernize old apps because for example
16:09
because for example
16:09
because for example we have a lot of customers in our
16:11
we have a lot of customers in our
16:11
we have a lot of customers in our company that are still using asp.net
16:13
company that are still using asp.net
16:14
company that are still using asp.net platforms and uh unfortunately these are
16:17
platforms and uh unfortunately these are
16:17
platforms and uh unfortunately these are not supported in dot net core
16:19
not supported in dot net core
16:19
not supported in dot net core yeah mvc is on.net core it's a little
16:21
yeah mvc is on.net core it's a little
16:21
yeah mvc is on.net core it's a little bit different than the old mvc but still
16:24
bit different than the old mvc but still
16:24
bit different than the old mvc but still the migration is pretty straightforward
16:27
the migration is pretty straightforward
16:27
the migration is pretty straightforward but
16:27
but
16:27
but for web forms there is basically no
16:29
for web forms there is basically no
16:29
for web forms there is basically no upgrade path you need to rewrite the
16:31
upgrade path you need to rewrite the
16:31
upgrade path you need to rewrite the application
16:32
application
16:32
application and the vm allows you to rewrite
16:35
and the vm allows you to rewrite
16:35
and the vm allows you to rewrite not the entire application but just a
16:38
not the entire application but just a
16:38
not the entire application but just a small part of it
16:39
small part of it
16:39
small part of it so uh because it can it can run in the
16:43
so uh because it can it can run in the
16:43
so uh because it can it can run in the web forms application
16:44
web forms application
16:44
web forms application and it's the same on on dotnet framework
16:48
and it's the same on on dotnet framework
16:48
and it's the same on on dotnet framework and dot net core so
16:49
and dot net core so
16:50
and dot net core so if you take your entire application in
16:52
if you take your entire application in
16:52
if you take your entire application in web forms
16:53
web forms
16:53
web forms and if you just replace the spx pages
16:57
and if you just replace the spx pages
16:57
and if you just replace the spx pages so other other things the business logic
16:59
so other other things the business logic
16:59
so other other things the business logic and everything
17:00
and everything
17:00
and everything data model it can stay as is but if you
17:03
data model it can stay as is but if you
17:03
data model it can stay as is but if you replace all the aspx pages with their
17:06
replace all the aspx pages with their
17:06
replace all the aspx pages with their vvm equivalents then
17:09
vvm equivalents then
17:09
vvm equivalents then you should be able to just go to docnet
17:12
you should be able to just go to docnet
17:12
you should be able to just go to docnet core because the syntax of dot vm is
17:14
core because the syntax of dot vm is
17:14
core because the syntax of dot vm is exactly the same in dotnet framework and
17:17
exactly the same in dotnet framework and
17:17
exactly the same in dotnet framework and in dotnet core
17:18
in dotnet core
17:18
in dotnet core so basically you won't need to rewrite
17:20
so basically you won't need to rewrite
17:20
so basically you won't need to rewrite your business logic and
17:22
your business logic and
17:22
your business logic and data access code you just need to
17:24
data access code you just need to
17:24
data access code you just need to rewrite
17:25
rewrite
17:25
rewrite these uh these aspx pages which by the
17:29
these uh these aspx pages which by the
17:29
these uh these aspx pages which by the way you would have to rewrite either way
17:32
way you would have to rewrite either way
17:32
way you would have to rewrite either way if you choose any other technology then
17:34
if you choose any other technology then
17:34
if you choose any other technology then dot vm you would also need to rewrite
17:36
dot vm you would also need to rewrite
17:36
dot vm you would also need to rewrite all your
17:37
all your
17:37
all your views yeah so and as i said when you get
17:41
views yeah so and as i said when you get
17:42
views yeah so and as i said when you get rid of all web forms dependencies then
17:45
rid of all web forms dependencies then
17:45
rid of all web forms dependencies then the rest should be supported on.net core
17:47
the rest should be supported on.net core
17:47
the rest should be supported on.net core so you should just
17:48
so you should just
17:48
so you should just change to cs project file and run on
17:52
change to cs project file and run on
17:52
change to cs project file and run on net car so if you want to start playing
17:55
net car so if you want to start playing
17:55
net car so if you want to start playing with built vm
17:56
with built vm
17:56
with built vm you can it's very easy if you open the
17:59
you can it's very easy if you open the
17:59
you can it's very easy if you open the visual studio and go to
18:00
visual studio and go to
18:00
visual studio and go to the extensions menu there is an option
18:03
the extensions menu there is an option
18:04
the extensions menu there is an option to search for the vm and install it
18:06
to search for the vm and install it
18:06
to search for the vm and install it we support visual studio 2017
18:09
we support visual studio 2017
18:09
we support visual studio 2017 and 2019 i recommend to get the latest
18:13
and 2019 i recommend to get the latest
18:13
and 2019 i recommend to get the latest updates of visual studio because we try
18:15
updates of visual studio because we try
18:15
updates of visual studio because we try to
18:15
to
18:15
to keep the extension updated to the latest
18:17
keep the extension updated to the latest
18:17
keep the extension updated to the latest releases or
18:19
releases or
18:19
releases or of the visual studio and then it's very
18:22
of the visual studio and then it's very
18:22
of the visual studio and then it's very easy because you can say just file new
18:23
easy because you can say just file new
18:24
easy because you can say just file new project
18:24
project
18:24
project and if you search for vvm project
18:26
and if you search for vvm project
18:26
and if you search for vvm project templates you will have two templates
18:28
templates you will have two templates
18:28
templates you will have two templates one for dot net core and one for the old
18:32
one for dot net core and one for the old
18:32
one for dot net core and one for the old dot net framework on the old asp.net so
18:35
dot net framework on the old asp.net so
18:35
dot net framework on the old asp.net so that's it that's enough of the slides
18:37
that's it that's enough of the slides
18:37
that's it that's enough of the slides and let's go to the demos
18:42
and let's go to the demos
18:42
and let's go to the demos okay so i have uh already created uh
18:45
okay so i have uh already created uh
18:45
okay so i have uh already created uh the vm project uh so uh if you want to
18:49
the vm project uh so uh if you want to
18:49
the vm project uh so uh if you want to get
18:49
get
18:49
get vm you can just go to extensions manage
18:51
vm you can just go to extensions manage
18:52
vm you can just go to extensions manage extensions
18:53
extensions
18:53
extensions and in this online section you can
18:55
and in this online section you can
18:55
and in this online section you can search for
18:56
search for
18:56
search for vvm
18:59
so it's uh it's it's pretty easy and
19:02
so it's uh it's it's pretty easy and
19:02
so it's uh it's it's pretty easy and there would be i have already installed
19:05
there would be i have already installed
19:05
there would be i have already installed it but you would see
19:06
it but you would see
19:06
it but you would see the install button here so you can just
19:08
the install button here so you can just
19:08
the install button here so you can just click it and
19:10
click it and
19:10
click it and let visual studio do the rest and then
19:12
let visual studio do the rest and then
19:12
let visual studio do the rest and then you can just say file new project
19:15
you can just say file new project
19:15
you can just say file new project and if you search for vvm
19:18
and if you search for vvm
19:18
and if you search for vvm you will see that there are project
19:20
you will see that there are project
19:20
you will see that there are project templates one for document core
19:22
templates one for document core
19:22
templates one for document core one for the old uh.net framework so
19:25
one for the old uh.net framework so
19:25
one for the old uh.net framework so that's how you can get started
19:26
that's how you can get started
19:26
that's how you can get started and when you created the project it's uh
19:29
and when you created the project it's uh
19:29
and when you created the project it's uh just
19:31
just
19:31
just basically it's normal asp.net core
19:33
basically it's normal asp.net core
19:33
basically it's normal asp.net core application you can see there is the
19:35
application you can see there is the
19:35
application you can see there is the target framework is.net core 3.1
19:39
target framework is.net core 3.1
19:39
target framework is.net core 3.1 and there is just one nuget package dot
19:41
and there is just one nuget package dot
19:41
and there is just one nuget package dot vm.sp net core
19:43
vm.sp net core
19:43
vm.sp net core and that's it so dot vvm is just a
19:45
and that's it so dot vvm is just a
19:46
and that's it so dot vvm is just a nougat package
19:47
nougat package
19:47
nougat package on top of the asp.net core so it's very
19:50
on top of the asp.net core so it's very
19:50
on top of the asp.net core so it's very easy
19:51
easy
19:51
easy and it integrates with the ecosystem
19:54
and it integrates with the ecosystem
19:54
and it integrates with the ecosystem and here is the startup
19:58
and here is the startup
19:58
and here is the startup file which is used for configuring the
20:00
file which is used for configuring the
20:00
file which is used for configuring the application
20:01
application
20:01
application and you can see there are services at
20:02
and you can see there are services at
20:02
and you can see there are services at vvm and here
20:04
vvm and here
20:04
vvm and here there is use dot vvm and that's it
20:07
there is use dot vvm and that's it
20:07
there is use dot vvm and that's it that's how you plug built vvm
20:09
that's how you plug built vvm
20:09
that's how you plug built vvm in the sp net uh pipeline
20:12
in the sp net uh pipeline
20:12
in the sp net uh pipeline and then uh in the default project
20:15
and then uh in the default project
20:15
and then uh in the default project template there are two folders
20:17
template there are two folders
20:17
template there are two folders the first is views and the second is
20:19
the first is views and the second is
20:19
the first is views and the second is view models and
20:20
view models and
20:20
view models and because we are using mvvm every page it
20:23
because we are using mvvm every page it
20:23
because we are using mvvm every page it needs its own
20:25
needs its own
20:25
needs its own view model so maybe let's start with the
20:27
view model so maybe let's start with the
20:27
view model so maybe let's start with the view model
20:28
view model
20:28
view model it's just a c class nothing really
20:30
it's just a c class nothing really
20:30
it's just a c class nothing really special here
20:31
special here
20:31
special here and this dot html page and the extension
20:34
and this dot html page and the extension
20:34
and this dot html page and the extension is dot html
20:36
is dot html
20:36
is dot html we have added the dot prefix
20:39
we have added the dot prefix
20:39
we have added the dot prefix to the html extension because
20:43
to the html extension because
20:43
to the html extension because the syntax is a little bit different you
20:45
the syntax is a little bit different you
20:45
the syntax is a little bit different you can see the first line
20:46
can see the first line
20:46
can see the first line which says that this page has some view
20:49
which says that this page has some view
20:49
which says that this page has some view model
20:49
model
20:50
model yeah so this is the namespace and the
20:51
yeah so this is the namespace and the
20:52
yeah so this is the namespace and the name of the firmware class
20:54
name of the firmware class
20:54
name of the firmware class and uh this is one of the syntax
20:57
and uh this is one of the syntax
20:57
and uh this is one of the syntax extensions for html
20:58
extensions for html
20:58
extensions for html dot vm has and because
21:01
dot vm has and because
21:02
dot vm has and because of the extension you have get the syntax
21:04
of the extension you have get the syntax
21:04
of the extension you have get the syntax coloring and all those things
21:06
coloring and all those things
21:06
coloring and all those things the second thing you can use in your
21:08
the second thing you can use in your
21:08
the second thing you can use in your application
21:10
application
21:10
application is components your pvm chips with some
21:12
is components your pvm chips with some
21:12
is components your pvm chips with some components
21:13
components
21:13
components and you will find them if you just ride
21:16
and you will find them if you just ride
21:16
and you will find them if you just ride the
21:17
the
21:17
the the bracket so uh all the tvm components
21:21
the bracket so uh all the tvm components
21:21
the bracket so uh all the tvm components start with the op
21:22
start with the op
21:22
start with the op prefix so for example i can create a box
21:26
prefix so for example i can create a box
21:26
prefix so for example i can create a box and every text box needs to have some
21:29
and every text box needs to have some
21:29
and every text box needs to have some text so
21:30
text so
21:30
text so let's do this and because we are using
21:34
let's do this and because we are using
21:34
let's do this and because we are using mvp and pattern i am want to
21:37
mvp and pattern i am want to
21:37
mvp and pattern i am want to interact with the components using data
21:39
interact with the components using data
21:39
interact with the components using data binding so this guy
21:41
binding so this guy
21:41
binding so this guy is a data binding expression and i need
21:44
is a data binding expression and i need
21:44
is a data binding expression and i need to bind to
21:45
to bind to
21:45
to bind to some property in my view model so for
21:48
some property in my view model so for
21:48
some property in my view model so for example let's say number one
21:50
example let's say number one
21:50
example let's say number one uh as you can see there is an
21:52
uh as you can see there is an
21:52
uh as you can see there is an intellisense but the view model is empty
21:54
intellisense but the view model is empty
21:54
intellisense but the view model is empty so right now i get no
21:55
so right now i get no
21:56
so right now i get no i get no intellisense i can uh get
21:58
i get no intellisense i can uh get
21:58
i get no intellisense i can uh get control
21:59
control
21:59
control dot and i can just have it created
22:02
dot and i can just have it created
22:02
dot and i can just have it created so when i press f12 i'm i got back to
22:06
so when i press f12 i'm i got back to
22:06
so when i press f12 i'm i got back to the viewmodel and the vvm
22:08
the viewmodel and the vvm
22:08
the viewmodel and the vvm created this property for me since i'm
22:10
created this property for me since i'm
22:10
created this property for me since i'm writing a calculator
22:12
writing a calculator
22:12
writing a calculator i want it to be integer so let's change
22:15
i want it to be integer so let's change
22:15
i want it to be integer so let's change it to integer
22:16
it to integer
22:16
it to integer and let's create a second second number
22:18
and let's create a second second number
22:18
and let's create a second second number so i will create number two
22:21
so i will create number two
22:21
so i will create number two and i will want my calculator to
22:25
and i will want my calculator to
22:25
and i will want my calculator to get a result for me so let's create a
22:27
get a result for me so let's create a
22:27
get a result for me so let's create a result property
22:28
result property
22:28
result property okay so this is my view model the
22:31
okay so this is my view model the
22:32
okay so this is my view model the purpose of the viewmodel is to represent
22:35
purpose of the viewmodel is to represent
22:35
purpose of the viewmodel is to represent the state of the page so anything that
22:37
the state of the page so anything that
22:37
the state of the page so anything that can change
22:38
can change
22:38
can change in the page everything that is dynamic
22:40
in the page everything that is dynamic
22:40
in the page everything that is dynamic in the page needs to be stored in the
22:43
in the page needs to be stored in the
22:43
in the page needs to be stored in the view model
22:44
view model
22:44
view model and in the vvm you just need to declare
22:47
and in the vvm you just need to declare
22:47
and in the vvm you just need to declare a
22:47
a
22:47
a public property uh in wpf or xamarin
22:51
public property uh in wpf or xamarin
22:51
public property uh in wpf or xamarin you would need to implement this i
22:53
you would need to implement this i
22:53
you would need to implement this i property changed interface
22:55
property changed interface
22:55
property changed interface in dot vm it's not necessary the changes
22:58
in dot vm it's not necessary the changes
22:58
in dot vm it's not necessary the changes will be detected automatically so
23:00
will be detected automatically so
23:00
will be detected automatically so uh it's not it's not
23:03
uh it's not it's not
23:03
uh it's not it's not important to implement i property
23:07
important to implement i property
23:07
important to implement i property changed
23:08
changed
23:08
changed uh just you can just use these amp to
23:11
uh just you can just use these amp to
23:11
uh just you can just use these amp to getters etc
23:12
getters etc
23:12
getters etc it should work so these are my
23:15
it should work so these are my
23:15
it should work so these are my these are my properties so number one
23:17
these are my properties so number one
23:17
these are my properties so number one number two and result
23:18
number two and result
23:18
number two and result this is the state of the page and let's
23:21
this is the state of the page and let's
23:21
this is the state of the page and let's create
23:21
create
23:22
create the rest of the ui so i have a first
23:24
the rest of the ui so i have a first
23:24
the rest of the ui so i have a first text box which is
23:25
text box which is
23:25
text box which is data bound to the number one so whenever
23:29
data bound to the number one so whenever
23:29
data bound to the number one so whenever the user types some number in the text
23:31
the user types some number in the text
23:31
the user types some number in the text box it will be stored in the view model
23:33
box it will be stored in the view model
23:33
box it will be stored in the view model and if i would change the value in the
23:36
and if i would change the value in the
23:36
and if i would change the value in the viewmodel from some method or something
23:38
viewmodel from some method or something
23:38
viewmodel from some method or something like that
23:38
like that
23:38
like that it would get back to the textbox the
23:40
it would get back to the textbox the
23:40
it would get back to the textbox the data binding works in both ways
23:44
data binding works in both ways
23:44
data binding works in both ways so let's create a second text box it
23:45
so let's create a second text box it
23:45
so let's create a second text box it would be very easy because i have the
23:47
would be very easy because i have the
23:47
would be very easy because i have the copy paste feature
23:49
copy paste feature
23:49
copy paste feature so number two and now i want to just
23:53
so number two and now i want to just
23:53
so number two and now i want to just print out the result i don't need any
23:55
print out the result i don't need any
23:55
print out the result i don't need any component i just want to print the
23:56
component i just want to print the
23:56
component i just want to print the output
23:57
output
23:57
output so i will just use double curly brace
24:01
so i will just use double curly brace
24:02
so i will just use double curly brace the double curly brace is necessary
24:04
the double curly brace is necessary
24:04
the double curly brace is necessary because a single
24:05
because a single
24:05
because a single curly brace has some meaning in for
24:08
curly brace has some meaning in for
24:08
curly brace has some meaning in for example in the script or style elements
24:10
example in the script or style elements
24:10
example in the script or style elements in html so that's why we
24:12
in html so that's why we
24:12
in html so that's why we are using double double braces here in
24:14
are using double double braces here in
24:14
are using double double braces here in the attributes you can just use
24:16
the attributes you can just use
24:16
the attributes you can just use one or also work okay so this is
24:20
one or also work okay so this is
24:20
one or also work okay so this is that's it and now i would need some
24:22
that's it and now i would need some
24:22
that's it and now i would need some button
24:23
button
24:23
button that will trigger the calculation so the
24:25
that will trigger the calculation so the
24:25
that will trigger the calculation so the user enters two numbers
24:27
user enters two numbers
24:27
user enters two numbers and wants to see the result so
24:30
and wants to see the result so
24:30
and wants to see the result so he or she needs to click the button and
24:33
he or she needs to click the button and
24:33
he or she needs to click the button and the result will be displayed
24:34
the result will be displayed
24:34
the result will be displayed so let's let's do it i have the button
24:37
so let's let's do it i have the button
24:37
so let's let's do it i have the button control
24:39
control
24:39
control for example i will write calculate
24:43
for example i will write calculate
24:43
for example i will write calculate so that's the text on the bottom and
24:46
so that's the text on the bottom and
24:46
so that's the text on the bottom and there is a click event
24:47
there is a click event
24:47
there is a click event and now i want to call some method in
24:50
and now i want to call some method in
24:50
and now i want to call some method in mvvm you are not working with events
24:53
mvvm you are not working with events
24:54
mvvm you are not working with events these are hidden because mvvm is
24:56
these are hidden because mvvm is
24:56
these are hidden because mvvm is basically abstraction on top of the
24:57
basically abstraction on top of the
24:57
basically abstraction on top of the events
24:58
events
24:58
events so you basically want to invoke some
25:01
so you basically want to invoke some
25:01
so you basically want to invoke some command
25:02
command
25:02
command so i'm i'm doing a command and the
25:05
so i'm i'm doing a command and the
25:05
so i'm i'm doing a command and the command will be for example calculate
25:10
and also the intellisense didn't show
25:13
and also the intellisense didn't show
25:13
and also the intellisense didn't show me anything because i don't have any
25:16
me anything because i don't have any
25:16
me anything because i don't have any function declared in the viewmodel but
25:17
function declared in the viewmodel but
25:18
function declared in the viewmodel but let's fix it so i can have my method
25:21
let's fix it so i can have my method
25:21
let's fix it so i can have my method created
25:22
created
25:22
created so it created a public method for me
25:25
so it created a public method for me
25:26
so it created a public method for me so i have created public function
25:28
so i have created public function
25:28
so i have created public function calculate
25:29
calculate
25:29
calculate and let's calculate the result so result
25:32
and let's calculate the result so result
25:32
and let's calculate the result so result equals number one
25:34
equals number one
25:34
equals number one plus number two and
25:37
plus number two and
25:37
plus number two and that's it yeah so you can use the
25:41
that's it yeah so you can use the
25:41
that's it yeah so you can use the value binding expression to access
25:44
value binding expression to access
25:44
value binding expression to access properties in the viewmodel
25:46
properties in the viewmodel
25:46
properties in the viewmodel and you can you can use the command
25:50
and you can you can use the command
25:50
and you can you can use the command binding to call methods in the viewmodel
25:54
binding to call methods in the viewmodel
25:54
binding to call methods in the viewmodel yeah so you can you can display and
25:56
yeah so you can you can display and
25:56
yeah so you can you can display and interact with site
25:57
interact with site
25:57
interact with site and you can invoke commands in in the
26:00
and you can invoke commands in in the
26:00
and you can invoke commands in in the viewmodel
26:01
viewmodel
26:01
viewmodel so that's how it works it's pretty
26:03
so that's how it works it's pretty
26:03
so that's how it works it's pretty straightforward
26:04
straightforward
26:04
straightforward so let's run it i will try to run the
26:08
so let's run it i will try to run the
26:08
so let's run it i will try to run the application
26:15
and here's my browser
26:20
so the first first start is always takes
26:23
so the first first start is always takes
26:23
so the first first start is always takes a few seconds because the application is
26:25
a few seconds because the application is
26:25
a few seconds because the application is being compiled on the background
26:28
being compiled on the background
26:28
being compiled on the background so hopefully we will get there okay
26:32
so hopefully we will get there okay
26:32
so hopefully we will get there okay i think i should turn off the symbol
26:35
i think i should turn off the symbol
26:35
i think i should turn off the symbol symbol loading
26:36
symbol loading
26:36
symbol loading okay now it's it's there because visual
26:39
okay now it's it's there because visual
26:39
okay now it's it's there because visual studio
26:39
studio
26:39
studio try to download symbols for all the all
26:41
try to download symbols for all the all
26:41
try to download symbols for all the all the libraries uh
26:43
the libraries uh
26:43
the libraries uh because i've been debugging some things
26:44
because i've been debugging some things
26:44
because i've been debugging some things recently okay so now this is my ui so
26:47
recently okay so now this is my ui so
26:47
recently okay so now this is my ui so you can see the text box controls
26:50
you can see the text box controls
26:50
you can see the text box controls they just get translated to standard
26:53
they just get translated to standard
26:53
they just get translated to standard html elements so
26:54
html elements so
26:54
html elements so uh in the visual studio you have seen
26:57
uh in the visual studio you have seen
26:57
uh in the visual studio you have seen the dot text box control
26:59
the dot text box control
26:59
the dot text box control but in this html in this browser it's
27:02
but in this html in this browser it's
27:02
but in this html in this browser it's just input type text yeah so
27:05
just input type text yeah so
27:05
just input type text yeah so the 3vm translates controls to their
27:08
the 3vm translates controls to their
27:08
the 3vm translates controls to their html equivalent
27:09
html equivalent
27:09
html equivalent and i can now just try the calculator
27:12
and i can now just try the calculator
27:12
and i can now just try the calculator so print plus 15 and i can click
27:15
so print plus 15 and i can click
27:15
so print plus 15 and i can click calculate
27:16
calculate
27:16
calculate and here is my result basically the
27:18
and here is my result basically the
27:18
and here is my result basically the result property
27:20
result property
27:20
result property gets updated and how it works internally
27:24
gets updated and how it works internally
27:24
gets updated and how it works internally dot vm is using knockout.js library
27:27
dot vm is using knockout.js library
27:27
dot vm is using knockout.js library on the client side and the view model
27:30
on the client side and the view model
27:30
on the client side and the view model which is written in c sharp is
27:32
which is written in c sharp is
27:32
which is written in c sharp is translated to json and sent over to the
27:36
translated to json and sent over to the
27:36
translated to json and sent over to the client so
27:37
client so
27:37
client so on the client side when you write this
27:39
on the client side when you write this
27:39
on the client side when you write this number
27:40
number
27:40
number in a text box it will be stored in the
27:44
in a text box it will be stored in the
27:44
in a text box it will be stored in the javascript version of the view model
27:46
javascript version of the view model
27:46
javascript version of the view model and when i click the button the view
27:48
and when i click the button the view
27:48
and when i click the button the view model will be json serialized and sent
27:51
model will be json serialized and sent
27:51
model will be json serialized and sent to the server
27:52
to the server
27:52
to the server where we can invoke the calculate method
27:54
where we can invoke the calculate method
27:54
where we can invoke the calculate method and
27:55
and
27:55
and if it changes the state of the viewmodel
27:57
if it changes the state of the viewmodel
27:57
if it changes the state of the viewmodel the changes will be sent to the client
28:00
the changes will be sent to the client
28:00
the changes will be sent to the client and it's it's all using ajax so the page
28:03
and it's it's all using ajax so the page
28:03
and it's it's all using ajax so the page is not
28:04
is not
28:04
is not reloaded like in web forms basically the
28:07
reloaded like in web forms basically the
28:07
reloaded like in web forms basically the page
28:08
page
28:08
page is just updated using some javascript
28:10
is just updated using some javascript
28:10
is just updated using some javascript which is embedded in the dot vm
28:12
which is embedded in the dot vm
28:12
which is embedded in the dot vm as you can see i didn't have to write
28:14
as you can see i didn't have to write
28:14
as you can see i didn't have to write any
28:15
any
28:15
any piece of javascript called i've just
28:17
piece of javascript called i've just
28:17
piece of javascript called i've just wrote a c-sharp class
28:19
wrote a c-sharp class
28:19
wrote a c-sharp class and a few lines of html and that
28:23
and a few lines of html and that
28:23
and a few lines of html and that has already done the trick all those
28:25
has already done the trick all those
28:25
has already done the trick all those javascript
28:26
javascript
28:26
javascript needed to make this magic happen are
28:29
needed to make this magic happen are
28:29
needed to make this magic happen are built in in the dot vm package
28:31
built in in the dot vm package
28:31
built in in the dot vm package and you don't need to take care of them
28:34
and you don't need to take care of them
28:34
and you don't need to take care of them okay so that's the calculator so as you
28:37
okay so that's the calculator so as you
28:37
okay so that's the calculator so as you could see
28:37
could see
28:38
could see you can use controls or components in in
28:40
you can use controls or components in in
28:40
you can use controls or components in in the html
28:41
the html
28:41
the html and you can also use binding expression
28:45
and you can also use binding expression
28:45
and you can also use binding expression by default the data binding works in two
28:47
by default the data binding works in two
28:47
by default the data binding works in two ways so if you write something in the
28:49
ways so if you write something in the
28:49
ways so if you write something in the text box it will get stored in the view
28:51
text box it will get stored in the view
28:51
text box it will get stored in the view model
28:52
model
28:52
model and if you change the result for example
28:54
and if you change the result for example
28:54
and if you change the result for example in the view model
28:55
in the view model
28:55
in the view model it will be propagated to the ui so it's
28:59
it will be propagated to the ui so it's
28:59
it will be propagated to the ui so it's two-way binding and we can also call
29:02
two-way binding and we can also call
29:02
two-way binding and we can also call methods on the viewmodel
29:03
methods on the viewmodel
29:03
methods on the viewmodel the method has to be public otherwise
29:06
the method has to be public otherwise
29:06
the method has to be public otherwise the vm wouldn't allow
29:07
the vm wouldn't allow
29:07
the vm wouldn't allow to call it but if it's public it can
29:10
to call it but if it's public it can
29:10
to call it but if it's public it can just interact with the view model it can
29:12
just interact with the view model it can
29:12
just interact with the view model it can load or store
29:13
load or store
29:13
load or store things in the database and things like
29:16
things in the database and things like
29:16
things in the database and things like that
29:16
that
29:16
that so this is the trivial demo of how the
29:18
so this is the trivial demo of how the
29:18
so this is the trivial demo of how the tvm works
29:19
tvm works
29:20
tvm works and let's look at something more
29:22
and let's look at something more
29:22
and let's look at something more complicated
29:23
complicated
29:23
complicated so i have a second application and
29:27
so i have a second application and
29:27
so i have a second application and it's a little bit more complex here's
29:29
it's a little bit more complex here's
29:29
it's a little bit more complex here's the database
29:31
the database
29:31
the database and uh it's just using entity framework
29:34
and uh it's just using entity framework
29:34
and uh it's just using entity framework so here is some
29:35
so here is some
29:35
so here is some db contacts some orders products other
29:39
db contacts some orders products other
29:39
db contacts some orders products other very simple database for keeping track
29:42
very simple database for keeping track
29:42
very simple database for keeping track of my orders
29:44
of my orders
29:44
of my orders and the most important things from the
29:48
and the most important things from the
29:48
and the most important things from the business logic side are these folders
29:51
business logic side are these folders
29:51
business logic side are these folders the services and the model
29:53
the services and the model
29:53
the services and the model so i have two services first is order
29:56
so i have two services first is order
29:56
so i have two services first is order service
29:57
service
29:57
service which basically provides all the
29:59
which basically provides all the
29:59
which basically provides all the functions the application will need
30:01
functions the application will need
30:01
functions the application will need for working with orders i always try to
30:04
for working with orders i always try to
30:04
for working with orders i always try to separate the business logic from the
30:06
separate the business logic from the
30:06
separate the business logic from the user interface so that's why all the
30:08
user interface so that's why all the
30:08
user interface so that's why all the business logic is here
30:10
business logic is here
30:10
business logic is here in this services folder and it's not in
30:12
in this services folder and it's not in
30:12
in this services folder and it's not in the view models
30:13
the view models
30:13
the view models themselves the view models are very
30:16
themselves the view models are very
30:16
themselves the view models are very stupid if i say that
30:18
stupid if i say that
30:18
stupid if i say that because they just call services
30:21
because they just call services
30:21
because they just call services to do all the job yeah so the purpose of
30:23
to do all the job yeah so the purpose of
30:23
to do all the job yeah so the purpose of the
30:24
the
30:24
the view model is just to call
30:27
view model is just to call
30:27
view model is just to call the business logic and prepare
30:30
the business logic and prepare
30:30
the business logic and prepare the data for the user interface so the
30:33
the data for the user interface so the
30:33
the data for the user interface so the view models only contain
30:34
view models only contain
30:34
view models only contain presentation logic not the business
30:36
presentation logic not the business
30:36
presentation logic not the business logic and it's great because if i decide
30:38
logic and it's great because if i decide
30:38
logic and it's great because if i decide to
30:39
to
30:39
to rewrite the application to any other
30:41
rewrite the application to any other
30:41
rewrite the application to any other technology
30:42
technology
30:42
technology i can still keep the business logic as
30:44
i can still keep the business logic as
30:44
i can still keep the business logic as is and i will just replace the
30:46
is and i will just replace the
30:46
is and i will just replace the presentation layer
30:47
presentation layer
30:47
presentation layer yeah so this is a function which returns
30:51
yeah so this is a function which returns
30:51
yeah so this is a function which returns uh my orders this gets ordered by ide
30:55
uh my orders this gets ordered by ide
30:55
uh my orders this gets ordered by ide this can update or create a new order
30:59
this can update or create a new order
30:59
this can update or create a new order and this can recalculate price of the
31:01
and this can recalculate price of the
31:02
and this can recalculate price of the order so
31:02
order so
31:02
order so this is the logic for orders here is
31:05
this is the logic for orders here is
31:05
this is the logic for orders here is just a very simple method that
31:07
just a very simple method that
31:07
just a very simple method that lists all the products i have in my
31:09
lists all the products i have in my
31:09
lists all the products i have in my catalog
31:10
catalog
31:10
catalog in the database and these services
31:13
in the database and these services
31:13
in the database and these services provides
31:14
provides
31:14
provides everything the user interface will need
31:17
everything the user interface will need
31:17
everything the user interface will need and if i look in the model you can see
31:19
and if i look in the model you can see
31:19
and if i look in the model you can see that all the classes
31:20
that all the classes
31:20
that all the classes have the dto suffix dto is an
31:24
have the dto suffix dto is an
31:24
have the dto suffix dto is an abbreviation for a data transfer object
31:27
abbreviation for a data transfer object
31:27
abbreviation for a data transfer object and basically it's just an object that
31:29
and basically it's just an object that
31:29
and basically it's just an object that is
31:30
is
31:30
is returned by the business logic to the ui
31:33
returned by the business logic to the ui
31:33
returned by the business logic to the ui yeah so it can it sometimes it's uh
31:36
yeah so it can it sometimes it's uh
31:36
yeah so it can it sometimes it's uh called model or
31:37
called model or
31:37
called model or input model sometimes it's called it's
31:39
input model sometimes it's called it's
31:39
input model sometimes it's called it's called dto but in principle
31:41
called dto but in principle
31:41
called dto but in principle it's just a plain object with properties
31:43
it's just a plain object with properties
31:43
it's just a plain object with properties and some validation metadata
31:45
and some validation metadata
31:45
and some validation metadata and that's it no logic inside these
31:48
and that's it no logic inside these
31:48
and that's it no logic inside these objects they are
31:49
objects they are
31:49
objects they are only for transferring the data from one
31:52
only for transferring the data from one
31:52
only for transferring the data from one side to the other
31:53
side to the other
31:53
side to the other yeah so this is how i approach the
31:56
yeah so this is how i approach the
31:56
yeah so this is how i approach the business
31:57
business
31:57
business writing the business logic i always try
31:59
writing the business logic i always try
31:59
writing the business logic i always try to keep it separate
32:00
to keep it separate
32:00
to keep it separate from the view models of course if you
32:03
from the view models of course if you
32:03
from the view models of course if you don't want to do this you can have the
32:05
don't want to do this you can have the
32:05
don't want to do this you can have the business logic interview models but i
32:07
business logic interview models but i
32:07
business logic interview models but i don't think it's
32:08
don't think it's
32:08
don't think it's it's clean okay let's look at the
32:12
it's clean okay let's look at the
32:12
it's clean okay let's look at the application
32:12
application
32:12
application i can i can run it first
32:16
i can i can run it first
32:16
i can i can run it first so we will see what we are building
32:19
so we will see what we are building
32:19
so we will see what we are building and it's a very basic application with a
32:21
and it's a very basic application with a
32:21
and it's a very basic application with a grid view control
32:23
grid view control
32:23
grid view control and with some form you can use for
32:25
and with some form you can use for
32:25
and with some form you can use for editing
32:26
editing
32:26
editing the orders so this is the grid view
32:28
the orders so this is the grid view
32:28
the orders so this is the grid view component that is built
32:30
component that is built
32:30
component that is built in in the tvm it's styled using
32:33
in in the tvm it's styled using
32:33
in in the tvm it's styled using bootstrap so because that vvm
32:35
bootstrap so because that vvm
32:35
bootstrap so because that vvm is uh agnostic to this
32:38
is uh agnostic to this
32:38
is uh agnostic to this css styles you will be using so that vvm
32:41
css styles you will be using so that vvm
32:41
css styles you will be using so that vvm just renders
32:41
just renders
32:42
just renders plain html table and it's up to you to
32:45
plain html table and it's up to you to
32:45
plain html table and it's up to you to use
32:45
use
32:45
use proper css so i'm using bootstrap and
32:49
proper css so i'm using bootstrap and
32:49
proper css so i'm using bootstrap and because that vm just renders a table
32:52
because that vm just renders a table
32:52
because that vm just renders a table and bootstrap has very nice css styles
32:54
and bootstrap has very nice css styles
32:54
and bootstrap has very nice css styles for the table
32:55
for the table
32:55
for the table that's how it looks like now and
32:58
that's how it looks like now and
32:58
that's how it looks like now and the grid view has some capabilities for
33:00
the grid view has some capabilities for
33:00
the grid view has some capabilities for example sorting and paging so
33:02
example sorting and paging so
33:02
example sorting and paging so you can see these things work and it's
33:05
you can see these things work and it's
33:05
you can see these things work and it's very easy to
33:06
very easy to
33:06
very easy to to create them and there is a second
33:08
to create them and there is a second
33:08
to create them and there is a second page which is basically order detail
33:11
page which is basically order detail
33:11
page which is basically order detail and i can create some order so i can
33:14
and i can create some order so i can
33:14
and i can create some order so i can write my for example email address
33:18
write my for example email address
33:18
write my for example email address and i can add some orders some items to
33:20
and i can add some orders some items to
33:20
and i can add some orders some items to be ordered so let's
33:22
be ordered so let's
33:22
be ordered so let's add this and this whenever i change
33:26
add this and this whenever i change
33:26
add this and this whenever i change something you can see the total price
33:29
something you can see the total price
33:29
something you can see the total price gets recalculated yeah so it's
33:32
gets recalculated yeah so it's
33:32
gets recalculated yeah so it's pretty interactive yeah whenever i
33:34
pretty interactive yeah whenever i
33:34
pretty interactive yeah whenever i change something
33:35
change something
33:35
change something the price is also getting changed
33:39
the price is also getting changed
33:39
the price is also getting changed i can remove items i can add them again
33:42
i can remove items i can add them again
33:42
i can remove items i can add them again so
33:42
so
33:42
so this is that's it and i can click save
33:45
this is that's it and i can click save
33:45
this is that's it and i can click save changes
33:46
changes
33:46
changes and the order should be stored
33:50
and the order should be stored
33:50
and the order should be stored and i sort them by id you can see this
33:53
and i sort them by id you can see this
33:53
and i sort them by id you can see this is my last order
33:54
is my last order
33:54
is my last order i have created just now yeah so this is
33:57
i have created just now yeah so this is
33:57
i have created just now yeah so this is and i can edit the order so i can
33:59
and i can edit the order so i can
33:59
and i can edit the order so i can change this quantity the price was
34:02
change this quantity the price was
34:02
change this quantity the price was updated to
34:03
updated to
34:03
updated to 58 dollars so i can change it
34:06
58 dollars so i can change it
34:06
58 dollars so i can change it and again when i sort it you can see the
34:09
and again when i sort it you can see the
34:09
and again when i sort it you can see the price
34:10
price
34:10
price has been updated yeah so this is this is
34:13
has been updated yeah so this is this is
34:13
has been updated yeah so this is this is the application
34:14
the application
34:14
the application so let's look how it works and dot vm
34:17
so let's look how it works and dot vm
34:17
so let's look how it works and dot vm so i will close all these tabs
34:21
so i will close all these tabs
34:21
so i will close all these tabs and let's look uh first at the master
34:25
and let's look uh first at the master
34:25
and let's look uh first at the master page
34:25
page
34:25
page it's uh very simple because both pages
34:28
it's uh very simple because both pages
34:28
it's uh very simple because both pages they have the same menu so i don't want
34:31
they have the same menu so i don't want
34:31
they have the same menu so i don't want to repeat
34:32
to repeat
34:32
to repeat the these elements in the page so i've
34:35
the these elements in the page so i've
34:35
the these elements in the page so i've created
34:35
created
34:35
created a thing which is called master page that
34:38
a thing which is called master page that
34:38
a thing which is called master page that terminology
34:39
terminology
34:39
terminology gets uh is imported from asp.net web
34:42
gets uh is imported from asp.net web
34:42
gets uh is imported from asp.net web forms where
34:43
forms where
34:43
forms where it was also called master pages i think
34:46
it was also called master pages i think
34:46
it was also called master pages i think that in the next version of the vm we
34:48
that in the next version of the vm we
34:48
that in the next version of the vm we should rename it
34:49
should rename it
34:49
should rename it to some layout pages or something
34:51
to some layout pages or something
34:51
to some layout pages or something because the master
34:52
because the master
34:52
because the master word shouldn't be used because it has
34:55
word shouldn't be used because it has
34:55
word shouldn't be used because it has some problematic uh history
34:58
some problematic uh history
34:58
some problematic uh history uh so this is uh this is some just
35:00
uh so this is uh this is some just
35:00
uh so this is uh this is some just bootstrap
35:01
bootstrap
35:01
bootstrap css nothing really special this
35:03
css nothing really special this
35:03
css nothing really special this responsive menu
35:05
responsive menu
35:05
responsive menu so that's it and that's on all pages so
35:07
so that's it and that's on all pages so
35:07
so that's it and that's on all pages so that's because
35:08
that's because
35:08
that's because that's why it's in my master page and
35:11
that's why it's in my master page and
35:11
that's why it's in my master page and here
35:11
here
35:11
here i have the content placeholder control
35:13
i have the content placeholder control
35:13
i have the content placeholder control and basically it's a placeholder
35:16
and basically it's a placeholder
35:16
and basically it's a placeholder for the content of the specific page so
35:19
for the content of the specific page so
35:19
for the content of the specific page so when i
35:19
when i
35:20
when i open the page
35:23
when i open the page uh like this
35:26
when i open the page uh like this
35:26
when i open the page uh like this i don't need to repeat the menu and
35:28
i don't need to repeat the menu and
35:28
i don't need to repeat the menu and things like that and only
35:29
things like that and only
35:30
things like that and only the content which is inside this control
35:32
the content which is inside this control
35:32
the content which is inside this control will be substituted here in the content
35:35
will be substituted here in the content
35:35
will be substituted here in the content placeholder
35:36
placeholder
35:36
placeholder so let's so that's it
35:40
so let's so that's it
35:40
so let's so that's it and um
35:44
and um
35:44
and um and uh here i have the grid view control
35:49
and uh here i have the grid view control
35:49
and uh here i have the grid view control and you can see that i can i can make
35:52
and you can see that i can i can make
35:52
and you can see that i can i can make the code full screen so this is the grid
35:55
the code full screen so this is the grid
35:55
the code full screen so this is the grid view
35:55
view
35:55
view and you can see there is a data binding
35:57
and you can see there is a data binding
35:57
and you can see there is a data binding for the orders collection
35:59
for the orders collection
35:59
for the orders collection yeah so in the view model i will have
36:01
yeah so in the view model i will have
36:01
yeah so in the view model i will have just collection of objects
36:03
just collection of objects
36:03
just collection of objects with the data of my orders and
36:07
with the data of my orders and
36:07
with the data of my orders and i will i'm specifying the column so the
36:09
i will i'm specifying the column so the
36:09
i will i'm specifying the column so the first column displays
36:10
first column displays
36:10
first column displays the ide and second is creative date i'm
36:14
the ide and second is creative date i'm
36:14
the ide and second is creative date i'm using some format string so it will
36:16
using some format string so it will
36:16
using some format string so it will appear like a date this is the email
36:18
appear like a date this is the email
36:18
appear like a date this is the email address and i want it to be clickable
36:21
address and i want it to be clickable
36:21
address and i want it to be clickable so i have specified a template inside
36:24
so i have specified a template inside
36:24
so i have specified a template inside the column
36:25
the column
36:25
the column so i'm generating a hyperlink
36:29
so i'm generating a hyperlink
36:29
so i'm generating a hyperlink here this is number of items so it's
36:30
here this is number of items so it's
36:30
here this is number of items so it's also very easy this is price and i'm
36:32
also very easy this is price and i'm
36:32
also very easy this is price and i'm formatting
36:33
formatting
36:33
formatting it as a currency so that's why i have
36:36
it as a currency so that's why i have
36:36
it as a currency so that's why i have this format string here
36:37
this format string here
36:38
this format string here and the last column is the edit button
36:41
and the last column is the edit button
36:41
and the last column is the edit button so i'm using this thing to generate
36:45
so i'm using this thing to generate
36:45
so i'm using this thing to generate a link to another page in the
36:46
a link to another page in the
36:46
a link to another page in the application in the tv and we are using
36:49
application in the tv and we are using
36:49
application in the tv and we are using routing
36:50
routing
36:50
routing and if you look in the project in the
36:52
and if you look in the project in the
36:52
and if you look in the project in the dot video and startup file
36:54
dot video and startup file
36:54
dot video and startup file here is a function that configures
36:56
here is a function that configures
36:56
here is a function that configures routes so i am
36:58
routes so i am
36:58
routes so i am adding my order detail route to the
37:00
adding my order detail route to the
37:00
adding my order detail route to the route table
37:01
route table
37:01
route table and i can specify the id parameter to
37:04
and i can specify the id parameter to
37:04
and i can specify the id parameter to the route
37:04
the route
37:04
the route so whenever i open some order
37:08
so whenever i open some order
37:08
so whenever i open some order you will see that the url is order slash
37:11
you will see that the url is order slash
37:11
you will see that the url is order slash nine which is the id of of the order
37:14
nine which is the id of of the order
37:14
nine which is the id of of the order okay so this is it this is it
37:18
okay so this is it this is it
37:18
okay so this is it this is it so when i go back then you can see that
37:21
so when i go back then you can see that
37:21
so when i go back then you can see that i'm
37:22
i'm
37:22
i'm creating a link which goes to the order
37:24
creating a link which goes to the order
37:24
creating a link which goes to the order detail route
37:25
detail route
37:26
detail route and as a id i'm passing
37:30
and as a id i'm passing
37:30
and as a id i'm passing this id property
37:33
this id property
37:33
this id property of the particular grid view viewer also
37:35
of the particular grid view viewer also
37:35
of the particular grid view viewer also because it's bound to the collection
37:37
because it's bound to the collection
37:37
because it's bound to the collection so every row is bound to some element of
37:41
so every row is bound to some element of
37:41
so every row is bound to some element of the collection
37:41
the collection
37:42
the collection yeah so every row has different order
37:45
yeah so every row has different order
37:45
yeah so every row has different order and i'm using the id parameter and you
37:48
and i'm using the id parameter and you
37:48
and i'm using the id parameter and you can see that the route link supports
37:50
can see that the route link supports
37:50
can see that the route link supports the parameters like this param dash and
37:53
the parameters like this param dash and
37:53
the parameters like this param dash and name of the parameter in the route table
37:55
name of the parameter in the route table
37:55
name of the parameter in the route table so the name is
37:57
so the name is
37:57
so the name is id and it's optional that's why there is
38:00
id and it's optional that's why there is
38:00
id and it's optional that's why there is the question
38:01
the question
38:01
the question mark okay and i'm using some icons so it
38:05
mark okay and i'm using some icons so it
38:05
mark okay and i'm using some icons so it would look nice and as you can see when
38:08
would look nice and as you can see when
38:08
would look nice and as you can see when i go back
38:09
i go back
38:09
i go back this is the last row so there is the
38:11
this is the last row so there is the
38:11
this is the last row so there is the edit link and it goes
38:13
edit link and it goes
38:13
edit link and it goes to the details of of the order
38:16
to the details of of the order
38:16
to the details of of the order okay and the last component is data
38:19
okay and the last component is data
38:19
okay and the last component is data pager it's bound to also to the orders
38:21
pager it's bound to also to the orders
38:21
pager it's bound to also to the orders collection
38:23
collection
38:23
collection and it renders this and i'm using also
38:26
and it renders this and i'm using also
38:26
and it renders this and i'm using also some bootstrap magic
38:27
some bootstrap magic
38:27
some bootstrap magic i'm just using the pagination css class
38:30
i'm just using the pagination css class
38:30
i'm just using the pagination css class so
38:30
so
38:30
so it will be styled as a bootstrap
38:34
it will be styled as a bootstrap
38:34
it will be styled as a bootstrap pager which is great because i don't
38:36
pager which is great because i don't
38:36
pager which is great because i don't need to do anything else
38:37
need to do anything else
38:37
need to do anything else and it looks pretty nice i think
38:40
and it looks pretty nice i think
38:40
and it looks pretty nice i think and i'm i'm a developer i don't have any
38:43
and i'm i'm a developer i don't have any
38:43
and i'm i'm a developer i don't have any graphics skills
38:44
graphics skills
38:44
graphics skills so bootstrap is very convenient for me
38:47
so bootstrap is very convenient for me
38:47
so bootstrap is very convenient for me yeah
38:48
yeah
38:48
yeah so that's that's uh how the view is done
38:51
so that's that's uh how the view is done
38:51
so that's that's uh how the view is done basically all the magic is done by the
38:53
basically all the magic is done by the
38:53
basically all the magic is done by the grid view control
38:54
grid view control
38:54
grid view control so let's see how the view model looks
38:57
so let's see how the view model looks
38:57
so let's see how the view model looks like because it's also very interesting
39:00
like because it's also very interesting
39:00
like because it's also very interesting and as i said in the view model you have
39:03
and as i said in the view model you have
39:03
and as i said in the view model you have two
39:03
two
39:03
two main things to do first is to persist
39:06
main things to do first is to persist
39:06
main things to do first is to persist the state of the view model
39:08
the state of the view model
39:08
the state of the view model and this is this property orders
39:11
and this is this property orders
39:11
and this is this property orders and if you look at the type it's not a
39:13
and if you look at the type it's not a
39:14
and if you look at the type it's not a list
39:14
list
39:14
list of orderless dto but it's a gridview
39:17
of orderless dto but it's a gridview
39:18
of orderless dto but it's a gridview dataset
39:19
dataset
39:19
dataset basically gridview dataset it's a class
39:21
basically gridview dataset it's a class
39:21
basically gridview dataset it's a class which ships
39:22
which ships
39:22
which ships together with the vm and basically it's
39:24
together with the vm and basically it's
39:24
together with the vm and basically it's a list
39:25
a list
39:25
a list but it has some metadata for paging and
39:28
but it has some metadata for paging and
39:28
but it has some metadata for paging and sorting
39:29
sorting
39:29
sorting so when i press f12 you can see what's
39:33
so when i press f12 you can see what's
39:33
so when i press f12 you can see what's inside of the data set
39:34
inside of the data set
39:34
inside of the data set and basically you can see there is a
39:36
and basically you can see there is a
39:36
and basically you can see there is a collection of items
39:38
collection of items
39:38
collection of items so that's what was displayed in in the
39:41
so that's what was displayed in in the
39:41
so that's what was displayed in in the grid view
39:42
grid view
39:42
grid view but there are also some settings for
39:44
but there are also some settings for
39:44
but there are also some settings for paging for sorting
39:46
paging for sorting
39:46
paging for sorting and some other helper methods so
39:48
and some other helper methods so
39:48
and some other helper methods so basically
39:49
basically
39:49
basically it's a collection but it also remembers
39:52
it's a collection but it also remembers
39:52
it's a collection but it also remembers on which page of results you are looking
39:55
on which page of results you are looking
39:55
on which page of results you are looking and which column you are using for
39:58
and which column you are using for
39:58
and which column you are using for sorting
39:59
sorting
39:59
sorting yeah and you can initialize it when you
40:01
yeah and you can initialize it when you
40:01
yeah and you can initialize it when you are using it so it's
40:02
are using it so it's
40:02
are using it so it's just get set property but i am setting a
40:05
just get set property but i am setting a
40:05
just get set property but i am setting a new i'm creating a new gridview dataset
40:08
new i'm creating a new gridview dataset
40:08
new i'm creating a new gridview dataset and i'm setting paging options page size
40:10
and i'm setting paging options page size
40:10
and i'm setting paging options page size to 10 and i can say the default sort
40:12
to 10 and i can say the default sort
40:12
to 10 and i can say the default sort order so it's
40:14
order so it's
40:14
order so it's sorted by creative date in the
40:17
sorted by creative date in the
40:17
sorted by creative date in the descending order so the newest orders
40:20
descending order so the newest orders
40:20
descending order so the newest orders should be could be uh
40:23
should be could be uh
40:23
should be could be uh should be there yeah hopefully
40:28
yeah it uh yeah it seems that uh it's
40:31
yeah it uh yeah it seems that uh it's
40:31
yeah it uh yeah it seems that uh it's uh descending order
40:32
uh descending order
40:32
uh descending order [Music]
40:34
[Music]
40:34
[Music] okay so uh that's it
40:37
okay so uh that's it
40:37
okay so uh that's it and the rest of the magic is i need to
40:40
and the rest of the magic is i need to
40:40
and the rest of the magic is i need to load the data from the database to the
40:42
load the data from the database to the
40:42
load the data from the database to the orders collection and i am doing this in
40:45
orders collection and i am doing this in
40:46
orders collection and i am doing this in the pre-render method
40:47
the pre-render method
40:47
the pre-render method and if you have been using the web forms
40:50
and if you have been using the web forms
40:50
and if you have been using the web forms so the semantic is very similar there
40:52
so the semantic is very similar there
40:52
so the semantic is very similar there was also the page pre-render method so
40:55
was also the page pre-render method so
40:55
was also the page pre-render method so uh it's it's just inspired by webforce
40:59
uh it's it's just inspired by webforce
40:59
uh it's it's just inspired by webforce and here i can ask is refresh required
41:02
and here i can ask is refresh required
41:02
and here i can ask is refresh required because i don't need to
41:04
because i don't need to
41:04
because i don't need to reload the data if nothing has changed
41:06
reload the data if nothing has changed
41:06
reload the data if nothing has changed but if the user
41:07
but if the user
41:07
but if the user switched to the page to another i need
41:09
switched to the page to another i need
41:10
switched to the page to another i need to load the new data from the database
41:12
to load the new data from the database
41:12
to load the new data from the database so i will check if i actually need to
41:14
so i will check if i actually need to
41:14
so i will check if i actually need to load the data
41:15
load the data
41:15
load the data and if i should i can just
41:18
and if i should i can just
41:18
and if i should i can just get orders and it runs it returns
41:21
get orders and it runs it returns
41:21
get orders and it runs it returns equatable
41:22
equatable
41:22
equatable and that's it because the data set has a
41:24
and that's it because the data set has a
41:24
and that's it because the data set has a helper method load from variable so you
41:27
helper method load from variable so you
41:27
helper method load from variable so you can just pass
41:27
can just pass
41:28
can just pass variable to the data set and it will
41:30
variable to the data set and it will
41:30
variable to the data set and it will apply the
41:31
apply the
41:31
apply the sorting and paging automatically so this
41:34
sorting and paging automatically so this
41:34
sorting and paging automatically so this get orders
41:35
get orders
41:35
get orders it just returns all the records
41:38
it just returns all the records
41:38
it just returns all the records but it's like variables so they are not
41:40
but it's like variables so they are not
41:40
but it's like variables so they are not fetched from the database
41:42
fetched from the database
41:42
fetched from the database and this load from variable it applies
41:45
and this load from variable it applies
41:45
and this load from variable it applies order by
41:46
order by
41:46
order by and skip and take methods to the iq
41:49
and skip and take methods to the iq
41:49
and skip and take methods to the iq variable
41:49
variable
41:50
variable and then calls to list so the paging and
41:52
and then calls to list so the paging and
41:52
and then calls to list so the paging and sorting happens automatically for you
41:54
sorting happens automatically for you
41:54
sorting happens automatically for you you don't need to do anything
41:56
you don't need to do anything
41:56
you don't need to do anything if you don't use entity framework or if
41:58
if you don't use entity framework or if
41:58
if you don't use entity framework or if you don't have iqueryable
42:00
you don't have iqueryable
42:00
you don't have iqueryable you can fill this data set manually you
42:02
you can fill this data set manually you
42:02
you can fill this data set manually you can just
42:03
can just
42:03
can just say orders dot items sorry
42:06
say orders dot items sorry
42:06
say orders dot items sorry orders dot items and it's a list so you
42:10
orders dot items and it's a list so you
42:10
orders dot items and it's a list so you can
42:11
can
42:11
can do when whatever you want to do with the
42:13
do when whatever you want to do with the
42:13
do when whatever you want to do with the list so
42:14
list so
42:14
list so you just get a list of objects from
42:16
you just get a list of objects from
42:16
you just get a list of objects from anywhere and pass it
42:17
anywhere and pass it
42:17
anywhere and pass it here and you can load it manually
42:21
here and you can load it manually
42:21
here and you can load it manually so that's uh that's it and uh i will try
42:24
so that's uh that's it and uh i will try
42:24
so that's uh that's it and uh i will try to be very quick
42:25
to be very quick
42:25
to be very quick uh about the detail page so when i uh
42:28
uh about the detail page so when i uh
42:28
uh about the detail page so when i uh when i actually go to the edit page and
42:31
when i actually go to the edit page and
42:31
when i actually go to the edit page and i've
42:32
i've
42:32
i've done some change in the c-sharp that's
42:33
done some change in the c-sharp that's
42:33
done some change in the c-sharp that's why it takes so long because the
42:35
why it takes so long because the
42:35
why it takes so long because the application is
42:36
application is
42:36
application is compiling right now hopefully i haven't
42:40
compiling right now hopefully i haven't
42:40
compiling right now hopefully i haven't damaged anything in it okay so this is
42:43
damaged anything in it okay so this is
42:44
damaged anything in it okay so this is the order details
42:45
the order details
42:45
the order details so let's look uh how it uh how it works
42:48
so let's look uh how it uh how it works
42:48
so let's look uh how it uh how it works uh
42:48
uh
42:48
uh let's start with the view model first i
42:51
let's start with the view model first i
42:51
let's start with the view model first i have a few properties in my viewmodel
42:53
have a few properties in my viewmodel
42:53
have a few properties in my viewmodel so first is edited order ide and i'm
42:56
so first is edited order ide and i'm
42:56
so first is edited order ide and i'm using the from route attribute so it
42:58
using the from route attribute so it
42:58
using the from route attribute so it will
42:59
will
42:59
will look in the url and it will load the id
43:02
look in the url and it will load the id
43:02
look in the url and it will load the id of the order automatically into this
43:03
of the order automatically into this
43:03
of the order automatically into this property so you can just read this
43:06
property so you can just read this
43:06
property so you can just read this property
43:06
property
43:06
property and it will contain the number that is
43:09
and it will contain the number that is
43:09
and it will contain the number that is specified in the url
43:10
specified in the url
43:10
specified in the url you can also use read-only properties so
43:13
you can also use read-only properties so
43:13
you can also use read-only properties so this is the is new
43:14
this is the is new
43:14
this is the is new and basically if the edited order id is
43:17
and basically if the edited order id is
43:17
and basically if the edited order id is zero i will consider the order as new
43:20
zero i will consider the order as new
43:20
zero i will consider the order as new if it's non-zero then it's existing
43:23
if it's non-zero then it's existing
43:23
if it's non-zero then it's existing order that i will be updating and here i
43:26
order that i will be updating and here i
43:26
order that i will be updating and here i have a
43:26
have a
43:26
have a the edited order and as you can see it's
43:29
the edited order and as you can see it's
43:29
the edited order and as you can see it's a dto object
43:30
a dto object
43:30
a dto object so if i press f12 i'm inside so i have
43:34
so if i press f12 i'm inside so i have
43:34
so if i press f12 i'm inside so i have all the properties of the object so i
43:37
all the properties of the object so i
43:37
all the properties of the object so i created the contact email i can use
43:39
created the contact email i can use
43:39
created the contact email i can use validation attributes
43:41
validation attributes
43:41
validation attributes and it will integrate with the vm
43:43
and it will integrate with the vm
43:43
and it will integrate with the vm validation so it's very easy to validate
43:45
validation so it's very easy to validate
43:45
validation so it's very easy to validate data
43:46
data
43:46
data and also there can be some special uh
43:50
and also there can be some special uh
43:50
and also there can be some special uh validation logic in the validate method
43:51
validation logic in the validate method
43:52
validation logic in the validate method so i can
43:53
so i can
43:54
so i can reject the orders that don't have any
43:56
reject the orders that don't have any
43:56
reject the orders that don't have any items
43:57
items
43:57
items for example
44:00
so let's go back and this is just a list
44:03
so let's go back and this is just a list
44:03
so let's go back and this is just a list of products
44:04
of products
44:04
of products it's used for this combo box so this is
44:07
it's used for this combo box so this is
44:07
it's used for this combo box so this is just
44:07
just
44:08
just a list of uh products that is the id
44:11
a list of uh products that is the id
44:11
a list of uh products that is the id name and unit price and that's it so i'm
44:13
name and unit price and that's it so i'm
44:13
name and unit price and that's it so i'm using these objects to populate my
44:16
using these objects to populate my
44:16
using these objects to populate my drop down list and in the pre-render if
44:19
drop down list and in the pre-render if
44:20
drop down list and in the pre-render if it's the first request
44:21
it's the first request
44:21
it's the first request which i can determine this way
44:24
which i can determine this way
44:24
which i can determine this way if it's not a new order i will load it
44:27
if it's not a new order i will load it
44:27
if it's not a new order i will load it from the database
44:28
from the database
44:28
from the database using my order service and if it's a new
44:31
using my order service and if it's a new
44:31
using my order service and if it's a new order i will just initialize the object
44:33
order i will just initialize the object
44:33
order i will just initialize the object so with some default values
44:35
so with some default values
44:35
so with some default values so i will i have to initialize this
44:38
so i will i have to initialize this
44:38
so i will i have to initialize this collection basically
44:40
collection basically
44:40
collection basically and that's it uh there are some other
44:42
and that's it uh there are some other
44:42
and that's it uh there are some other methods at order item and remove order
44:44
methods at order item and remove order
44:44
methods at order item and remove order item where i am just manipulating the
44:47
item where i am just manipulating the
44:47
item where i am just manipulating the order items collection
44:49
order items collection
44:49
order items collection of my edited order object and i'm
44:51
of my edited order object and i'm
44:51
of my edited order object and i'm recalculating price
44:54
recalculating price
44:54
recalculating price and basically these methods are called
44:56
and basically these methods are called
44:56
and basically these methods are called uh
44:57
uh
44:58
uh from these buttons so add new item and
45:00
from these buttons so add new item and
45:00
from these buttons so add new item and remove
45:01
remove
45:01
remove and basically because the remove the
45:03
and basically because the remove the
45:03
and basically because the remove the functions can get parameters
45:05
functions can get parameters
45:05
functions can get parameters because um i need to know which item i
45:08
because um i need to know which item i
45:08
because um i need to know which item i should remove so
45:09
should remove so
45:09
should remove so you can add the item as a parameter to
45:12
you can add the item as a parameter to
45:12
you can add the item as a parameter to the remove order item method
45:14
the remove order item method
45:14
the remove order item method and you can work with the parameter so
45:17
and you can work with the parameter so
45:18
and you can work with the parameter so it's very helpful that you can pass any
45:21
it's very helpful that you can pass any
45:21
it's very helpful that you can pass any argument to your viewmodel methods
45:23
argument to your viewmodel methods
45:23
argument to your viewmodel methods and call it from buttons and recalculate
45:26
and call it from buttons and recalculate
45:26
and call it from buttons and recalculate price it just delegates
45:27
price it just delegates
45:27
price it just delegates all the functionality to the business
45:29
all the functionality to the business
45:30
all the functionality to the business logic so as you can see the view model
45:31
logic so as you can see the view model
45:31
logic so as you can see the view model doesn't calculate
45:33
doesn't calculate
45:33
doesn't calculate itself it just asks the order service to
45:37
itself it just asks the order service to
45:37
itself it just asks the order service to calculate these things for me
45:40
calculate these things for me
45:40
calculate these things for me and the save changes it just saves also
45:43
and the save changes it just saves also
45:43
and the save changes it just saves also it's
45:44
it's
45:44
it's using order service to just save the
45:46
using order service to just save the
45:46
using order service to just save the data and it redirects back to
45:48
data and it redirects back to
45:48
data and it redirects back to the first page when i finish my
45:50
the first page when i finish my
45:50
the first page when i finish my annotations
45:51
annotations
45:51
annotations i will go back to the first page so
45:54
i will go back to the first page so
45:54
i will go back to the first page so that's a view model and as you can see
45:56
that's a view model and as you can see
45:56
that's a view model and as you can see i'm just working with this edited order
45:58
i'm just working with this edited order
45:58
i'm just working with this edited order object
45:59
object
45:59
object i just load some data in it then i can
46:01
i just load some data in it then i can
46:01
i just load some data in it then i can manipulate them with add and remove and
46:04
manipulate them with add and remove and
46:04
manipulate them with add and remove and that's that's it and the user interface
46:07
that's that's it and the user interface
46:08
that's that's it and the user interface the
46:08
the
46:08
the the markup of the page it's also i'm
46:11
the markup of the page it's also i'm
46:11
the markup of the page it's also i'm using a lot of bootstrap stuff
46:13
using a lot of bootstrap stuff
46:13
using a lot of bootstrap stuff so i'm using a form element
46:16
so i'm using a form element
46:16
so i'm using a form element with bootstrap css class form and the
46:19
with bootstrap css class form and the
46:19
with bootstrap css class form and the data context is very useful because you
46:21
data context is very useful because you
46:21
data context is very useful because you don't need to
46:24
don't need to
46:24
don't need to you can just the bindings inside of the
46:27
you can just the bindings inside of the
46:27
you can just the bindings inside of the object
46:28
object
46:28
object they are just evaluated on this edited
46:30
they are just evaluated on this edited
46:30
they are just evaluated on this edited order so i don't need to write edited
46:32
order so i don't need to write edited
46:32
order so i don't need to write edited order dot ide edited order dot created
46:35
order dot ide edited order dot created
46:35
order dot ide edited order dot created date and things like that
46:36
date and things like that
46:36
date and things like that i can just use data context it's it's
46:39
i can just use data context it's it's
46:39
i can just use data context it's it's very similar as in wpf you can just
46:42
very similar as in wpf you can just
46:42
very similar as in wpf you can just limit the data bindings to some scope
46:45
limit the data bindings to some scope
46:45
limit the data bindings to some scope yeah so i'm using the text box for
46:48
yeah so i'm using the text box for
46:48
yeah so i'm using the text box for entering the email and here i have the
46:51
entering the email and here i have the
46:52
entering the email and here i have the dynamic list of order items so i can add
46:54
dynamic list of order items so i can add
46:54
dynamic list of order items so i can add and remove rows
46:55
and remove rows
46:55
and remove rows and basically i'm using the repeater
46:57
and basically i'm using the repeater
46:57
and basically i'm using the repeater control which is bound to the order
47:00
control which is bound to the order
47:00
control which is bound to the order items collection
47:01
items collection
47:01
items collection so whenever you add an entry in the
47:04
so whenever you add an entry in the
47:04
so whenever you add an entry in the order items collection the repeater will
47:05
order items collection the repeater will
47:06
order items collection the repeater will create
47:06
create
47:06
create another piece of the ui and when you
47:09
another piece of the ui and when you
47:09
another piece of the ui and when you remove items from this
47:10
remove items from this
47:10
remove items from this the repeater will just delete the rows
47:13
the repeater will just delete the rows
47:13
the repeater will just delete the rows so
47:13
so
47:13
so also it's a very nice mvvm approach
47:16
also it's a very nice mvvm approach
47:16
also it's a very nice mvvm approach you uh you already see
47:20
you uh you already see
47:20
you uh you already see and these controls the combo boxes and
47:22
and these controls the combo boxes and
47:22
and these controls the combo boxes and text boxes they
47:23
text boxes they
47:23
text boxes they are invoking recalculate price method
47:27
are invoking recalculate price method
47:27
are invoking recalculate price method whenever they change so whenever i
47:29
whenever they change so whenever i
47:29
whenever they change so whenever i change anything in the ui
47:31
change anything in the ui
47:31
change anything in the ui the price will get recalculated yeah
47:35
the price will get recalculated yeah
47:35
the price will get recalculated yeah so that's it i'm also using validation
47:37
so that's it i'm also using validation
47:37
so that's it i'm also using validation on this page
47:38
on this page
47:38
on this page uh i can uh turn it off for some buttons
47:43
uh i can uh turn it off for some buttons
47:43
uh i can uh turn it off for some buttons because when i
47:43
because when i
47:43
because when i want to add new row i don't need to
47:47
want to add new row i don't need to
47:47
want to add new row i don't need to to validate the entire page because it
47:49
to validate the entire page because it
47:49
to validate the entire page because it still
47:50
still
47:50
still doesn't have to be finished yeah so
47:53
doesn't have to be finished yeah so
47:53
doesn't have to be finished yeah so these buttons have the validation switch
47:54
these buttons have the validation switch
47:54
these buttons have the validation switch off but of course this save changes
47:56
off but of course this save changes
47:56
off but of course this save changes button needs to validate the entire page
47:59
button needs to validate the entire page
47:59
button needs to validate the entire page before
47:59
before
47:59
before it's uh it's just start in the database
48:02
it's uh it's just start in the database
48:02
it's uh it's just start in the database so that's how you can use mdvm
48:06
so that's how you can use mdvm
48:06
so that's how you can use mdvm in uh in
48:09
in uh in
48:09
in uh in asp.net and this project is built on top
48:11
asp.net and this project is built on top
48:12
asp.net and this project is built on top of asp.net core
48:13
of asp.net core
48:13
of asp.net core but the syntax of the views and the view
48:15
but the syntax of the views and the view
48:15
but the syntax of the views and the view models will be
48:16
models will be
48:16
models will be exactly the same even if you are using
48:19
exactly the same even if you are using
48:19
exactly the same even if you are using old asp.net
48:21
old asp.net
48:21
old asp.net and that's what i would like to show as
48:24
and that's what i would like to show as
48:24
and that's what i would like to show as the last
48:25
the last
48:25
the last quick demo and that's uh the second
48:28
quick demo and that's uh the second
48:28
quick demo and that's uh the second project
48:29
project
48:29
project and it's hosted on the github i will
48:30
and it's hosted on the github i will
48:30
and it's hosted on the github i will post the link to the chat and
48:34
post the link to the chat and
48:34
post the link to the chat and basically it's a web forms application
48:38
basically it's a web forms application
48:38
basically it's a web forms application yeah you can see you can see there is a
48:41
yeah you can see you can see there is a
48:41
yeah you can see you can see there is a default spx file
48:43
default spx file
48:43
default spx file yeah with this syntax with all those
48:45
yeah with this syntax with all those
48:45
yeah with this syntax with all those running server and
48:46
running server and
48:46
running server and things like that there is global sax
48:49
things like that there is global sax
48:49
things like that there is global sax there is the master page in web forms
48:52
there is the master page in web forms
48:52
there is the master page in web forms yeah and it's running in dot net
48:55
yeah and it's running in dot net
48:55
yeah and it's running in dot net framework
48:57
framework
48:57
framework 472 yes so it runs on the old dotnet
49:01
472 yes so it runs on the old dotnet
49:01
472 yes so it runs on the old dotnet framework
49:01
framework
49:01
framework there is the web config it has all the
49:03
there is the web config it has all the
49:03
there is the web config it has all the attributes of
49:05
attributes of
49:05
attributes of old asp.net application and
49:08
old asp.net application and
49:08
old asp.net application and what i've done in this project is that i
49:11
what i've done in this project is that i
49:11
what i've done in this project is that i said
49:12
said
49:12
said okay web forms are great i have some
49:14
okay web forms are great i have some
49:14
okay web forms are great i have some pages in web forms and they are working
49:16
pages in web forms and they are working
49:16
pages in web forms and they are working but i want to create new pages in the
49:18
but i want to create new pages in the
49:18
but i want to create new pages in the application
49:19
application
49:19
application and i don't like web forms i would like
49:22
and i don't like web forms i would like
49:22
and i don't like web forms i would like to use
49:23
to use
49:23
to use vvm because of the mvvm the testability
49:26
vvm because of the mvvm the testability
49:26
vvm because of the mvvm the testability better separation of the presentation
49:28
better separation of the presentation
49:28
better separation of the presentation and business logic and all those
49:30
and business logic and all those
49:30
and business logic and all those advantages that
49:31
advantages that
49:31
advantages that dot vm brings to me so
49:34
dot vm brings to me so
49:34
dot vm brings to me so i have decided to install a dot vvm
49:38
i have decided to install a dot vvm
49:38
i have decided to install a dot vvm dot owen nuget package in the project
49:41
dot owen nuget package in the project
49:41
dot owen nuget package in the project yeah there is a lot more packages
49:45
yeah there is a lot more packages
49:45
yeah there is a lot more packages some of them are just dependencies of of
49:47
some of them are just dependencies of of
49:48
some of them are just dependencies of of the 3vm or
49:49
the 3vm or
49:49
the 3vm or some other packages but i have installed
49:51
some other packages but i have installed
49:51
some other packages but i have installed vm.0 and nougat package in the project
49:55
vm.0 and nougat package in the project
49:55
vm.0 and nougat package in the project i had to add some things like the
49:57
i had to add some things like the
49:57
i had to add some things like the startup file
49:58
startup file
49:58
startup file which adds dot vm in the request
50:01
which adds dot vm in the request
50:01
which adds dot vm in the request pipeline
50:02
pipeline
50:02
pipeline i have also created the vm startup which
50:05
i have also created the vm startup which
50:05
i have also created the vm startup which is basically a configuration of the vm
50:08
is basically a configuration of the vm
50:08
is basically a configuration of the vm and here i have the views and humorous
50:10
and here i have the views and humorous
50:10
and here i have the views and humorous folders
50:11
folders
50:11
folders and basically it's
50:14
and basically it's
50:14
and basically it's uh it's a very similar so let's run the
50:17
uh it's a very similar so let's run the
50:18
uh it's a very similar so let's run the application
50:22
and as you can see this is the default
50:24
and as you can see this is the default
50:24
and as you can see this is the default spx page when i
50:26
spx page when i
50:26
spx page when i show the source you will see there is uh
50:29
show the source you will see there is uh
50:29
show the source you will see there is uh our beloved view state i guess every web
50:32
our beloved view state i guess every web
50:32
our beloved view state i guess every web forms developer really likes this field
50:35
forms developer really likes this field
50:35
forms developer really likes this field because it helps you so much it the only
50:37
because it helps you so much it the only
50:37
because it helps you so much it the only problem is that it looks ugly and it's
50:39
problem is that it looks ugly and it's
50:39
problem is that it looks ugly and it's always bigger than you actually need but
50:43
always bigger than you actually need but
50:43
always bigger than you actually need but that's it that's web forms and when you
50:45
that's it that's web forms and when you
50:45
that's it that's web forms and when you navigate to the second page in the
50:47
navigate to the second page in the
50:47
navigate to the second page in the application
50:48
application
50:48
application like this about and if you look in the
50:51
like this about and if you look in the
50:51
like this about and if you look in the page source
50:52
page source
50:52
page source there is no view state because this page
50:55
there is no view state because this page
50:55
there is no view state because this page is written in dot vm
50:57
is written in dot vm
50:57
is written in dot vm so there is no view state nothing like
50:59
so there is no view state nothing like
50:59
so there is no view state nothing like that
51:00
that
51:00
that but the user may not even notice that
51:03
but the user may not even notice that
51:03
but the user may not even notice that these two pages are created
51:06
these two pages are created
51:06
these two pages are created in a different technology because they
51:08
in a different technology because they
51:08
in a different technology because they are using the same css
51:10
are using the same css
51:10
are using the same css they are using the same structure so
51:14
they are using the same structure so
51:14
they are using the same structure so yeah you can see it's it's still the
51:16
yeah you can see it's it's still the
51:16
yeah you can see it's it's still the same so
51:17
same so
51:17
same so this way i can combine dot vm and web
51:20
this way i can combine dot vm and web
51:20
this way i can combine dot vm and web forms in the same application
51:22
forms in the same application
51:22
forms in the same application let's look closer
51:25
because this is the web forms master
51:27
because this is the web forms master
51:27
because this is the web forms master page so
51:28
page so
51:28
page so here i have the menu and things that
51:31
here i have the menu and things that
51:31
here i have the menu and things that appear on the top
51:33
appear on the top
51:33
appear on the top and here i have a dot vv master page
51:37
and here i have a dot vv master page
51:37
and here i have a dot vv master page and it is using the same css styles also
51:40
and it is using the same css styles also
51:40
and it is using the same css styles also the menu structure is
51:41
the menu structure is
51:41
the menu structure is the same yeah i have just tubed the web
51:44
the same yeah i have just tubed the web
51:44
the same yeah i have just tubed the web forms page
51:45
forms page
51:45
forms page copied it into the vvm master page
51:49
copied it into the vvm master page
51:49
copied it into the vvm master page and i had to just change some things i
51:52
and i had to just change some things i
51:52
and i had to just change some things i just
51:53
just
51:53
just removed the runnet server stuff i
51:55
removed the runnet server stuff i
51:55
removed the runnet server stuff i removed
51:56
removed
51:56
removed this uh for example this default form
51:59
this uh for example this default form
51:59
this uh for example this default form and things like that because this
52:02
and things like that because this
52:02
and things like that because this process of transforming web forms called
52:05
process of transforming web forms called
52:05
process of transforming web forms called 2.vm code it's not difficult
52:08
2.vm code it's not difficult
52:08
2.vm code it's not difficult we have similar controls but some things
52:10
we have similar controls but some things
52:10
we have similar controls but some things there are some differences
52:12
there are some differences
52:12
there are some differences we have created a converter which can
52:14
we have created a converter which can
52:14
we have created a converter which can help with the migration
52:16
help with the migration
52:16
help with the migration if you go to tvm.com web forms
52:21
if you go to tvm.com web forms
52:21
if you go to tvm.com web forms so it's a some i call it cheat sheet
52:23
so it's a some i call it cheat sheet
52:23
so it's a some i call it cheat sheet because
52:24
because
52:24
because it uh describes the differences between
52:27
it uh describes the differences between
52:27
it uh describes the differences between web forms syntax and between dot vm
52:29
web forms syntax and between dot vm
52:29
web forms syntax and between dot vm syntax
52:30
syntax
52:30
syntax yeah so on the left side you have how
52:33
yeah so on the left side you have how
52:33
yeah so on the left side you have how the same thing is done in web forms on
52:35
the same thing is done in web forms on
52:35
the same thing is done in web forms on the right side is how it's done in the
52:36
the right side is how it's done in the
52:36
the right side is how it's done in the tvm
52:38
tvm
52:38
tvm and we also have a nice thing which is
52:40
and we also have a nice thing which is
52:40
and we also have a nice thing which is called converter
52:42
called converter
52:42
called converter where you can paste your aspx syntax and
52:45
where you can paste your aspx syntax and
52:45
where you can paste your aspx syntax and we can do
52:46
we can do
52:46
we can do some changes for you the important word
52:48
some changes for you the important word
52:48
some changes for you the important word is
52:49
is
52:49
is some changes because it's not 100
52:51
some changes because it's not 100
52:51
some changes because it's not 100 percent complete it's a 100
52:53
percent complete it's a 100
52:53
percent complete it's a 100 reliable but we can help with some
52:56
reliable but we can help with some
52:56
reliable but we can help with some things
52:57
things
52:57
things that you would spend a lot of time on so
53:00
that you would spend a lot of time on so
53:00
that you would spend a lot of time on so when you
53:01
when you
53:01
when you i can just take this
53:06
and copy and i can paste it
53:09
and copy and i can paste it
53:09
and copy and i can paste it to this uh this window so this is my web
53:13
to this uh this window so this is my web
53:13
to this uh this window so this is my web forms master page
53:14
forms master page
53:14
forms master page and when i click continue you can see
53:17
and when i click continue you can see
53:17
and when i click continue you can see there are some suggestions
53:18
there are some suggestions
53:18
there are some suggestions you can you can do so for example
53:22
you can you can do so for example
53:22
you can you can do so for example uh dot vm doesn't use the runnet server
53:26
uh dot vm doesn't use the runnet server
53:26
uh dot vm doesn't use the runnet server attribute so you can click on this
53:29
attribute so you can click on this
53:29
attribute so you can click on this and you can see the all the usages of of
53:32
and you can see the all the usages of of
53:32
and you can see the all the usages of of running server it's somewhere here
53:34
running server it's somewhere here
53:34
running server it's somewhere here so yeah so it can also highlight where
53:38
so yeah so it can also highlight where
53:38
so yeah so it can also highlight where it's done
53:39
it's done
53:39
it's done and you can just say apply the
53:41
and you can just say apply the
53:41
and you can just say apply the individual fix so for example
53:43
individual fix so for example
53:43
individual fix so for example i can click on it and you see it was
53:45
i can click on it and you see it was
53:45
i can click on it and you see it was removed or i can click if
53:47
removed or i can click if
53:47
removed or i can click if if you believe our application you can
53:49
if you believe our application you can
53:50
if you believe our application you can just click
53:50
just click
53:50
just click on apply all fixes and all the running
53:53
on apply all fixes and all the running
53:53
on apply all fixes and all the running servers are gone
53:54
servers are gone
53:54
servers are gone and the same thing is the with the
53:56
and the same thing is the with the
53:56
and the same thing is the with the content placeholder
53:57
content placeholder
53:57
content placeholder because for example in web forms
54:00
because for example in web forms
54:00
because for example in web forms the control is named asp content
54:02
the control is named asp content
54:02
the control is named asp content placeholder in the tvm
54:05
placeholder in the tvm
54:05
placeholder in the tvm the name is the same but the prefix is
54:07
the name is the same but the prefix is
54:07
the name is the same but the prefix is different so apply fix
54:09
different so apply fix
54:09
different so apply fix and you can see it was changed to dot
54:11
and you can see it was changed to dot
54:11
and you can see it was changed to dot content placeholder
54:12
content placeholder
54:12
content placeholder we are constantly improving this app so
54:14
we are constantly improving this app so
54:14
we are constantly improving this app so it will get more and more transformation
54:17
it will get more and more transformation
54:17
it will get more and more transformation so so there are some things we still
54:19
so so there are some things we still
54:19
so so there are some things we still cannot translate for example
54:21
cannot translate for example
54:21
cannot translate for example for these bindings yeah you need to
54:24
for these bindings yeah you need to
54:24
for these bindings yeah you need to do them uh rewrite them change them by
54:27
do them uh rewrite them change them by
54:27
do them uh rewrite them change them by hand
54:27
hand
54:27
hand but still at least something uh
54:31
but still at least something uh
54:31
but still at least something uh you don't need to do on every page so
54:33
you don't need to do on every page so
54:33
you don't need to do on every page so this is the converter
54:35
this is the converter
54:35
this is the converter feel free to try it and give us feedback
54:37
feel free to try it and give us feedback
54:37
feel free to try it and give us feedback on what transformations you would
54:39
on what transformations you would
54:39
on what transformations you would like to see in this tool of course it
54:41
like to see in this tool of course it
54:41
like to see in this tool of course it won't be
54:42
won't be
54:42
won't be 100 reliable all the time but still
54:46
100 reliable all the time but still
54:46
100 reliable all the time but still it can help you with the repeatable
54:49
it can help you with the repeatable
54:49
it can help you with the repeatable tasks you would need to you would need
54:52
tasks you would need to you would need
54:52
tasks you would need to you would need to do
54:53
to do
54:53
to do so that's the converter and uh
54:56
so that's the converter and uh
54:56
so that's the converter and uh if you look here um this uh
54:59
if you look here um this uh
54:59
if you look here um this uh this application is hosted on github and
55:01
this application is hosted on github and
55:01
this application is hosted on github and we have a lot of branches there
55:03
we have a lot of branches there
55:03
we have a lot of branches there and basically these branches
55:07
and basically these branches
55:07
and basically these branches show the entire process of the
55:08
show the entire process of the
55:08
show the entire process of the modernization of the application
55:11
modernization of the application
55:11
modernization of the application so in the first branch it's just
55:14
so in the first branch it's just
55:14
so in the first branch it's just plain web forms there's no dot vvm
55:16
plain web forms there's no dot vvm
55:16
plain web forms there's no dot vvm nothing like that it's a pure web forms
55:18
nothing like that it's a pure web forms
55:18
nothing like that it's a pure web forms application the second
55:21
application the second
55:21
application the second branch shows one step further how it
55:24
branch shows one step further how it
55:24
branch shows one step further how it looks like when you
55:25
looks like when you
55:25
looks like when you install dot vm nuget package in the
55:26
install dot vm nuget package in the
55:26
install dot vm nuget package in the application
55:28
application
55:28
application this third branch which i'm showing it's
55:31
this third branch which i'm showing it's
55:31
this third branch which i'm showing it's a combination of web forms
55:32
a combination of web forms
55:32
a combination of web forms and dot vm so you can see there is still
55:35
and dot vm so you can see there is still
55:35
and dot vm so you can see there is still some code in web forms
55:37
some code in web forms
55:37
some code in web forms yeah so run it server and some code in
55:40
yeah so run it server and some code in
55:40
yeah so run it server and some code in the vm so you can see the view model and
55:43
the vm so you can see the view model and
55:43
the vm so you can see the view model and things like that yeah so this is the
55:46
things like that yeah so this is the
55:46
things like that yeah so this is the migration in progress because uh if you
55:49
migration in progress because uh if you
55:49
migration in progress because uh if you have a large application and you install
55:51
have a large application and you install
55:51
have a large application and you install the tvm you can replace page by page
55:54
the tvm you can replace page by page
55:54
the tvm you can replace page by page and and every step the application still
55:57
and and every step the application still
55:57
and and every step the application still works and can be deployed to the
55:59
works and can be deployed to the
55:59
works and can be deployed to the production
56:00
production
56:00
production so you can fix bugs in the old parts you
56:02
so you can fix bugs in the old parts you
56:02
so you can fix bugs in the old parts you can add new features and you can
56:05
can add new features and you can
56:05
can add new features and you can modernize on the fly so you can you
56:08
modernize on the fly so you can you
56:08
modernize on the fly so you can you don't need to
56:09
don't need to
56:09
don't need to just say okay we are not touching this
56:11
just say okay we are not touching this
56:11
just say okay we are not touching this old application anymore let's reserve
56:13
old application anymore let's reserve
56:13
old application anymore let's reserve next three years and
56:14
next three years and
56:14
next three years and rewrite everything from scratch because
56:17
rewrite everything from scratch because
56:17
rewrite everything from scratch because the users would be stuck for three years
56:19
the users would be stuck for three years
56:19
the users would be stuck for three years without any changes without any updates
56:22
without any changes without any updates
56:22
without any changes without any updates yeah you can do this on the fly and in
56:25
yeah you can do this on the fly and in
56:25
yeah you can do this on the fly and in the fourth branch
56:27
the fourth branch
56:27
the fourth branch it's basically how it looks like when
56:30
it's basically how it looks like when
56:30
it's basically how it looks like when you got rid of the vva sorry of the web
56:33
you got rid of the vva sorry of the web
56:33
you got rid of the vva sorry of the web forms
56:33
forms
56:33
forms but you are still on the dotnet
56:35
but you are still on the dotnet
56:35
but you are still on the dotnet framework and the last thing
56:37
framework and the last thing
56:37
framework and the last thing is basically where i changed the cs
56:40
is basically where i changed the cs
56:40
is basically where i changed the cs approach syntax
56:41
approach syntax
56:41
approach syntax so the css file wouldn't look like
56:45
so the css file wouldn't look like
56:45
so the css file wouldn't look like in the old days so that's it this long
56:49
in the old days so that's it this long
56:49
in the old days so that's it this long monster but it will look like in the sp
56:52
monster but it will look like in the sp
56:52
monster but it will look like in the sp net core way so it will fit
56:54
net core way so it will fit
56:54
net core way so it will fit on just one screen yeah so and but
56:57
on just one screen yeah so and but
56:58
on just one screen yeah so and but all the views and the view models they
56:59
all the views and the view models they
56:59
all the views and the view models they will remain untouched because the syntax
57:02
will remain untouched because the syntax
57:02
will remain untouched because the syntax of dot vm is
57:03
of dot vm is
57:03
of dot vm is still the same on the framework and
57:05
still the same on the framework and
57:05
still the same on the framework and on.net car
57:07
on.net car
57:07
on.net car yeah so this is the modernization
57:09
yeah so this is the modernization
57:09
yeah so this is the modernization scenario i will post the link to
57:11
scenario i will post the link to
57:12
scenario i will post the link to to the chat so you can see the github
57:13
to the chat so you can see the github
57:14
to the chat so you can see the github repo uh
57:15
repo uh
57:15
repo uh or if you want to google for it i think
57:17
or if you want to google for it i think
57:17
or if you want to google for it i think it should be
57:18
it should be
57:18
it should be uh it can be found pretty easily dot vm
57:21
uh it can be found pretty easily dot vm
57:21
uh it can be found pretty easily dot vm samples
57:22
samples
57:22
samples web forms migration that's it
57:25
web forms migration that's it
57:26
web forms migration that's it and all the the entire process is
57:28
and all the the entire process is
57:28
and all the the entire process is described here so
57:29
described here so
57:29
described here so feel free to uh see what's
57:32
feel free to uh see what's
57:32
feel free to uh see what's done in all the branches and you can
57:36
done in all the branches and you can
57:36
done in all the branches and you can look at the code how it evolved so
57:39
look at the code how it evolved so
57:39
look at the code how it evolved so that's
57:40
that's
57:40
that's that's the modernization story with dot
57:42
that's the modernization story with dot
57:42
that's the modernization story with dot vm i hope that
57:44
vm i hope that
57:44
vm i hope that uh uh you had some fun
57:47
uh uh you had some fun
57:47
uh uh you had some fun looking at these uh these demos and of
57:50
looking at these uh these demos and of
57:50
looking at these uh these demos and of course i'm available for any question so
57:53
course i'm available for any question so
57:53
course i'm available for any question so uh
57:54
uh
57:54
uh i'm uh thanks for thanks for watching
57:58
i'm uh thanks for thanks for watching
57:58
i'm uh thanks for thanks for watching what an amazing session thomas it was
58:00
what an amazing session thomas it was
58:00
what an amazing session thomas it was you started from very scratch you were
58:02
you started from very scratch you were
58:02
you started from very scratch you were talking about what are the benefits with
58:04
talking about what are the benefits with
58:04
talking about what are the benefits with this slide then you went on to
58:06
this slide then you went on to
58:06
this slide then you went on to have some beautiful projects where you
58:08
have some beautiful projects where you
58:08
have some beautiful projects where you explain every single bit of it
58:10
explain every single bit of it
58:10
explain every single bit of it and what are different features that you
58:11
and what are different features that you
58:11
and what are different features that you can use uh but quick question
58:13
can use uh but quick question
58:14
can use uh but quick question thomas is that how you you did
58:17
thomas is that how you you did
58:17
thomas is that how you you did say that you first made a calculator
58:19
say that you first made a calculator
58:19
say that you first made a calculator application right and you added the
58:20
application right and you added the
58:20
application right and you added the nuked packages
58:21
nuked packages
58:21
nuked packages is it how should one add a dot dvm to an
58:24
is it how should one add a dot dvm to an
58:24
is it how should one add a dot dvm to an existing project if it's already there
58:26
existing project if it's already there
58:26
existing project if it's already there right suppose there's a web form
58:27
right suppose there's a web form
58:27
right suppose there's a web form application already there
58:28
application already there
58:28
application already there but it's been running it's in the
58:29
but it's been running it's in the
58:30
but it's been running it's in the products how should one add vbm into the
58:32
products how should one add vbm into the
58:32
products how should one add vbm into the existing project and what may should be
58:34
existing project and what may should be
58:34
existing project and what may should be some
58:34
some
58:34
some of the best practices one one should do
58:36
of the best practices one one should do
58:36
of the best practices one one should do that
58:38
that
58:38
that okay um the the instructions of how to
58:41
okay um the the instructions of how to
58:41
okay um the the instructions of how to add those videos in the project
58:43
add those videos in the project
58:43
add those videos in the project they are uh they are basically listed
58:46
they are uh they are basically listed
58:46
they are uh they are basically listed here in
58:46
here in
58:46
here in on this repo so the step two is exactly
58:50
on this repo so the step two is exactly
58:50
on this repo so the step two is exactly what you need to do so you will install
58:52
what you need to do so you will install
58:52
what you need to do so you will install vvm.on
58:53
vvm.on
58:53
vvm.on you get package in the application then
58:56
you get package in the application then
58:56
you get package in the application then you also need to install microsoft owen
58:58
you also need to install microsoft owen
58:58
you also need to install microsoft owen hosts stem web which does the
59:00
hosts stem web which does the
59:00
hosts stem web which does the integration between
59:02
integration between
59:02
integration between all asp.net web forms and the owen which
59:04
all asp.net web forms and the owen which
59:04
all asp.net web forms and the owen which is
59:05
is
59:05
is used by the tvm maybe you will already
59:08
used by the tvm maybe you will already
59:08
used by the tvm maybe you will already have this package in the application for
59:09
have this package in the application for
59:10
have this package in the application for example if you have been using signalr
59:11
example if you have been using signalr
59:11
example if you have been using signalr or web api these are also using this
59:14
or web api these are also using this
59:14
or web api these are also using this package
59:15
package
59:15
package and then you need to add two files the
59:17
and then you need to add two files the
59:17
and then you need to add two files the startup and between your startup
59:19
startup and between your startup
59:20
startup and between your startup and if you want the nice icons for
59:23
and if you want the nice icons for
59:23
and if you want the nice icons for dot vvm pages you also need to edit the
59:26
dot vvm pages you also need to edit the
59:26
dot vvm pages you also need to edit the cs approach and add this good somewhere
59:29
cs approach and add this good somewhere
59:30
cs approach and add this good somewhere and the good news is then that in
59:33
and the good news is then that in
59:33
and the good news is then that in the new version of vvm extension
59:36
the new version of vvm extension
59:36
the new version of vvm extension which will be released in hopefully two
59:38
which will be released in hopefully two
59:38
which will be released in hopefully two or three weeks
59:40
or three weeks
59:40
or three weeks there will be a menu item there in here
59:43
there will be a menu item there in here
59:43
there will be a menu item there in here there will be something like at vvm
59:46
there will be something like at vvm
59:46
there will be something like at vvm support so if you will have the web
59:48
support so if you will have the web
59:48
support so if you will have the web forms project
59:49
forms project
59:49
forms project you will be able to just click on add
59:51
you will be able to just click on add
59:51
you will be able to just click on add web form support
59:53
web form support
59:53
web form support there will be a window which will
59:55
there will be a window which will
59:55
there will be a window which will explain what
59:56
explain what
59:56
explain what it will do to your project because of
59:59
it will do to your project because of
59:59
it will do to your project because of course this
59:59
course this
1:00:00
course this is quite a lot of things to be done and
1:00:02
is quite a lot of things to be done and
1:00:02
is quite a lot of things to be done and then
1:00:03
then
1:00:03
then if you confirm it will install the
1:00:06
if you confirm it will install the
1:00:06
if you confirm it will install the packages and it will add those files to
1:00:08
packages and it will add those files to
1:00:08
packages and it will add those files to the project so hopefully this will be
1:00:10
the project so hopefully this will be
1:00:10
the project so hopefully this will be even easier
1:00:12
even easier
1:00:12
even easier than it is today uh but uh
1:00:15
than it is today uh but uh
1:00:15
than it is today uh but uh it's we are still testing this extension
1:00:17
it's we are still testing this extension
1:00:17
it's we are still testing this extension because there's a couple of things that
1:00:19
because there's a couple of things that
1:00:19
because there's a couple of things that uh
1:00:19
uh
1:00:20
uh we need to take care of for example if
1:00:22
we need to take care of for example if
1:00:22
we need to take care of for example if you are running on the older version
1:00:24
you are running on the older version
1:00:24
you are running on the older version of that net framework then then support
1:00:27
of that net framework then then support
1:00:27
of that net framework then then support it with dot vm
1:00:28
it with dot vm
1:00:28
it with dot vm that complicates things a little bit so
1:00:31
that complicates things a little bit so
1:00:31
that complicates things a little bit so there's
1:00:32
there's
1:00:32
there's quite a lot of things we need to check
1:00:34
quite a lot of things we need to check
1:00:34
quite a lot of things we need to check in order
1:00:35
in order
1:00:35
in order we want to ruin your project with
1:00:37
we want to ruin your project with
1:00:37
we want to ruin your project with something that would be
1:00:38
something that would be
1:00:38
something that would be difficult to revert
1:00:41
difficult to revert
1:00:42
difficult to revert uh having said that uh thomas you also
1:00:44
uh having said that uh thomas you also
1:00:44
uh having said that uh thomas you also mentioned that
1:00:45
mentioned that
1:00:45
mentioned that there's a vital role of knockout js that
1:00:47
there's a vital role of knockout js that
1:00:47
there's a vital role of knockout js that in this dot ppf
1:00:48
in this dot ppf
1:00:48
in this dot ppf so is there any is there any moment when
1:00:51
so is there any is there any moment when
1:00:51
so is there any is there any moment when someone has to go around and mess with
1:00:53
someone has to go around and mess with
1:00:53
someone has to go around and mess with that
1:00:53
that
1:00:53
that there's something wrong or it's all
1:00:54
there's something wrong or it's all
1:00:54
there's something wrong or it's all handled by the framework itself
1:00:57
handled by the framework itself
1:00:57
handled by the framework itself well uh if you want to uh
1:01:00
well uh if you want to uh
1:01:00
well uh if you want to uh create pages uh with the controls which
1:01:04
create pages uh with the controls which
1:01:04
create pages uh with the controls which are already present
1:01:05
are already present
1:01:05
are already present in in the tvm and if you go to
1:01:09
in in the tvm and if you go to
1:01:09
in in the tvm and if you go to the tvm com slash docs
1:01:12
the tvm com slash docs
1:01:12
the tvm com slash docs we have a list of components there and
1:01:14
we have a list of components there and
1:01:14
we have a list of components there and we have uh documentation
1:01:16
we have uh documentation
1:01:16
we have uh documentation of course for the framework uh
1:01:19
of course for the framework uh
1:01:19
of course for the framework uh yeah so if you look at the building
1:01:21
yeah so if you look at the building
1:01:21
yeah so if you look at the building controls in the framework there's
1:01:23
controls in the framework there's
1:01:23
controls in the framework there's quite a lot of them the most important
1:01:25
quite a lot of them the most important
1:01:25
quite a lot of them the most important for me is grid view
1:01:27
for me is grid view
1:01:27
for me is grid view and repeater and all those things but
1:01:30
and repeater and all those things but
1:01:30
and repeater and all those things but there's
1:01:30
there's
1:01:30
there's quite a lot of controls uh so if you
1:01:33
quite a lot of controls uh so if you
1:01:33
quite a lot of controls uh so if you just stick to these controls
1:01:35
just stick to these controls
1:01:35
just stick to these controls you shouldn't have to write javascript
1:01:37
you shouldn't have to write javascript
1:01:38
you shouldn't have to write javascript you shouldn't need javascript
1:01:39
you shouldn't need javascript
1:01:39
you shouldn't need javascript but of course if you uh want to
1:01:42
but of course if you uh want to
1:01:42
but of course if you uh want to do something special or if you want to
1:01:45
do something special or if you want to
1:01:45
do something special or if you want to for example integrate some third-party
1:01:47
for example integrate some third-party
1:01:47
for example integrate some third-party controls
1:01:47
controls
1:01:48
controls then you can do it with javascript and
1:01:51
then you can do it with javascript and
1:01:51
then you can do it with javascript and actually i think that if you know
1:01:54
actually i think that if you know
1:01:54
actually i think that if you know javascript you can be
1:01:55
javascript you can be
1:01:55
javascript you can be way more powerful without vvm because
1:01:57
way more powerful without vvm because
1:01:57
way more powerful without vvm because you can do the integration of
1:01:59
you can do the integration of
1:01:59
you can do the integration of those vm things and the rest for example
1:02:02
those vm things and the rest for example
1:02:02
those vm things and the rest for example until
1:02:02
until
1:02:02
until today we don't have uh integration with
1:02:05
today we don't have uh integration with
1:02:05
today we don't have uh integration with signal r
1:02:06
signal r
1:02:06
signal r so if you want to update something in
1:02:08
so if you want to update something in
1:02:08
so if you want to update something in the page for
1:02:09
the page for
1:02:09
the page for in the real time uh then you need to
1:02:12
in the real time uh then you need to
1:02:12
in the real time uh then you need to write a piece of javascript that will
1:02:13
write a piece of javascript that will
1:02:14
write a piece of javascript that will create the signal our connection
1:02:15
create the signal our connection
1:02:15
create the signal our connection and that will interact with the view
1:02:17
and that will interact with the view
1:02:17
and that will interact with the view model there is an api
1:02:19
model there is an api
1:02:19
model there is an api which you can call from javascript to
1:02:21
which you can call from javascript to
1:02:21
which you can call from javascript to interact with the vm parts of the page
1:02:23
interact with the vm parts of the page
1:02:23
interact with the vm parts of the page so you can touch the view model you can
1:02:25
so you can touch the view model you can
1:02:25
so you can touch the view model you can read values from it
1:02:26
read values from it
1:02:26
read values from it you can write to it you have just to be
1:02:28
you can write to it you have just to be
1:02:28
you can write to it you have just to be a little bit careful
1:02:30
a little bit careful
1:02:30
a little bit careful in order to not ruin something but
1:02:33
in order to not ruin something but
1:02:33
in order to not ruin something but it's possible and if you know javascript
1:02:35
it's possible and if you know javascript
1:02:35
it's possible and if you know javascript it will be very easy
1:02:37
it will be very easy
1:02:37
it will be very easy easy to do so i think that 90 of the
1:02:40
easy to do so i think that 90 of the
1:02:40
easy to do so i think that 90 of the things can be done without javascript
1:02:42
things can be done without javascript
1:02:42
things can be done without javascript and if you need something special
1:02:44
and if you need something special
1:02:44
and if you need something special typically it's just few lines of
1:02:46
typically it's just few lines of
1:02:46
typically it's just few lines of javascript to
1:02:48
javascript to
1:02:48
javascript to wire all those things up so and in the
1:02:51
wire all those things up so and in the
1:02:51
wire all those things up so and in the next version of
1:02:52
next version of
1:02:52
next version of the 3vm and the tvm 3.0 we plan to make
1:02:56
the 3vm and the tvm 3.0 we plan to make
1:02:56
the 3vm and the tvm 3.0 we plan to make this javascript integration
1:02:58
this javascript integration
1:02:58
this javascript integration even simpler and we also plan to use the
1:03:01
even simpler and we also plan to use the
1:03:01
even simpler and we also plan to use the js modules
1:03:03
js modules
1:03:03
js modules which is very very popular today
1:03:06
which is very very popular today
1:03:06
which is very very popular today so it's possible and you will need it in
1:03:10
so it's possible and you will need it in
1:03:10
so it's possible and you will need it in some advanced scenarios but for
1:03:13
some advanced scenarios but for
1:03:13
some advanced scenarios but for most of the things you don't need it and
1:03:15
most of the things you don't need it and
1:03:15
most of the things you don't need it and all those things
1:03:16
all those things
1:03:16
all those things i have been showing today i didn't uh
1:03:18
i have been showing today i didn't uh
1:03:18
i have been showing today i didn't uh have to write any
1:03:20
have to write any
1:03:20
have to write any a single line of javascript
1:03:23
a single line of javascript
1:03:23
a single line of javascript yeah and definitely usually one of the
1:03:24
yeah and definitely usually one of the
1:03:24
yeah and definitely usually one of the examples that you it does supports
1:03:26
examples that you it does supports
1:03:26
examples that you it does supports two-way binding
1:03:27
two-way binding
1:03:27
two-way binding right this dot vpm on the flight which
1:03:30
right this dot vpm on the flight which
1:03:30
right this dot vpm on the flight which is kind of really my new features and
1:03:31
is kind of really my new features and
1:03:31
is kind of really my new features and people just love it
1:03:33
people just love it
1:03:33
people just love it and that brings that reminds me of
1:03:34
and that brings that reminds me of
1:03:34
and that brings that reminds me of something of a very modern application
1:03:37
something of a very modern application
1:03:37
something of a very modern application that we built a single page application
1:03:39
that we built a single page application
1:03:39
that we built a single page application is there any way that this framework
1:03:41
is there any way that this framework
1:03:41
is there any way that this framework helps us to
1:03:42
helps us to
1:03:42
helps us to go ahead and build this type of
1:03:44
go ahead and build this type of
1:03:44
go ahead and build this type of applications yeah
1:03:46
applications yeah
1:03:46
applications yeah that's that's what i always forgot to
1:03:48
that's that's what i always forgot to
1:03:48
that's that's what i always forgot to mention
1:03:49
mention
1:03:49
mention if you look uh here in the master page
1:03:53
if you look uh here in the master page
1:03:53
if you look uh here in the master page uh i've been using the content
1:03:55
uh i've been using the content
1:03:55
uh i've been using the content placeholder control
1:03:56
placeholder control
1:03:56
placeholder control and if you want to make single page apps
1:03:59
and if you want to make single page apps
1:03:59
and if you want to make single page apps from this
1:04:01
from this
1:04:01
from this demo i have been using you can just
1:04:03
demo i have been using you can just
1:04:03
demo i have been using you can just change it to spa content placeholder
1:04:06
change it to spa content placeholder
1:04:06
change it to spa content placeholder i don't know why there are those
1:04:08
i don't know why there are those
1:04:08
i don't know why there are those squiggles
1:04:10
squiggles
1:04:10
squiggles but if you just change this
1:04:13
but if you just change this
1:04:13
but if you just change this and that's the only change you actually
1:04:15
and that's the only change you actually
1:04:15
and that's the only change you actually need to do the application
1:04:17
need to do the application
1:04:17
need to do the application is spa yeah so that's
1:04:20
is spa yeah so that's
1:04:20
is spa yeah so that's that's how how you can do it i i
1:04:23
that's how how you can do it i i
1:04:23
that's how how you can do it i i maybe i should use spas by default in
1:04:26
maybe i should use spas by default in
1:04:26
maybe i should use spas by default in in my application but still it it
1:04:29
in my application but still it it
1:04:29
in my application but still it it depends i
1:04:30
depends i
1:04:30
depends i i i'm still maybe a little bit old
1:04:32
i i'm still maybe a little bit old
1:04:32
i i'm still maybe a little bit old school
1:04:33
school
1:04:33
school i'm using sba only when they are
1:04:36
i'm using sba only when they are
1:04:36
i'm using sba only when they are necessary
1:04:36
necessary
1:04:36
necessary but if they are not necessary i'm not
1:04:38
but if they are not necessary i'm not
1:04:38
but if they are not necessary i'm not using them by default
1:04:39
using them by default
1:04:40
using them by default but maybe it's the new default yeah i
1:04:43
but maybe it's the new default yeah i
1:04:43
but maybe it's the new default yeah i remember you telling me you started with
1:04:44
remember you telling me you started with
1:04:44
remember you telling me you started with video basics so
1:04:46
video basics so
1:04:46
video basics so maybe we can understand it so thomas
1:04:49
maybe we can understand it so thomas
1:04:49
maybe we can understand it so thomas thomas uh
1:04:50
thomas uh
1:04:50
thomas uh just talking about the the different
1:04:52
just talking about the the different
1:04:52
just talking about the the different versions that you have right how should
1:04:54
versions that you have right how should
1:04:54
versions that you have right how should one actually upgrade it right
1:04:56
one actually upgrade it right
1:04:56
one actually upgrade it right if what are the first questions what are
1:04:58
if what are the first questions what are
1:04:58
if what are the first questions what are different versions available
1:04:59
different versions available
1:04:59
different versions available and if someone is using the old version
1:05:00
and if someone is using the old version
1:05:00
and if someone is using the old version how should one upgrade it
1:05:03
how should one upgrade it
1:05:03
how should one upgrade it yeah so the current version is always on
1:05:05
yeah so the current version is always on
1:05:05
yeah so the current version is always on the nougat so
1:05:06
the nougat so
1:05:06
the nougat so right now the current version is 2.4
1:05:10
right now the current version is 2.4
1:05:10
right now the current version is 2.4 we will be releasing 2.5 hopefully this
1:05:13
we will be releasing 2.5 hopefully this
1:05:13
we will be releasing 2.5 hopefully this or next week something like that
1:05:16
or next week something like that
1:05:16
or next week something like that and the next version will be 3.0 which
1:05:19
and the next version will be 3.0 which
1:05:19
and the next version will be 3.0 which will bring some more significant
1:05:22
will bring some more significant
1:05:22
will bring some more significant features 2.5 it's just an incremental
1:05:25
features 2.5 it's just an incremental
1:05:25
features 2.5 it's just an incremental update with something like this
1:05:26
update with something like this
1:05:26
update with something like this but basically the only thing you need to
1:05:28
but basically the only thing you need to
1:05:28
but basically the only thing you need to do is to
1:05:29
do is to
1:05:30
do is to just update your nougat package and
1:05:31
just update your nougat package and
1:05:32
just update your nougat package and that's it and also i would
1:05:34
that's it and also i would
1:05:34
that's it and also i would recommend to watch the release notes on
1:05:37
recommend to watch the release notes on
1:05:37
recommend to watch the release notes on our github
1:05:38
our github
1:05:38
our github because in every release we have some
1:05:41
because in every release we have some
1:05:41
because in every release we have some very tiny breaking changes
1:05:43
very tiny breaking changes
1:05:43
very tiny breaking changes and if you
1:05:46
and if you
1:05:46
and if you uh if you are unlucky you will need to
1:05:49
uh if you are unlucky you will need to
1:05:49
uh if you are unlucky you will need to change
1:05:50
change
1:05:50
change something in the application most of the
1:05:52
something in the application most of the
1:05:52
something in the application most of the time you will get a compile error for
1:05:54
time you will get a compile error for
1:05:54
time you will get a compile error for example we rename some method
1:05:55
example we rename some method
1:05:56
example we rename some method to in order the name is more clear
1:05:59
to in order the name is more clear
1:05:59
to in order the name is more clear so the compiler will tell you that
1:06:00
so the compiler will tell you that
1:06:00
so the compiler will tell you that something is broken but
1:06:02
something is broken but
1:06:02
something is broken but still you will i recommend to go through
1:06:06
still you will i recommend to go through
1:06:06
still you will i recommend to go through the release notes it's not so long
1:06:08
the release notes it's not so long
1:06:08
the release notes it's not so long and you can just read the titles if you
1:06:10
and you can just read the titles if you
1:06:10
and you can just read the titles if you are using the feature
1:06:12
are using the feature
1:06:12
are using the feature we are talking about and see if there
1:06:15
we are talking about and see if there
1:06:15
we are talking about and see if there are any changes because
1:06:16
are any changes because
1:06:16
are any changes because sometimes we have to do some small
1:06:19
sometimes we have to do some small
1:06:19
sometimes we have to do some small breaking change
1:06:21
breaking change
1:06:21
breaking change all right uh thomas as you said that uh
1:06:23
all right uh thomas as you said that uh
1:06:24
all right uh thomas as you said that uh this uh this entire framework is
1:06:25
this uh this entire framework is
1:06:25
this uh this entire framework is actually built on asp.net core it does
1:06:27
actually built on asp.net core it does
1:06:27
actually built on asp.net core it does support
1:06:28
support
1:06:28
support right it's built on it so we have seen
1:06:30
right it's built on it so we have seen
1:06:30
right it's built on it so we have seen that the uh these frameworks are
1:06:32
that the uh these frameworks are
1:06:32
that the uh these frameworks are getting new updates every other day
1:06:34
getting new updates every other day
1:06:34
getting new updates every other day fights we have an lta support and
1:06:36
fights we have an lta support and
1:06:36
fights we have an lta support and there's a
1:06:36
there's a
1:06:36
there's a version that gets outdated in just maybe
1:06:38
version that gets outdated in just maybe
1:06:38
version that gets outdated in just maybe like 24 or maybe 18 months
1:06:41
like 24 or maybe 18 months
1:06:41
like 24 or maybe 18 months right so so what should be the right
1:06:42
right so so what should be the right
1:06:42
right so so what should be the right approach which version of hp.net core
1:06:44
approach which version of hp.net core
1:06:44
approach which version of hp.net core one should be using if they're
1:06:46
one should be using if they're
1:06:46
one should be using if they're building application now yeah so uh
1:06:49
building application now yeah so uh
1:06:49
building application now yeah so uh the oldest version we support is
1:06:52
the oldest version we support is
1:06:52
the oldest version we support is uh the asp.net core 2.0 which is not
1:06:56
uh the asp.net core 2.0 which is not
1:06:56
uh the asp.net core 2.0 which is not supported by microsoft
1:06:57
supported by microsoft
1:06:57
supported by microsoft but still we we in our company have some
1:07:00
but still we we in our company have some
1:07:00
but still we we in our company have some applications we didn't have time to
1:07:02
applications we didn't have time to
1:07:02
applications we didn't have time to migrate so we still support this old
1:07:03
migrate so we still support this old
1:07:03
migrate so we still support this old version
1:07:04
version
1:07:04
version and of course we also always try to
1:07:08
and of course we also always try to
1:07:08
and of course we also always try to target the most current version so
1:07:10
target the most current version so
1:07:10
target the most current version so i recommend to stay on the most current
1:07:13
i recommend to stay on the most current
1:07:13
i recommend to stay on the most current version of sp net core
1:07:14
version of sp net core
1:07:14
version of sp net core not only because the tv of dot vvm but
1:07:17
not only because the tv of dot vvm but
1:07:17
not only because the tv of dot vvm but also because of getting
1:07:19
also because of getting
1:07:19
also because of getting all you know all new features and things
1:07:21
all you know all new features and things
1:07:22
all you know all new features and things like that
1:07:22
like that
1:07:22
like that and if you update regularly
1:07:25
and if you update regularly
1:07:25
and if you update regularly to every new release it's not so much
1:07:28
to every new release it's not so much
1:07:28
to every new release it's not so much work but if you skip some releases and
1:07:31
work but if you skip some releases and
1:07:31
work but if you skip some releases and then
1:07:31
then
1:07:31
then you upgrading to two or three
1:07:34
you upgrading to two or three
1:07:34
you upgrading to two or three versions further then typically you
1:07:37
versions further then typically you
1:07:37
versions further then typically you spend
1:07:38
spend
1:07:38
spend a week with this migration and testing
1:07:40
a week with this migration and testing
1:07:40
a week with this migration and testing everything so
1:07:41
everything so
1:07:41
everything so i recommend you update as soon as
1:07:43
i recommend you update as soon as
1:07:43
i recommend you update as soon as possible to the new stable versions
1:07:46
possible to the new stable versions
1:07:46
possible to the new stable versions and dot vm is keeping track of what's
1:07:49
and dot vm is keeping track of what's
1:07:49
and dot vm is keeping track of what's happening with sp net car
1:07:51
happening with sp net car
1:07:51
happening with sp net car so that's the safest way but uh we are
1:07:55
so that's the safest way but uh we are
1:07:55
so that's the safest way but uh we are um dot vm is integrating in sp net
1:07:59
um dot vm is integrating in sp net
1:07:59
um dot vm is integrating in sp net the the integration point is quite small
1:08:02
the the integration point is quite small
1:08:02
the the integration point is quite small so
1:08:02
so
1:08:02
so there is not very high chance that
1:08:05
there is not very high chance that
1:08:05
there is not very high chance that something significant in sp net core
1:08:07
something significant in sp net core
1:08:07
something significant in sp net core will change in order that they will
1:08:08
will change in order that they will
1:08:08
will change in order that they will break
1:08:09
break
1:08:09
break us so i think that any version of sp net
1:08:13
us so i think that any version of sp net
1:08:13
us so i think that any version of sp net core
1:08:13
core
1:08:13
core from 2.0 to
1:08:16
from 2.0 to
1:08:16
from 2.0 to 5 is supported and there shouldn't be
1:08:19
5 is supported and there shouldn't be
1:08:19
5 is supported and there shouldn't be any problems
1:08:21
any problems
1:08:21
any problems that sounds quite satisfying that it's
1:08:23
that sounds quite satisfying that it's
1:08:23
that sounds quite satisfying that it's okay if you're not updating it but it's
1:08:25
okay if you're not updating it but it's
1:08:25
okay if you're not updating it but it's a good practice to stay updated
1:08:27
a good practice to stay updated
1:08:27
a good practice to stay updated right and even if you as you say using
1:08:28
right and even if you as you say using
1:08:28
right and even if you as you say using two uh version two and in your
1:08:30
two uh version two and in your
1:08:30
two uh version two and in your organizations
1:08:31
organizations
1:08:31
organizations and you don't wanna migrate it so it's
1:08:33
and you don't wanna migrate it so it's
1:08:33
and you don't wanna migrate it so it's okay right because when you guys are
1:08:34
okay right because when you guys are
1:08:34
okay right because when you guys are using
1:08:35
using
1:08:35
using your version too so i think guys are on
1:08:37
your version too so i think guys are on
1:08:37
your version too so i think guys are on the safe side
1:08:38
the safe side
1:08:38
the safe side so that was i believe that was an
1:08:39
so that was i believe that was an
1:08:39
so that was i believe that was an amazing session that he did right i
1:08:41
amazing session that he did right i
1:08:41
amazing session that he did right i think this was
1:08:41
think this was
1:08:41
think this was one of the most uh knowledgeable
1:08:43
one of the most uh knowledgeable
1:08:43
one of the most uh knowledgeable sessions that we ever had on the ask
1:08:45
sessions that we ever had on the ask
1:08:45
sessions that we ever had on the ask many things
1:08:46
many things
1:08:46
many things uh we started from very basics he went
1:08:48
uh we started from very basics he went
1:08:48
uh we started from very basics he went through on some best practices
1:08:50
through on some best practices
1:08:50
through on some best practices definitely people who are watching now
1:08:52
definitely people who are watching now
1:08:52
definitely people who are watching now and live and we will be putting out
1:08:53
and live and we will be putting out
1:08:53
and live and we will be putting out on c sharp one platform will uh
1:08:55
on c sharp one platform will uh
1:08:55
on c sharp one platform will uh thousands of people will watch over
1:08:57
thousands of people will watch over
1:08:57
thousands of people will watch over there
1:08:57
there
1:08:57
there definitely we'll put the links in the
1:08:59
definitely we'll put the links in the
1:08:59
definitely we'll put the links in the description so that people i think
1:09:00
description so that people i think
1:09:00
description so that people i think is that i think since this is open
1:09:02
is that i think since this is open
1:09:02
is that i think since this is open source people can just go ahead and get
1:09:03
source people can just go ahead and get
1:09:03
source people can just go ahead and get started right
1:09:04
started right
1:09:04
started right but but i also think there's some of the
1:09:06
but but i also think there's some of the
1:09:06
but but i also think there's some of the products that that you have if people
1:09:07
products that that you have if people
1:09:07
products that that you have if people want to just upgrade it
1:09:09
want to just upgrade it
1:09:09
want to just upgrade it with your application that you talked
1:09:10
with your application that you talked
1:09:10
with your application that you talked about the bootstrap right i think
1:09:12
about the bootstrap right i think
1:09:12
about the bootstrap right i think yeah boots have three and bootstrap four
1:09:14
yeah boots have three and bootstrap four
1:09:14
yeah boots have three and bootstrap four right and and i think maybe soon you may
1:09:16
right and and i think maybe soon you may
1:09:16
right and and i think maybe soon you may have bootstrap five too
1:09:17
have bootstrap five too
1:09:18
have bootstrap five too because you guys are always updating
1:09:19
because you guys are always updating
1:09:19
because you guys are always updating right yeah hopefully hopefully
1:09:22
right yeah hopefully hopefully
1:09:22
right yeah hopefully hopefully all right so that was an amazing session
1:09:23
all right so that was an amazing session
1:09:23
all right so that was an amazing session thomas i stephen simon on behalf of
1:09:25
thomas i stephen simon on behalf of
1:09:25
thomas i stephen simon on behalf of entire c-sharp corner committee
1:09:27
entire c-sharp corner committee
1:09:27
entire c-sharp corner committee and his millions of users would like to
1:09:29
and his millions of users would like to
1:09:29
and his millions of users would like to thank you for your valuable time
1:09:30
thank you for your valuable time
1:09:30
thank you for your valuable time and your contribution towards the
1:09:32
and your contribution towards the
1:09:32
and your contribution towards the community it was an amazing session
1:09:34
community it was an amazing session
1:09:34
community it was an amazing session and we would love to have you back
1:09:35
and we would love to have you back
1:09:36
and we would love to have you back whenever you have label and
1:09:37
whenever you have label and
1:09:38
whenever you have label and another live shirt of us thank you for
1:09:41
another live shirt of us thank you for
1:09:41
another live shirt of us thank you for having me
1:09:43
having me
1:09:43
having me all right bye take care and have a good
1:09:46
all right bye take care and have a good
1:09:46
all right bye take care and have a good day ahead
1:09:47
day ahead
1:09:48
day ahead thank you too goodbye and goodbye