[MUSIC]
>> Hello, everyone. My name is Angelos Petropoulos,
and I'm a Program Manager for .NET.
Together, we're going to look at what's new for .NET,
ASP.NET, and Azure developers in Visual Studio 2022.
Here's what we're going to cover today.
Let's take a look at the Razor editor first.
We've added Razor specific features and
support for some general C# 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 opening the editor.
Within the Razor editor itself,
we can now rename Razor components straight from their tag.
I love features like this that let me stay in the flow.
"F12", go to definition.
I don't know how I lived without this so far.
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# 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# editor now applicable to all project types
and we have adornments of the left margin here.
One is next to the overridden method on
initialized and lets us navigate to the overridden definition.
The second one is next to the class declaration
and it's letting us know what base
types this class is inheriting from,
in this case, component-based and
what interfaces this class is implementing.
A fantastic quality of life improvement,
especially when dealing with partial 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.
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.
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 Blazor Web Assembly project
with "Control F5".
From the Hot Reload toolbar menu,
I've enabled Hot Reload on File Save.
When I make changes,
after I save the file,
those changes will be applied to the running application.
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.razor
to see if we can figure out what's going on.
The issue is relatively simple.
Background image has been misspelled.
Let's go ahead and fix that.
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.
"Control S". My pizzas are there.
Let's go ahead and order one. I like to build my own.
I will start with basic cheese and I'll add basil after that.
It looks like it doesn't let us add another topping.
Let's see if we can figure out why by looking at
Configurepizzadialogue.razor. Here's the issue.
It's limiting us to just one
topping because of this statement here.
Let's change this to a six.
As I'm about to save,
by pressing "Control S",
let's keep an eye on the toppings
dialogue still running in the browser,
I'm pressing "Control S".
We can see that the max toppings message went away.
Now we can continue ordering.
We'll add this pizza to the order.
We'll add a buffalo chicken pizza as well.
Before we fix up the styling of our order summary here,
we need to add a total row and an actual "Order" button.
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 "Order" button works flawlessly.
I'm not going to wait any longer and I'll go
ahead and address those CSS issues.
The great thing about CSS Hot 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.
Here, I'm updating the color and
the font size of the string, your Order in the order summary.
You can see that the file isn't saved yet.
But the changes have already been applied.
Awesome. 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.
If I click on the "Split" button,
I get the designer opened in a horizontal tab group.
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,
that 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 or all the usual suspects.
Again, no need to save.
With texts, we can also go the other way round.
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.
A 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 affecting the application.
Drag-and-Drop is, of course,
part of this experience.
With the Action Panel,
we get the view showing live data with just a few clicks.
Let's also add a 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 a C# web application.
It's using Telerik controls
which have Action Panel support.
Let's go ahead and demonstrate that.
We'll move the Plus icon to the right
of the word New using the Action 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 bases.
Here we have an MVC application.
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.
If I prefer to work with a browser window open next to
Visual Studio instead of the Designer tab, I can do just that.
I can even have multiple browser windows
open all at the same time.
Here, I have three views.
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 to link when deploying to Azure.
I am going to right-click "Publish" on my project.
I'll pick Azure and App Service Linux as my destination.
Here, VS is letting me manage
my Azure resources without leaving the ID.
I can provision new ones, but in this case,
I will select an existing one. 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.
It's letting me know that I have
the option of deploying my application
through CI/CD using GitHub Actions. I'm going to 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.
Now that Visual Studio has done that,
it's letting me know that this workflow is
ready and configured to trigger and push.
I don't even have to worry about the Publish profile secret.
Visual Studio has gone ahead and downloaded
the publish 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.
All I have to do is follow the instructions
and get this workflow committed and pushed remotely.
I'll do that by opening the Git Changes Window.
I'll type in my commit message.
I'll commit and push.
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 that push adjusted.
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.
The build is done. Back in Visual Studio,
I also get greeted by a successful run message.
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.