Original subtitles

[Music]

hello everyone my name is angelos

petropoulos and i'm a program manager

for dotnet

together we're going to look at what's

new for net asp.net and azure developers

in visual studio 2022

and here's what we're going to cover

today

let's take a look at the razer editor

first we've added razor specific

features and support for some general

c-sharp editing goodies like format

document and insert missing using

statements

renaming anywhere will now update

references across all razor files even

ones that are currently not open in the

editor

within the raids or editor itself we can

now rename razer components straight

from their tag i love features like this

that let me stay in the flow

and of course

f12 go to definition

i don't know how i lived without this so

far

and speaking of features that help us

stay in the flow we can now also create

new razor components straight from their

tags as we're typing them in the editor

if the c-sharp code is getting a bit

long and we would rather work with it

using a code behind file

we can now get there instantly using the

new extract block to code behind

refactoring

now check this out we're in the general

c-sharp editor now applicable to all

project types and we have two adornments

of the left margin here one is next to

the overridden method uninitialized

and lets us navigate to the overwritten

definition

the second one is next to the class

declaration and is letting us know what

base types this class is inheriting from

in this case component base and what

interfaces this class is implementing

a fantastic quality of life improvement

especially when dealing with parcel

classes like this one

we have a new option on the project

right click context menu remove unused

references

on top of cleaning up unnecessary using

statements visual studio identifies

unused packages and offers to clean them

up all in one go

another nice quality of life improvement

that helps keep your nuget restore

efficient

all right

here we are in the startup.cs of our

server project

and our user statements don't mention

anything about entity framework we don't

have our database connection implemented

yet and we want to copy-paste the code

from our prototype project

now the code we're pasting is making use

of entity framework-specific packages

for which in the past we would have to

go back to the top and insert a using

statement

but visual studio 2022 saves us the

trouble and does it for us

and speaking of saving us the trouble

add null check refactoring what a great

time saver

next is hot reload for asp.net core

which for me is the ultimate

productivity booster i very much like to

make small changes as i go along and

double check them

i have already started my blazer

webassembly project with control f5 and

from the hot reload toolbar menu of

enabled heart reload and file save so

when i make changes after i save the

file those changes will be applied to

the running application

all right let's take a look at the app

it's a basic pizza ordering app

first thing i'm noticing is that the

images for the pizzas are not appearing

let's take a look at index.razer to see

if we can figure out what's going on

ah the issue is relatively simple uh

background image has been misspelled

let's go ahead and fix that now keep an

eye on the browser with hot reload as i

control s to save the file i expect my

fix to make the pizza images appear so

ctrl s

all right

my pizzas are there let's go ahead and

order one i like to build my own so i'll

start with basic cheese and i'll add

basil after that

okay

uh it looks like it doesn't let us add

another topping

let's see if we can figure out why by

looking at configure pizza

dialogue.razer

all right here's the issue it's limiting

us to just one topping because of this

if statement here let's change this to a

six

and as i'm about to save by pressing

ctrl s

let's keep an eye on the toppings dialog

still running in the browser i'm

pressing ctrl s

and all right we can see that the max

toppings message went away and now we

can continue ordering

we'll uh we'll add this pizza to the

order

we'll add a buffalo chicken pizza as

well

and before we fix up the styling of our

order summary here we need to add a

total row and an actual order button

so let's go back to index.razor we have

some code ready to go that we will paste

in here now again let's keep an eye on

the browser window as we save using

control s

beautiful

we can see that the total is working

correctly already i'm sure that all the

button works flawlessly so i'm not going

to wait any longer and i'll go ahead and

address those css issues

the great thing about css had reload is

that we don't have to even wait to save

the file as soon as the contents are

syntactically correct visual studio will

automatically apply the changes

so here i'm updating the color and the

font size of the string your order in

the order summary

and you can see that the file isn't

saved yet

but the changes have already been

applied

awesome all right let's paste some more

css styles in here and get the order

summary looking nice and clean

beautiful that looks great

now let's talk web live preview for

asp.net framework

on the bottom left corner of visual

studio we have the design and split view

buttons

these give us access to the same

designer

if i click the design button i get a

full page design view

and if i click on the split button i get

the designer opened in a horizontal tab

group

and these are typical visual studio

windows so i can pin them and move them

around as usual

as i select items in the designer the

editor part is kept in sync

as i type into the editor the designer

is kept in sync with the changes

it works with typical new content like

new lines it works with controls like

this drop down

it works with selected items

all the usual suspects again no need to

save

with text we can also go the other way

around i can edit text in the designer

and the editor is automatically updated

here we are in a css file and we can see

that the changes are being applied to

the designer as i type this is a great

productivity booster to be able to see

css changes applied immediately

fantastic improvement is the ability to

work with real live data

in the designer by disabling inspect

mode in the designer we can interact

with and even update live data straight

from the designer surface without fiving

the application drag and drop is of

course part of this experience and with

the action panel we get the view showing

live data with just a few clicks

all right

let's also add the list box as well and

add a few items to go with it just a

typical scenario showing the designer's

capabilities

again using the action panel

and finally asking the designer to apply

the changes

one of the most common operations is

creating default event handlers for

various controls that's very easy to do

by just double clicking on its

respective control in the designer in

all cases the markup is modified to add

the event handler and the code behind is

modified to add the empty method

support for third-party controls is

first class

here we're looking at the c-sharp web

application it's using telerik controls

which have action panel support

so let's go ahead and demonstrate that

we'll move the plus icon to the right of

the word new using the actual panel

we'll get the designer to update

great

now still within the context of asp.net

framework we have support for mvc and

razor pages

so here we have an mvc application and

you will see that as i am modifying the

markup the view is also updated

automatically

now web live preview also works in a

browser so if i prefer to work with a

browser window open next to visual

studio instead of the designer tab i can

do just that

and i can even have multiple browser

windows open all at the same

time here i have three views and as i'm

changing things all three views are

updating automatically as i type

finally let's take a look at our new

github actions tooling when deploying to

azure i'm going to right click publish

on my project i'll pick azure and app

service linux as my destination

and here vs is letting me manage my

azure resources without leaving the ide

i can provision new ones but in this

case i will select an existing one

and check this out

now here visual studio knows this

project is under git source control and

visual studio knows that my remote is

github.com so it's letting me know that

i have the option of deploying my

application through cicd using github

actions

and i'm gonna do just that

by clicking finish i'm asking visual

studio to find the most appropriate

github actions template for me for this

specific project and now that visual

studio has done that it's letting me

know that this workflow is ready

and configured to trigger on push and i

don't even have to worry about the

published profile secret visual studio

has gone ahead and downloaded the

published profile from the azure portal

added it as a secret to my github repo

and wired up this workflow to make use

of that github secret during deployment

so all i have to do is follow the

instructions and get this workflow

committed and pushed remotely i'll do

that by opening the key changes window

i'll type in my commit message

i'll commit and push

all right visual studio is letting me

know that my workflow is running and

it's also telling me who and what

triggered it it was me and the push i

just did it's also going to tell me when

it completes but if i'm really curious

about exactly what is going on every

step of the way i can go check that out

here i can inspect every step of the run

and look at the details

oh and the build is done

so back in visual studio i also get

created by a successful run message

all right that's all for today i hope

this inspired you to go download visual

studio 2022 and check out the new

features for yourself thank you and take

care