Design your Web Forms apps with Web Live Preview in Visual Studio 2022

Sayed

In Visual Studio 2022 Preview 2, we have introduced a new designer for Web Forms projects that is powered by Web Live Preview. In this post we will go over how you can use the new Web Forms designer as well as other features provided by Web Live Preview. Since this is the first preview of the Web Forms designer, there are a lot of features which haven’t been implemented, but we will continue to improve the experience and add features as quickly as we can. We would love if you could try out the new experience with your existing projects and let us know how things are going.

New Web Forms Designer

In Preview 2, when you open a Web Forms view, the designer that is in place is the new Web Live Preview designer. When you open a Web Forms view, for example an .aspx file, you’ll see the new Design and Split buttons at the bottom of the code editor. You can click Design to get a full page view of the designer, or Split to split the designer into a new horizontal group. You can see the buttons to get started in the image below.

Image wlp buttons

In the image below you can see the result when you click the Split button to get the designer into a new horizontal group.

Image wlp split view

Here are some features that we currently support in the new designer.

  • Full support for latest browser technology
  • Preview using live data instead of “placeholder” data
  • Selecting a control in the designer will navigate to the source
  • Live updates when changes are made to asp.net view files
  • Live updates when changes are made to CSS files
  • Drag and drop from the toolbox into design view
  • Change text in the designer view
  • Action Panel (aka Smart Tag) support for controls that have support for it
  • Double click control to add default event handler
  • Ability to use design/preview features in the browser

Let’s get into to taking a closer look at some of these features.

Full support for latest browser technology

Web Live Preview in Visual Studio uses WebView2 which is powered by Microsoft Edge. Because of this, the preview in the designer will always be up-to-date with the latest web standards and browser support. You can also use Web Live Preview in a browser, this will enable you to preview/design your app in any browser that you prefer. More on that later in the “Ability to use design/preview features in the browser” section.

Preview using live data instead of “placeholder” data

A big change from the previous Web Forms designer is that Web Live Preview has the capability to render previews using live data from your application. With the existing Web Forms Designer you may know that for controls that are bound to data, you won’t get previews with your data but instead “placeholder” data. For example, the screenshot below shows a page with an asp:GridView in the Web Forms Designer in Visual Studio 2019.

Image web forms designer data binding

In the image above you can see that the values have “Databound” instead of showing the data that is connected to the asp:GridView. In Web Live Preview, instead of seeing the placeholder data, you’ll see live data that is coming from your application. Take a look at the image below which shows the new designer and how it shows live data instead of placeholder content.

Image web live preview live data

As you can see from the image above, the placeholder content is not used and instead data from the application is being shown. For some scenarios it is beneficial to render placeholder content. Later we will add an option to toggle between live data and placeholder content.

Selecting a control navigates to the source

When you are in the designer, if you select a control, or element, the source view will navigate to the location of the selection. If the selection is outside of the current source file, the file containing the source will automatically be opened. You can see this in action in the animation below.

Image 01 2021 07 wlp preview2 sync selection

Now let’s take a look at how updates are shown immediately in the designer.

Live updates to source files

When you make changes to your Web Forms view files, those changes will automatically be shown in the designer. This is shown in the animation below. You do not need to save the file for changes to be applied, they will be applied as you type.

Image 02 2021 07 wlp preview2 live updates

In addition to displaying changes in ASP.NET view files, any changes to CSS files will be automatically applied. Take a look at the next animation for an example of this.

Image 03 2021 07 wlp preview2 css

In this animation you can see that the preview shown in the designer is automatically updated as I update the CSS file that is being used on the page. You may have noticed that this is not a Web Forms project, but instead it’s an ASP.NET Razor Pages project. Web Live Preview will work for any ASP.NET project, not including any ASP.NET Core projects. We are currently focused on bringing support for ASP.NET projects, and later we will revisit adding support for ASP.NET Core and Blazor projects.

Action Panel support

When editing Web Forms projects some controls have support to show the Action Panel, also known as Smart Tags or Smart Tasks panel. In the video below, we have an asp:GridView, and we want to change the ordering of the NickName column. In the animation below you can see that we use the Action Panel to change the ordering of the columns, and then click on Needs Update to get the preview in the designer updated.

Image 04 2021 07 wlp preview2 action panel

Let’s move on to take a quick look at the drag and drop support.

Drag and drop from the toolbox

When designing Web Forms apps, one of the most common operations is to drag and drop a control from the toolbox on to the design surface. The new designer has support for this as expected.

In the animation below, you’ll see that I drag a label from the toolbox and drop it on the design surface. After that I modify the text of the label using the editor.

drag and drop

We have some rough edges in the drag and drop support, but we are continuing to work on this to improve the experience. In the future preview releases we will be bringing updates to this experience. Let’s move on to the next demo.

Change text in the designer surface

For certain controls, like a text field, you can edit the text directly in the design view. When you single click on an element in the designer, you will select that element. To modify text for controls that support it, you can double click to edit the text. You can see this in the animated gif below.

edit in design view

Currently the set of elements that support direct text editing in the design view is limited, but we will add support for other elements and controls soon.

Double click control to add default event handler

One of the most common actions in the Web Forms designer is double clicking on a control to add the default event handler. In the new designer, we have support for this as well. In the gif below, I have an asp:Button control that I double click to add the default event handler to handle the OnClick event.

double click to add default event handler

Ability to use design/preview features in the browser

In addition to using the design view in Visual Studio, you can also use a browser as the design surface. To get started click on the browser button in the design tool bar. Any browser that support EMCA2020 should work with Web Live Preview, which includes most modern browsers. Take a look at the video below.

edit in browser

One issue that you may encounter in this preview is that after clicking the Open in Browser button, the browser may not come into the foreground. You’ll need to switch to the browser manually when this occurs.

Known issues

Like other new features that were just added in this preview, this is a work in progress. There is still lots of work that needs to be done to bring this new designer experience on-par with the previous designer, and to add some new capabilities as well. This is the start of a long journey that we will be taking together. Below are some known issues that you may encounter when working with Web Live Preview. The team will be working to resolve these issues and in the following previews some of these may be fixed.

  • Project must be able to build & run in order for the design view to be loaded
    • In the previous designer there was no requirement for the project to be able to build and run. This is currently a limitation of Web Live Preview, but we will be working to add support to enable the designer even if the project doesn’t build and run.
  • Design view may take some time to load
    • When you click the Design or Split button in the editor, it may take some time for the design view to appear. The amount of time will vary based on the project, or solution, that is loaded. When you run into this, you can try to build the project/solution and then try again.
  • Issues when moving design view from one monitor to another when the pixel density of the monitors differs
    • If you have design view loaded and move the design view to a monitor that has a different pixel density from the current monitor, the design view may not scale correctly, and the view may not be in the correct location.
    • To work around this, after moving Visual Studio to the other monitor, close and reopen the design view. You may also need to disable the “Optimize rendering for screens with different pixel densities” option under Tools->Options->Environment.
  • ID for dropped elements are not being automatically set
    • In the previous designer, when you drop a control from the toolbox onto the design view, a unique ID is assigned to the control. The new designer doesn’t currently assign the ID element. After dropping a control, it’s best to set the ID of the control to a unique value.
  • Clicking on the Open in Browser button, in design view toolbar, doesn’t force the browser to the foreground
    • When clicking the Open in Browser button (open in browser button) in the design view toolbar, the browser may not be forced to the foreground.
    • To workaround this, after clicking the Open in Browser button, you will need to bring the browser to the foreground.

Summary

In this post we have introduced, and demonstrated, the new Web Forms Designer and Web Live Preview that is built into Visual Studio 2022 Preview 2. We are very excited to bring a new designer for Web Forms. We would love for you to try out this new designer experience and let us know how it’s working for you with your own projects and solutions. The primary ways to provide feedback on this new experience are listed below.

  • For bugs, please report those in Visual Studio to the developer community with Report a Problem
  • For feature suggestions, you can also use Report a Problem (select Suggest a Feature) or leave a comment below.
  • For any other feedback, you can use the comment section here or you can reach me directly on twitter @SayedIHashimi or by email at sayed.hashimi@microsoft.com.

47 comments

Comments are closed. Login to edit/delete your existing comments

  • Daniel Smith

    This is absolutely fantastic! What an ingenious approach to adding visual design capability. Is there any chance we’ll see this sort of thing with Blazor projects as well in the future?

    • Sayed-Ibrahim-HashimiMicrosoft employee

      My master plan is to bring this experience to aspnet core/blazor. We are discussing it, but no firm plans as of yet. There is still a lot of other more important work, but I’m hoping people like yourself will ask for this and then we can get it on the backlog!

      • Rod Macdonald

        awesome, awesome awesome!

        I’m hoping your design surface will eventually allow me to design CSS FlexBoxes and CSS Grids which I’ve found a nightmare (trying to make an old WebForms site responsive) – and if this gets ported to Blazor – well that would simply be fantastic. Thank you.

      • Stevie White

        I really do hope we get to see this come to Blazor, it would help save a LOT of work to be able to even see a live preview of the HTML/Razor as you are working on it. And having actual designer would be amazing as well.

  • hitesh davey

    Good work; Well done!

    Did you happen to see VS 2002/2003 WebForms designer? I miss that designer last since 18yrs. That version of WebForms designer was a true pixel-perfect WYSIWYG tool. Begining from VS2005; web form designer seriously lacks visual designing elements and it is more focused on scriptings. For e.g creating a master page and child page is too much work and it is not simple and straightforward.

    In VS2002/2003 it was so easy to design WebForms; designing experience was just like designing a WinForms. Simply drag and drop and you will see the exact output when the app is run. It was more like developing an event-driven app;

    In VS2002/3 If I want to design a Webform with a fixed resolution of 1366×786 then I don’t have to juggle with a stack of different layouts.

    I am looking forward to VS2022; with user-friendly designers for WebForms, Blazor, ASP.NET code, MAUI & mobile apps. Being a developer I want to focus on solutions rather than writing and maintaining too many scripts. Something like developing a WinForms app. Just write 100% code in C# without worrying abt Html, CSS, JS, Xml. Xaml etc.

    • Sayed-Ibrahim-HashimiMicrosoft employee

      Hi Hitesh, thanks for the feedback. I didn’t see the designer back in those days, but what you are describing sounds great. Hopefully we can make you feel as productive as you did back then.

  • Leszek Glinowiecki

    I thought, that WebForms are dead…

    Future is Blazor and still maybe MVC – not this overloaded WebForms…

    • Samson Ajayi

      Web form is a legacy framework it cant be dead and i very sure microsoft knows this.
      At some point webform will definately get an upgrade

      • Matthew Sidorick

        There are decades-worth of Web Forms web applications and SharePoint applications that are business-critical, and for which organizations do not have the budget to re-write in another language/platform. It is very smart for MS to ensure that these applications continue to run securely for the foreseeable future and that ASP.NET developers have the tools needed to maintain them, as there is no guarantee that just because the original Web Forms app was developed in the MS tech stack, the re-written one would automatically be written in it as well.

  • Aaron King

    Glad to see Microsoft has not completely abandoned WebForms. I still prefer the more simple programming model over MVC. Some people say it’s bloated and heavy but that’s only true if you use viewstate and built in controls like GridView. I maintain several highly performant and scalable applications built on WebForms and will continue using it as long as i can.

    • Brian Thomson

      Totally agree Aaron, after several years of being told WebForms were dead, suddenly they rise from the grave.

      I’ve spent so much time and effort learning the webforms life cycle, glad to see it is still useable.

      Hopefully VS2022 will load all my modified snippets unchanged, and my base pages will still work with the same inheritance model etc.

      There will be plenty who say it doesn’t work, can’t be maintained, tested etc. without even trying it. I’ll be downloading VS2022 shortly.

      Now, if we can just debug pages in Edge I’ll be a happy bunny.

      • Sayed-Ibrahim-HashimiMicrosoft employee

        If you’d like to use the browser as the design/preview surface you can do that. I covered that in the “Ability to use design/preview features in the browser” section.

        • Brian Thomson

          Thanks, I was actually referring to the issue whereby I can start a webforms site and step through the code-behind.
          Stop, edit, F5 again, and quite often VS2019 says it cant connect to process. Its OK in Internet exploder, just Edge it doesn’t like.

          That said, I’ve been trying things in VS2022 P2, and it seems fine.

      • Matthew Sidorick

        Agreed – there are decades-worth of Web Forms web applications and SharePoint applications that are business-critical, and for which organizations do not have the budget to re-write in another language/platform. It is very smart for MS to ensure that these applications continue to run securely for the foreseeable future and that ASP.NET developers have the tools needed to maintain them, as there is no guarantee that just because the original Web Forms app was developed in the MS tech stack, the re-written one would automatically be written in it as well.

    • leocheung

      I start my .NET dev career since 2001 and experience from ASP.NET 1.1 to latest 4.5, had happy experience. back to ASP.NET from 1.1 ~ 3.5, I agree the viewstate make the application bloated, but at the sametime, we know what viewstate is, and it is necessary. The day in 10+ years before, due to computer power (CPU,Ram,HDD), the slow of rendering engine of IE and Firefox, these make ASP.NET slow,but later version 4.0 is much improve the performance.

      If someone like me still develop webform in ASP.NET 4.5 with latest .NET framework.
      You will find a new level & enjoyable experience, because of faster browser in nowadays Computer power and better Visual Studio.
      I always recommend webcontrol like Telexxik and DevExprxx, prebuild beautiful and powerful control.

      When ASP.NET MVC come, I afraid MS will abandon webform, but 10 years later, MS make a right decision and direction, webform still valuable and some benefit dev in webform that MVC DO NOT HAVE.

  • Wegner, Bjoern

    If this is only for web forms – what a waste of developer ressouces. Projects using WebForms still can use older versions of Visual Studio. I think there are plenty more things with a real benefit for developer projects started in the last decade you could work on. Web Forms is a dead technology and officially deprecated and has been replaced by MVC and other technologies a long time ago.
    See your pretty old blog article from 2008! :
    https://weblogs.asp.net/scottgu/asp-net-mvc-beta-released#:~:text=The%20ASP.NET%20MVC%20Beta%20works%20with%20both.NET%203.5,allows%20you%20to%20deploy%20it%20in%20production%20environments.

    • Sayed-Ibrahim-HashimiMicrosoft employee

      This is currently limited to asp.net projects, which in addition to Web Forms also has MVC & Razor Pages. The underlying tech isn’t limited to asp.net though. We are hoping to bring this experience to asp.net core/blazor as well. No promises there, but that is what I’m aiming for.

      • Brien King

        I agree, this seems like a huge waste of time on MS’s part.

        If Hot-Reload works the way it’s advertised to, then I’m not going to waste my time in the “Designer”, I’m just going to run the browser and see what it actually looks like rather than what the “Designer” thinks it will look like.

        • Derek Gabriel

          This is so true, how long have we been waiting for a legitimate hot reload now? lol

      • Matthew Sidorick

        Thank you Microsoft for properly maintaining Web Forms as a viable technology, even if in a legacy status, as there are decades-worth of Web Forms web applications and SharePoint applications that are business-critical, and for which organizations do not have the budget to re-write in another language/platform. It is very smart for MS to ensure that these applications continue to run securely for the foreseeable future and that ASP.NET developers have the tools needed to maintain them, as there is no guarantee that just because the original Web Forms app was developed in the MS tech stack, the re-written one would automatically be written in it as well.

  • Joe Hanna - Vantage IT

    I agree with some of these sentiments. We have coped without a designer for so long, I don’t miss it. Give webforms is effectively end-of-life by not moving to .net 6, why do this now? Maybe to keep us happy for a bit longer?

    I would rather see the effort go into creating Webforms extensions for .net 6 that can be added through nuget. Those that want it can add the extensions and those that don’t, won’t have to be worried about legacy namespaces.

  • Richard Delgado Jr

    I thought Microsoft was deprecating Web Forms in favor of blazor? Isn’t this a waste of time?

  • Mickey .

    Is Web Forms back, again? I thought it was dead, or is it un-dead? Web Forms is probably the best thing Microsoft ever did for the world of coding/development. VB was another great innovation. Some people below use the words such as “overloaded”, “bloated”, etc. What do these words actually mean in the context of coding? The largest number of bytes on the internet are made of pictures, video, and even text; code makes up only a miniscule part of the entire data that moves on the net and between devices.

    So many code re-writes: Vb.NET to C#, ASP to ASP.NET webforms, ASP.NET webforms to ASP.NET MVC, now ASP.NET MVC to ASP.NET Core. Each time, a complete re-write is required, long learning curves required, huge investment in time AND money, wasted time! Business products still perform the same functions; so there is zero benefit, zero cost justification.

    Too many new software versions, released too frequently. Adding features just for the sake of releasing new versions. As a result, many companies I know have moved away from .NET altogether. When forced to re-write, companies have then the opportunity to look at ALL the platforms out there, many of which have maintained backward compatibility, and are more stable (ie. not frequent changes/upgrades).

    As a person who has managed IT for decades, I have always said to my staff: When coding, think like a business person/a person who pays the bills, and not like a coder, and you will deliver the best results for people who pay your salaries!

    • hitesh davey

      You just said it well..!!! Nothing more to say. Not sure when MS will have this wisdom.

      to add a few more to your list…

      Data Access: ADO to ADO.NET, ADO.net to Linq-to-SQL, Linq-to-SQL to EF5, EF5 to EF6, EF6-to-EF Core
      for UI; Winforms, WPF, UWP, Xamarin to MAUI, WebForms to BLAZOR, MVC, MVVM, MVP, etc
      FW: Dotnet FW to DotNet Std Core, Core to Dotnet.

      The constant change list is endless…

      The reason JAVA is stable and so successful is because of no broad changes like DotNet.