Microsoft shows Web Forms some love with new Web Live Preview designer

If you thought that ASP.NET Web Forms were long gone and completely forgotten, then hold that thought for just a minute.

Microsoft has recently released the 2nd preview of Visual Studio 2022, the latest in Visual Studio's IDE lineup. And with that release, there are a ton of new changes to the editor.

If you have not yet installed Visual Studio 2022, you can get it from the official download page right over here.

Note that the IDE is still in preview mode, so you will more than likely encounter some form of bug or issue in this release.

Features

There is alot to like about the new design editor. Much of what made the designer a decent visual editor is still in place. And the new features were more than likely requests that developers have had for a while now, including a few that I myself was looking forward to seeing.

After you install VS2022 and open up the Design editor for the first time, you will be prompted to enable Browser Link in your IDE. Browser Link is used to create a communication channel between your IDE and, you guessed it, a browser.

Once enabled, you will see your new design panel in all of its glory. It will look pretty much the same as the old one, except with a few more menu options. More on those down below.

The latest standards

For the most part the visual web designer in Visual Studio has always done a decent job of keeping up to date with the latest web standards. This means that your HTML, CSS and JavaScript will be color-coded appropriately and that intellisense will include the most up to date properties.

Live editing

This feature is not yet fully available on every single server control, but it does work with the standard text based ones such as Literal or Hyperlinks. This is not a new feature in Visual Studio. In the past, you could update the actual text content of a control through the source panel or by setting the appropriate property values as well.

The main difference now in live editing is mainly with the design.

Old design

New design

A little cleaner and less cumbersome in my opinion.

Jump to master

This is one my favorite features so far. In the past, if you were viewing an .aspx page in the designer, the master page controls for that page would be shown as inactive. You would not be able to select those master page controls for editing or even to see the properties.

In order to actually view the source of those controls, you had to select the master page first from the solution explorer and completely remove yourself from the current page that you were working on.

With the new live preview, selecting any masterpage control while in an .aspx page, will actually open the source to the master page in a separate docked tab.

This is more useful than you'd think, particularly when you are spending a substantial amount of time working on design elements.

Live data

In the past, the Visual Studio designer did not render any data control with actual content. It instead relied on showing a temporary placeholder that listed the type of data being rendered, but not much else.

This meant that you had to actually build and run your applications in order to view the final result. Not the end of the world, but definitely there was a time cost to this whole setup. It also made it somewhat difficult to picture what the website would actually look like while coding, especially if you were binding non text content, such as images.

With Web Live Preview, you can now see the actual data that would be rendered in the final result, or at least, a sample of that data.

Open in browser

And lastly, you can now (finally) launch the web preview of a page directly in a browser, while still maintaining the ability to fully edit that content.

This might not automatically switch focus to your browser, so be mindful of what your defaults are. Once your page has finished rendering and launching however, you will be able to make edits directly in that isolated web preview.

Any changes made to the browser preview will automatically get synced with your source code. This is a great feature for when you are in the last steps of a project and looking to mainly focus on content editing and writing.

The bad

For the most part, every new feature added to the Visual Studio designer is definitely welcomed. But beyond the features, there are some issues with the IDE itself, as it is still in a preview release. So it is definitely expected.

For one, it does take some time for the code editor to pick up the changes made in the designer. Not a huge amount of time, but definitely slow enough that you would notice. This is not really noticeable in the old Visual Studio 2019 designer view. So I will assume that performance will improve as a final version is released. The overall size and complexity of your web projects might increase this time as well.

A big limitation in this new design window is actually not a limitation at all. In the past, you did not need to have a project build successfully in order to view the design editor. With Web Live Preview, this is no longer the case. You in fact do need to have your applications build and run in order for them to render in the designer. While this is a good thing, as it keeps you accountable to writing runable code, it could also slow you down to some extent.

Overall, the features aren't exactly uber-futuristic or advanced. But they are subtle improvements and adjustments on a design tool that hasn't really gotten much attention in years. While many believe that ASP.NET Web Forms are an aging technology that is on its way out the door, Microsoft may still surprise developers by giving it some life in the coming years.