Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,389 --> 00:00:06,798
[Music]
2
00:00:04,879 --> 00:00:08,400
hello everyone my name is angelos
3
00:00:06,799 --> 00:00:09,519
petropoulos and i'm a program manager
4
00:00:08,400 --> 00:00:11,280
for dotnet
5
00:00:09,519 --> 00:00:14,400
together we're going to look at what's
6
00:00:11,279 --> 00:00:16,640
new for net asp.net and azure developers
7
00:00:14,400 --> 00:00:18,000
in visual studio 2022
8
00:00:16,640 --> 00:00:20,320
and here's what we're going to cover
9
00:00:18,000 --> 00:00:20,320
today
10
00:00:20,480 --> 00:00:23,439
let's take a look at the razer editor
11
00:00:21,920 --> 00:00:25,760
first we've added razor specific
12
00:00:23,439 --> 00:00:28,839
features and support for some general
13
00:00:25,760 --> 00:00:31,279
c-sharp editing goodies like format
14
00:00:28,839 --> 00:00:33,759
document and insert missing using
15
00:00:31,278 --> 00:00:33,759
statements
16
00:00:40,479 --> 00:00:44,959
renaming anywhere will now update
17
00:00:42,558 --> 00:00:46,640
references across all razor files even
18
00:00:44,960 --> 00:00:47,920
ones that are currently not open in the
19
00:00:46,640 --> 00:00:50,079
editor
20
00:00:47,920 --> 00:00:51,840
within the raids or editor itself we can
21
00:00:50,079 --> 00:00:54,079
now rename razer components straight
22
00:00:51,840 --> 00:00:57,359
from their tag i love features like this
23
00:00:54,079 --> 00:00:58,480
that let me stay in the flow
24
00:00:57,359 --> 00:01:00,799
and of course
25
00:00:58,479 --> 00:01:02,640
f12 go to definition
26
00:01:00,799 --> 00:01:04,878
i don't know how i lived without this so
27
00:01:02,640 --> 00:01:04,879
far
28
00:01:05,920 --> 00:01:09,920
and speaking of features that help us
29
00:01:07,680 --> 00:01:11,760
stay in the flow we can now also create
30
00:01:09,920 --> 00:01:15,920
new razor components straight from their
31
00:01:11,760 --> 00:01:15,920
tags as we're typing them in the editor
32
00:01:21,519 --> 00:01:24,719
if the c-sharp code is getting a bit
33
00:01:23,118 --> 00:01:26,478
long and we would rather work with it
34
00:01:24,719 --> 00:01:28,719
using a code behind file
35
00:01:26,478 --> 00:01:30,799
we can now get there instantly using the
36
00:01:28,719 --> 00:01:32,719
new extract block to code behind
37
00:01:30,799 --> 00:01:34,960
refactoring
38
00:01:32,719 --> 00:01:36,640
now check this out we're in the general
39
00:01:34,959 --> 00:01:38,798
c-sharp editor now applicable to all
40
00:01:36,640 --> 00:01:41,118
project types and we have two adornments
41
00:01:38,799 --> 00:01:44,240
of the left margin here one is next to
42
00:01:41,118 --> 00:01:45,759
the overridden method uninitialized
43
00:01:44,239 --> 00:01:48,239
and lets us navigate to the overwritten
44
00:01:45,759 --> 00:01:48,239
definition
45
00:01:48,799 --> 00:01:52,159
the second one is next to the class
46
00:01:50,478 --> 00:01:54,159
declaration and is letting us know what
47
00:01:52,159 --> 00:01:56,159
base types this class is inheriting from
48
00:01:54,159 --> 00:01:58,479
in this case component base and what
49
00:01:56,159 --> 00:02:00,799
interfaces this class is implementing
50
00:01:58,478 --> 00:02:02,239
a fantastic quality of life improvement
51
00:02:00,799 --> 00:02:05,880
especially when dealing with parcel
52
00:02:02,239 --> 00:02:05,879
classes like this one
53
00:02:08,239 --> 00:02:13,120
we have a new option on the project
54
00:02:10,239 --> 00:02:14,239
right click context menu remove unused
55
00:02:13,120 --> 00:02:16,400
references
56
00:02:14,239 --> 00:02:18,560
on top of cleaning up unnecessary using
57
00:02:16,400 --> 00:02:20,879
statements visual studio identifies
58
00:02:18,560 --> 00:02:22,479
unused packages and offers to clean them
59
00:02:20,878 --> 00:02:24,239
up all in one go
60
00:02:22,479 --> 00:02:25,519
another nice quality of life improvement
61
00:02:24,239 --> 00:02:27,599
that helps keep your nuget restore
62
00:02:25,520 --> 00:02:28,480
efficient
63
00:02:27,598 --> 00:02:30,479
all right
64
00:02:28,479 --> 00:02:31,840
here we are in the startup.cs of our
65
00:02:30,479 --> 00:02:33,598
server project
66
00:02:31,840 --> 00:02:35,680
and our user statements don't mention
67
00:02:33,598 --> 00:02:37,359
anything about entity framework we don't
68
00:02:35,680 --> 00:02:39,439
have our database connection implemented
69
00:02:37,360 --> 00:02:41,519
yet and we want to copy-paste the code
70
00:02:39,439 --> 00:02:43,359
from our prototype project
71
00:02:41,519 --> 00:02:45,519
now the code we're pasting is making use
72
00:02:43,360 --> 00:02:47,040
of entity framework-specific packages
73
00:02:45,519 --> 00:02:48,640
for which in the past we would have to
74
00:02:47,039 --> 00:02:49,759
go back to the top and insert a using
75
00:02:48,639 --> 00:02:52,238
statement
76
00:02:49,759 --> 00:02:55,439
but visual studio 2022 saves us the
77
00:02:52,239 --> 00:02:55,439
trouble and does it for us
78
00:02:56,400 --> 00:03:01,200
and speaking of saving us the trouble
79
00:02:58,479 --> 00:03:03,359
add null check refactoring what a great
80
00:03:01,199 --> 00:03:05,759
time saver
81
00:03:03,360 --> 00:03:07,280
next is hot reload for asp.net core
82
00:03:05,759 --> 00:03:09,840
which for me is the ultimate
83
00:03:07,280 --> 00:03:11,759
productivity booster i very much like to
84
00:03:09,840 --> 00:03:13,200
make small changes as i go along and
85
00:03:11,759 --> 00:03:14,719
double check them
86
00:03:13,199 --> 00:03:17,119
i have already started my blazer
87
00:03:14,719 --> 00:03:18,959
webassembly project with control f5 and
88
00:03:17,120 --> 00:03:21,039
from the hot reload toolbar menu of
89
00:03:18,959 --> 00:03:23,039
enabled heart reload and file save so
90
00:03:21,039 --> 00:03:24,639
when i make changes after i save the
91
00:03:23,039 --> 00:03:26,318
file those changes will be applied to
92
00:03:24,639 --> 00:03:27,759
the running application
93
00:03:26,318 --> 00:03:30,079
all right let's take a look at the app
94
00:03:27,759 --> 00:03:31,359
it's a basic pizza ordering app
95
00:03:30,080 --> 00:03:34,000
first thing i'm noticing is that the
96
00:03:31,360 --> 00:03:36,000
images for the pizzas are not appearing
97
00:03:34,000 --> 00:03:39,280
let's take a look at index.razer to see
98
00:03:36,000 --> 00:03:39,280
if we can figure out what's going on
99
00:03:39,840 --> 00:03:44,000
ah the issue is relatively simple uh
100
00:03:42,000 --> 00:03:47,280
background image has been misspelled
101
00:03:44,000 --> 00:03:49,598
let's go ahead and fix that now keep an
102
00:03:47,280 --> 00:03:52,080
eye on the browser with hot reload as i
103
00:03:49,598 --> 00:03:54,318
control s to save the file i expect my
104
00:03:52,080 --> 00:03:56,159
fix to make the pizza images appear so
105
00:03:54,318 --> 00:03:57,359
ctrl s
106
00:03:56,158 --> 00:03:59,039
all right
107
00:03:57,360 --> 00:04:01,439
my pizzas are there let's go ahead and
108
00:03:59,039 --> 00:04:03,280
order one i like to build my own so i'll
109
00:04:01,438 --> 00:04:05,120
start with basic cheese and i'll add
110
00:04:03,280 --> 00:04:06,000
basil after that
111
00:04:05,120 --> 00:04:07,920
okay
112
00:04:06,000 --> 00:04:09,199
uh it looks like it doesn't let us add
113
00:04:07,919 --> 00:04:10,958
another topping
114
00:04:09,199 --> 00:04:12,158
let's see if we can figure out why by
115
00:04:10,959 --> 00:04:14,560
looking at configure pizza
116
00:04:12,158 --> 00:04:16,319
dialogue.razer
117
00:04:14,560 --> 00:04:18,879
all right here's the issue it's limiting
118
00:04:16,319 --> 00:04:20,879
us to just one topping because of this
119
00:04:18,879 --> 00:04:23,199
if statement here let's change this to a
120
00:04:20,879 --> 00:04:23,199
six
121
00:04:23,279 --> 00:04:27,119
and as i'm about to save by pressing
122
00:04:25,759 --> 00:04:28,879
ctrl s
123
00:04:27,120 --> 00:04:30,319
let's keep an eye on the toppings dialog
124
00:04:28,879 --> 00:04:33,439
still running in the browser i'm
125
00:04:30,319 --> 00:04:33,439
pressing ctrl s
126
00:04:33,600 --> 00:04:37,040
and all right we can see that the max
127
00:04:35,199 --> 00:04:38,720
toppings message went away and now we
128
00:04:37,040 --> 00:04:40,319
can continue ordering
129
00:04:38,720 --> 00:04:42,320
we'll uh we'll add this pizza to the
130
00:04:40,319 --> 00:04:44,560
order
131
00:04:42,319 --> 00:04:46,399
we'll add a buffalo chicken pizza as
132
00:04:44,560 --> 00:04:48,160
well
133
00:04:46,399 --> 00:04:50,239
and before we fix up the styling of our
134
00:04:48,160 --> 00:04:52,960
order summary here we need to add a
135
00:04:50,240 --> 00:04:55,360
total row and an actual order button
136
00:04:52,959 --> 00:04:57,279
so let's go back to index.razor we have
137
00:04:55,360 --> 00:04:59,199
some code ready to go that we will paste
138
00:04:57,279 --> 00:05:01,119
in here now again let's keep an eye on
139
00:04:59,199 --> 00:05:03,919
the browser window as we save using
140
00:05:01,120 --> 00:05:06,478
control s
141
00:05:03,918 --> 00:05:06,478
beautiful
142
00:05:07,120 --> 00:05:09,918
we can see that the total is working
143
00:05:08,478 --> 00:05:11,918
correctly already i'm sure that all the
144
00:05:09,918 --> 00:05:13,519
button works flawlessly so i'm not going
145
00:05:11,918 --> 00:05:17,038
to wait any longer and i'll go ahead and
146
00:05:13,519 --> 00:05:17,038
address those css issues
147
00:05:17,279 --> 00:05:21,279
the great thing about css had reload is
148
00:05:19,519 --> 00:05:23,680
that we don't have to even wait to save
149
00:05:21,279 --> 00:05:25,758
the file as soon as the contents are
150
00:05:23,680 --> 00:05:28,478
syntactically correct visual studio will
151
00:05:25,759 --> 00:05:31,038
automatically apply the changes
152
00:05:28,478 --> 00:05:34,000
so here i'm updating the color and the
153
00:05:31,038 --> 00:05:36,560
font size of the string your order in
154
00:05:34,000 --> 00:05:37,918
the order summary
155
00:05:36,560 --> 00:05:40,478
and you can see that the file isn't
156
00:05:37,918 --> 00:05:40,478
saved yet
157
00:05:40,560 --> 00:05:44,000
but the changes have already been
158
00:05:41,680 --> 00:05:45,840
applied
159
00:05:44,000 --> 00:05:47,918
awesome all right let's paste some more
160
00:05:45,839 --> 00:05:51,038
css styles in here and get the order
161
00:05:47,918 --> 00:05:54,159
summary looking nice and clean
162
00:05:51,038 --> 00:05:54,159
beautiful that looks great
163
00:05:57,759 --> 00:06:03,120
now let's talk web live preview for
164
00:06:00,000 --> 00:06:03,120
asp.net framework
165
00:06:03,199 --> 00:06:08,080
on the bottom left corner of visual
166
00:06:05,038 --> 00:06:09,199
studio we have the design and split view
167
00:06:08,079 --> 00:06:10,879
buttons
168
00:06:09,199 --> 00:06:13,360
these give us access to the same
169
00:06:10,879 --> 00:06:13,360
designer
170
00:06:16,879 --> 00:06:20,399
if i click the design button i get a
171
00:06:18,720 --> 00:06:22,319
full page design view
172
00:06:20,399 --> 00:06:24,318
and if i click on the split button i get
173
00:06:22,319 --> 00:06:25,280
the designer opened in a horizontal tab
174
00:06:24,319 --> 00:06:27,039
group
175
00:06:25,279 --> 00:06:28,799
and these are typical visual studio
176
00:06:27,038 --> 00:06:32,279
windows so i can pin them and move them
177
00:06:28,800 --> 00:06:32,280
around as usual
178
00:06:38,478 --> 00:06:45,159
as i select items in the designer the
179
00:06:40,959 --> 00:06:45,159
editor part is kept in sync
180
00:06:48,560 --> 00:06:54,160
as i type into the editor the designer
181
00:06:51,279 --> 00:06:56,318
is kept in sync with the changes
182
00:06:54,160 --> 00:06:58,639
it works with typical new content like
183
00:06:56,319 --> 00:07:00,080
new lines it works with controls like
184
00:06:58,639 --> 00:07:03,120
this drop down
185
00:07:00,079 --> 00:07:05,439
it works with selected items
186
00:07:03,120 --> 00:07:07,759
all the usual suspects again no need to
187
00:07:05,439 --> 00:07:07,759
save
188
00:07:15,439 --> 00:07:19,918
with text we can also go the other way
189
00:07:17,279 --> 00:07:23,598
around i can edit text in the designer
190
00:07:19,918 --> 00:07:23,598
and the editor is automatically updated
191
00:07:27,918 --> 00:07:32,000
here we are in a css file and we can see
192
00:07:30,399 --> 00:07:34,239
that the changes are being applied to
193
00:07:32,000 --> 00:07:36,399
the designer as i type this is a great
194
00:07:34,240 --> 00:07:40,680
productivity booster to be able to see
195
00:07:36,399 --> 00:07:40,679
css changes applied immediately
196
00:07:44,000 --> 00:07:48,399
fantastic improvement is the ability to
197
00:07:46,079 --> 00:07:50,560
work with real live data
198
00:07:48,399 --> 00:07:52,239
in the designer by disabling inspect
199
00:07:50,560 --> 00:07:55,038
mode in the designer we can interact
200
00:07:52,240 --> 00:07:56,879
with and even update live data straight
201
00:07:55,038 --> 00:07:59,199
from the designer surface without fiving
202
00:07:56,879 --> 00:08:00,960
the application drag and drop is of
203
00:07:59,199 --> 00:08:03,439
course part of this experience and with
204
00:08:00,959 --> 00:08:06,878
the action panel we get the view showing
205
00:08:03,439 --> 00:08:06,879
live data with just a few clicks
206
00:08:08,560 --> 00:08:11,598
all right
207
00:08:09,598 --> 00:08:13,199
let's also add the list box as well and
208
00:08:11,598 --> 00:08:14,959
add a few items to go with it just a
209
00:08:13,199 --> 00:08:17,598
typical scenario showing the designer's
210
00:08:14,959 --> 00:08:17,598
capabilities
211
00:08:22,079 --> 00:08:26,198
again using the action panel
212
00:08:34,719 --> 00:08:39,320
and finally asking the designer to apply
213
00:08:36,240 --> 00:08:39,320
the changes
214
00:08:40,559 --> 00:08:44,000
one of the most common operations is
215
00:08:42,399 --> 00:08:46,399
creating default event handlers for
216
00:08:44,000 --> 00:08:47,839
various controls that's very easy to do
217
00:08:46,399 --> 00:08:50,000
by just double clicking on its
218
00:08:47,839 --> 00:08:51,920
respective control in the designer in
219
00:08:50,000 --> 00:08:53,839
all cases the markup is modified to add
220
00:08:51,919 --> 00:08:57,199
the event handler and the code behind is
221
00:08:53,839 --> 00:08:57,200
modified to add the empty method
222
00:09:00,720 --> 00:09:03,839
support for third-party controls is
223
00:09:02,559 --> 00:09:05,439
first class
224
00:09:03,839 --> 00:09:07,680
here we're looking at the c-sharp web
225
00:09:05,440 --> 00:09:09,839
application it's using telerik controls
226
00:09:07,679 --> 00:09:12,079
which have action panel support
227
00:09:09,839 --> 00:09:14,320
so let's go ahead and demonstrate that
228
00:09:12,080 --> 00:09:18,560
we'll move the plus icon to the right of
229
00:09:14,320 --> 00:09:18,560
the word new using the actual panel
230
00:09:20,879 --> 00:09:25,919
we'll get the designer to update
231
00:09:23,600 --> 00:09:25,920
great
232
00:09:26,799 --> 00:09:31,519
now still within the context of asp.net
233
00:09:29,120 --> 00:09:33,120
framework we have support for mvc and
234
00:09:31,519 --> 00:09:36,399
razor pages
235
00:09:33,120 --> 00:09:38,320
so here we have an mvc application and
236
00:09:36,399 --> 00:09:40,159
you will see that as i am modifying the
237
00:09:38,320 --> 00:09:42,800
markup the view is also updated
238
00:09:40,159 --> 00:09:42,799
automatically
239
00:09:49,440 --> 00:09:54,080
now web live preview also works in a
240
00:09:51,679 --> 00:09:55,759
browser so if i prefer to work with a
241
00:09:54,080 --> 00:09:57,680
browser window open next to visual
242
00:09:55,759 --> 00:09:58,879
studio instead of the designer tab i can
243
00:09:57,679 --> 00:10:00,879
do just that
244
00:09:58,879 --> 00:10:02,838
and i can even have multiple browser
245
00:10:00,879 --> 00:10:07,039
windows open all at the same
246
00:10:02,839 --> 00:10:09,120
time here i have three views and as i'm
247
00:10:07,039 --> 00:10:13,399
changing things all three views are
248
00:10:09,120 --> 00:10:13,399
updating automatically as i type
249
00:10:20,078 --> 00:10:23,679
finally let's take a look at our new
250
00:10:22,000 --> 00:10:25,120
github actions tooling when deploying to
251
00:10:23,679 --> 00:10:26,719
azure i'm going to right click publish
252
00:10:25,120 --> 00:10:28,720
on my project i'll pick azure and app
253
00:10:26,720 --> 00:10:30,639
service linux as my destination
254
00:10:28,720 --> 00:10:32,800
and here vs is letting me manage my
255
00:10:30,639 --> 00:10:34,799
azure resources without leaving the ide
256
00:10:32,799 --> 00:10:36,958
i can provision new ones but in this
257
00:10:34,799 --> 00:10:38,559
case i will select an existing one
258
00:10:36,958 --> 00:10:40,239
and check this out
259
00:10:38,559 --> 00:10:42,479
now here visual studio knows this
260
00:10:40,240 --> 00:10:44,159
project is under git source control and
261
00:10:42,480 --> 00:10:46,720
visual studio knows that my remote is
262
00:10:44,159 --> 00:10:48,240
github.com so it's letting me know that
263
00:10:46,720 --> 00:10:50,879
i have the option of deploying my
264
00:10:48,240 --> 00:10:52,480
application through cicd using github
265
00:10:50,879 --> 00:10:54,480
actions
266
00:10:52,480 --> 00:10:56,480
and i'm gonna do just that
267
00:10:54,480 --> 00:10:58,240
by clicking finish i'm asking visual
268
00:10:56,480 --> 00:11:00,000
studio to find the most appropriate
269
00:10:58,240 --> 00:11:02,079
github actions template for me for this
270
00:11:00,000 --> 00:11:03,839
specific project and now that visual
271
00:11:02,078 --> 00:11:06,559
studio has done that it's letting me
272
00:11:03,839 --> 00:11:08,800
know that this workflow is ready
273
00:11:06,559 --> 00:11:09,919
and configured to trigger on push and i
274
00:11:08,799 --> 00:11:12,000
don't even have to worry about the
275
00:11:09,919 --> 00:11:13,199
published profile secret visual studio
276
00:11:12,000 --> 00:11:15,278
has gone ahead and downloaded the
277
00:11:13,200 --> 00:11:17,600
published profile from the azure portal
278
00:11:15,278 --> 00:11:19,679
added it as a secret to my github repo
279
00:11:17,600 --> 00:11:21,680
and wired up this workflow to make use
280
00:11:19,679 --> 00:11:23,199
of that github secret during deployment
281
00:11:21,679 --> 00:11:24,799
so all i have to do is follow the
282
00:11:23,200 --> 00:11:26,560
instructions and get this workflow
283
00:11:24,799 --> 00:11:28,879
committed and pushed remotely i'll do
284
00:11:26,559 --> 00:11:31,679
that by opening the key changes window
285
00:11:28,879 --> 00:11:34,799
i'll type in my commit message
286
00:11:31,679 --> 00:11:34,799
i'll commit and push
287
00:11:40,720 --> 00:11:43,839
all right visual studio is letting me
288
00:11:42,159 --> 00:11:45,759
know that my workflow is running and
289
00:11:43,839 --> 00:11:47,440
it's also telling me who and what
290
00:11:45,759 --> 00:11:49,600
triggered it it was me and the push i
291
00:11:47,440 --> 00:11:51,360
just did it's also going to tell me when
292
00:11:49,600 --> 00:11:52,800
it completes but if i'm really curious
293
00:11:51,360 --> 00:11:55,120
about exactly what is going on every
294
00:11:52,799 --> 00:11:57,120
step of the way i can go check that out
295
00:11:55,120 --> 00:11:59,278
here i can inspect every step of the run
296
00:11:57,120 --> 00:12:01,278
and look at the details
297
00:11:59,278 --> 00:12:03,200
oh and the build is done
298
00:12:01,278 --> 00:12:06,879
so back in visual studio i also get
299
00:12:03,200 --> 00:12:06,879
created by a successful run message
300
00:12:08,799 --> 00:12:12,000
all right that's all for today i hope
301
00:12:10,480 --> 00:12:13,600
this inspired you to go download visual
302
00:12:12,000 --> 00:12:15,200
studio 2022 and check out the new
303
00:12:13,600 --> 00:12:17,759
features for yourself thank you and take
304
00:12:15,200 --> 00:12:17,759
care
21597
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.