Design your Web Forms apps with Web Live Preview in Visual Studio 2022
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.
In the image below you can see the result when you click the Split button to get the designer into a new horizontal group.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 (
) 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.
- When clicking the Open in Browser button (
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.
Light
Dark
47 comments
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?
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!
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.
Hi Rod, thanks for the suggestion. If I understand correct, you’d like to see designer support for CSS grids and flexbox. This is a great suggestion. It would be great if you could file that as a suggestion in the developer community, more info on how to do that at https://docs.microsoft.com/visualstudio/ide/how-to-report-a-problem-with-visual-studio?view=vs-2019.
Hi Sayed – thank you for listening! Hopefully I’ve posted in the right place under “VS visual designer for CSS FlexBox & CSS Grid”!
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.
Thanks for your feedback.
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.
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.
I thought, that WebForms are dead…
Future is Blazor and still maybe MVC – not this overloaded WebForms…
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
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.
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.
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.
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.
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.
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.
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.
Good job, would be great if you port webforms to net 6!
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.
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.
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.
This is so true, how long have we been waiting for a legitimate hot reload now? lol
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.
Thank you!!
Web form is a more simple system development mode than mvc, stable
See this site: http://www.computerunion.net, asp.net 4.8, css3, c#, html.
Thank you for enhancement to vs 2022
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.
I thought Microsoft was deprecating Web Forms in favor of blazor? Isn’t this a waste of time?
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!
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.
I totally agree with you!
Except for data live, i do not see any difference with the old asp.net designer from 2010 (or less) ?!
Thanks, besides live data we have proper support for the latest browser technologies. For most of the features we are trying to keep consistent with the existing web forms designer.
It seem somebody thought MS waste time to making enhance in webforms, but think about why we can’t have a choice?
think about MVC (4.5, Core), Blazor, Razor Page, as well as non-MS stack like nodejs, reactjs, spring.
Webform is event-driven and having its unique development model, today I see many peoples going backward and spend many time on datagrid, like using datatable.js, Lavarel Admin, Django Admin.
But ASP.NET gridview already get the job done in 15 years ago!
This is a great news!
I hope it will go in the direction of not leaving web forms behind.
If you know how to use it properly there is nothing wrong with it. C’mon guys are you still nitpicking over the viewstate issues? Browsers are different, bandwidth is different, developers are different and (finally) IDEs are different.
There are many projects around based on webforms mostly intranet or backoffices. All of these are mostly running for one reason: the model behind web forms is great and coupled with visual studio allows you to properly be RAD.
It is server side coding and I like it because the code remains safe within the server. When you add Ajax to it then it boosts and runs smoothly like a bullet.
Maybe some of you think it’s easy to use it the wrong way, but I say most of the time the problem is not the gun, the problem is the shooter.
Thanks to the guys who have put in so much hard work and time to develop this new feature. Here it is highly appreciated.
I have used the Visual Studio HTML Form Designer since Visual Studio 2005. VS 2005’s Web Form Designer was my favorite, but VS 2019’s was still very good and very usable. But I just downloaded Preview 3 of Visual Studio 2022 and as it stands now, there is no way I could use this new form designer to replicate the productivity and functionality of the VS 2019 Web Form Designer for my projects and a design workflows. For one thing, in this new web forms designer, I can’t drag absolutely-positioned controls (CSS position: absolute) around on the design surface using my mouse in VS 2022. I am used to designing pixel-perfect absolutely-positioned web forms and putting controls like textboxes, labels, gridviews, etc. exactly where I want them absolutely positioned on the page by simply dragging it to where I want it with the mouse, or nudging it with the arrow keys on the keyboard, and the form designer would automatically update the CSS top: and left: pixel values to where I dropped the control or where I nudged it to with the arrow keys. Your new web forms design surface doesn’t allow this.
The previous Web Form Designer also had a checkbox under Tools -> Options -> Web Forms Designer -> CSS Styling to “Change positioning to absolute for controls added using Toolbox, paste or drag and drop.” I want this option back. When I am designing a form of absolutely-positioned elements, I don’t want to have to manually type style=”position: absolute;” into every single control I drop onto the design surface from the Toolbox. I want to be able to just grab a label from the toolbox, drop it onto the form, and absolutely position it exactly where I want it using the mouse and keyboard, just like I have been able to in the VS 2019 Web Forms Designer and earlier. Unless I can do that most basic thing, I really can’t use your new designer in VS 2022 for my absolutely-positioned web forms which contain dozens, sometimes hundreds of perfectly and meticulously arranged absolutely positioned controls.
Hi Joosh, thanks for the comments. We certainly still have a lot of work that needs to be done to bring this new experience up to parity with the existing designer. From this comment I’m hearing the following suggestions.
1. Make it possible to design the page without needing to run it
2. Better support for absolute positioning
For #1, we are already aware that this is an issue, and we are working to support that.
For #2, we have an item on our backlog to support that, but we have not yet investigated that work yet.
Just to let you know in a future release we will be adding an option to use the previous designer. The idea is that we will continue to work on the new designer even after Visual Studio 2022 ships the initial release.
I also want to be able to right-click on an asp.net control on the design surface of the new Web Forms Designer and choose “Properties” and have it pull up the Properties sheet for that control, just like all of the previous Web Forms Designers could always do. That’s how every form designer in Visual Studio has always worked, even the .NET Windows Forms designer. In your new VS 2022 web forms designer, I first have to click on the control on the design surface so that the text view window jumps to that control in the aspx, and then do a second click on the text in the aspx just to bring up that control’s Properties window. That’s tedious. And that’s just the regular .NET property sheet.
WHERE is the CSS Property window/sheet for the asp.net controls?
In the previous Web Form Designer, I could click on a control on the design surface and then from the menubar at the top click View -> CSS Properties to pull up the CSS Property Sheet for the control. I haven’t figured out how to pull up that CSS Property Sheet for a control in the new VS 2022 web form designer in the 2 hours I have been messing around with it. Does it even still exist? If so, it’s too hard to find and pull up right now. And if it doesn’t still exist, it absolutely needs to. It was an invaluable tool in the VS 2019 web form designer.
Hi Joosh, when you select an item in the new designer the Properties grid is supposed to light up for the selected control, but we have a bug that is preventing that from working. That should be fixed soon hopefully.
Thanks for letting me know about the CSS Properties window not being available, I will file an issue for that today so that we can track getting that updated.
Third, your first listed Known Issue: “Project must be able to build & run in order for the design view to be loaded”
is a deal-breaker at this point as well. All of my web pages have codebehind that checks that the user is logged into a valid session, and if they aren’t, like for example the user just tried to pull up the .aspx page without going through the login and having a valid session, the pages simply do a Session.Abandon() and display a “Your session has timed out!” label. How am I supposed to use your new web form designer to design and lay out a page visually, if the page on the design surface has to be connected to live data, and has to essentially be running in a valid session, executing the codebehind, in order to even let you visually work with the layout of the controls on the form? That’s insane. The visual design surface should not be executing the codebehind while you are trying to design and lay out the form.
I want to be able to do my web form layouts with placeholder data in the controls, offline, with my web app NOT executing/running. I don’t want to have to remove the Page_Load and Page_LoadComplete subs on every codebehind page just to get the design surface to display my controls, and then restore the subs when I am done. (Those page_load subs do more than just security checks, they also change the display of the controls and the visibility of buttons/controls based on other actions the user would have previously taken during their live, running session. Also those subs change the display of the form based on session variables set by other pages in the application, and based on data that gets loaded from the database. So it is crazy, absolutely crazy, that you are forcing the Page_Load and Page_LoadComplete subs from the .vb and .cs codebehind to execute just in order to display the web form design surface in design view.) I want to be able to pull up my .aspx page and see all my controls in the web form designer, WITHOUT ANY of the the .vb or .cs codebehind executing. Can you please fix this? This a really big issue.
I really want to be able to use Visual Studio 2022 to continue building my ASP.NET Web Forms applications but it’s just completely impossible in Preview 3 so far. I really hope it gets better and I am really REALLY happy that the Visual Studio team has people working on Web Forms. Web Forms is a stable, mature, flexible and extremely powerful technology that absolutely should not be abandoned. Web Forms lets one developer do in hours what would take a dev team days in MVC. And not every web application is facebook, having to serve millions of simultaneous users and needing to be concerned about 2ms of overhead (gasp!) on page load times. ASP.NET Web Forms definitely has its place, and it’s a technology I have known and loved for many years.
We are planning a feature where you can design your pages/controls without needing to run the app. We are prototyping that now, and will ship that soon hopefully.
I need to be able to create precise, pixel-perfect, absolute positioned form layouts like this: https://imgur.com/a/3C5AFeI using mouse drag-and-drop positioning, keyboard nudging, and absolute layout options that the VS 2019 web form designers (and all previous versions) had, like holding CTRL to select multiple controls with the mouse and clicking Format -> Align Lefts, Format -> Align Tops, Format -> Make Same Size, Format -> Make Same Widths, etc.
And most importantly, I need the option design such a layout visually on the design surface while the .vb or .cs codebehind is NOT executing and while it is NOT pulling live data from the database.
Look at the .NET Windows Forms designer as an example. You have a design surface, you can drag controls exactly where you want them on the form to-the-pixel, nudge them with the keyboard, change their colors, sizes, properties, text, font, borders, etc. while the VB or CS code for that form/application you are developing is NOT executing. Why would you want the VB or CS code behind the form to be executing while you are working with the graphical design surface, just laying out and styling your controls? Makes no sense.
Web Live Preview would be fine if the ASP.NET Web Forms application you were creating were something like a public blog, where a page is self-contained and looks the same for everyone. But Web Forms applications tend to be corporate intranet applications that users have to log into, and each user has a different role, permission level, group affiliation, and those are all loaded into Session variables by the codebehind on the Login page. And so say you’ve then got a Projects.aspx page (for example) which is going to display different textboxes, buttons, labels, grids, etc. based on the user’s role, permission level, group, etc. How is that supposed to work with Web Live Preview, when Web Live Preview just goes straight to the .vb or .cs codebehind of the one page you’re working with and executes Page_Load and Page_LoadComplete on that one page before it will render any controls to the design surface and let you work with the layout? Using Web Live Preview on the hypothetical Projects.aspx page, the Web Live Preview doesn’t know about the other pages in your application, it wouldn’t have access to any session variables set by the Login.aspx codebehind page or other pages, it didn’t execute that code, so how is it supposed to work? Any code in Page_Load and Page_LoadComplete that depends on variables set by any other pages in the application simply breaks when you try to use the design surface.
As it stands now, the only way I can even get my asp.net web forms pages to display on the new VS 2022 design surface is to remove the Page_Load and Page_LoadComplete subs from my codebehind so that none of the code that depends on session variables set by other pages in the application can execute. So… I’m supposed to do that every time I want to work with the layout of a page? And then put the subs back into the codebehind when I’m done? Are you serious?
I feel like your team is redesigning the ASP.NET web forms designer without first stopping to think about what ASP.NET Web Forms are actually used for, and how the design surface would work for a page in an application that depends on session variables set by other pages in the application such as the application’s Login page.
Web Live Preview is great if you’re creating a magazine, some stand-alone pages that pull a bit of data from a database and that look the same for everyone and don’t change their appearance based who the user is, don’t depend on variables set by other pages, and don’t depend on actions taken by the user on other pages in the application before they reach the one page you’re attempting to work with in the designer.
But in the real world, the layout of an ASP.NET Web Forms page is going to depend on Session variables set by other pages in the application, cookies set by other pages in the application, and actions taken by the user on other pages in the application. Web Live Preview simply does not work for this type of application because Web Live Preview doesn’t consider your application as a whole, it considers each page a self-contained thing and just executes the codebehind for whatever page you are trying to work with. That is why there MUST be an option to use the form designer surface without that designer executing even one line of the .vb or .cs codebehind. There MUST be an option to design a form with Web Live Preview turned OFF, with all your controls on the page just showing placeholder (not live!) data. Just like the VS 2019 (and previous) Web Form Designers, like the .NET Windows Forms designer, like every other WYSIWYG design surface in every IDE I have ever used in my life.
It would be really great if the team designing the new Web Forms designer took the time to sit with some actual developers of complex Web Forms applications so you can see that every application isn’t just a basic magazine or a blog with a bunch of entirely self-contained pages where it’s ok to just start executing the codebehind of a random page somewhere in the middle of the application. You would see first-hand why Web Live Preview needs to have an OFF switch for developers who need to use the visual design surface without the .vb or .cs codebehind for the page executing.
Hi Joosh, thanks for all the feedback, this is great.
“I feel like your team is redesigning the ASP.NET web forms designer without first stopping to think about what ASP.NET Web Forms are actually used for, and how the design surface would work for a page in an application that depends on session variables set by other pages in the application such as the application’s Login page.”
I’m sorry it’s coming off that way. As I mentioned in my other comments, we are well aware that users will need to be able to design their pages/controls without being able to build/run the project. This is a very important feature, and the team is already investigating that.
“It would be really great if the team designing the new Web Forms designer took the time to sit with some actual developers of complex Web Forms applications”
We have met with lots of existing Web Forms users, and most of them are enterprise users. We are aware that the majority of Web Forms apps being developed in Visual Studio are enterprise apps. When you reached out to me on twitter I offered to meet with you, and I will get that setup. User feedback is critical for us to deliver a successful replacement for the existing designer. I really appreciate you taking the time to provide this feedback. Please keep it coming.
ALSO, I have a many, many .aspx pages in my Web Forms applications that can’t display in the new VS 2022 Web Forms designer surface because they have javascripts in the page header of the .aspx file and also in the “body onload=” event. The VS 2022 form designer surface is executing all these javascripts because of Web Live Preview, with no way to turn that behavior off, and it absolutely should not be doing that.
Does the team working on this new web forms designer surface understand that PRESENTATION and LOGIC are two different things? The Web Forms design surface should be rendering the HTML, CSS, and the asp.net controls (with placeholder data) and letting you visually arrange things and style things on that design surface with the keyboard and mouse and property sheets. It should NOT be executing javascripts or codebehind! As you have it now, my only option to work with those pages in the design surface would be to remove or comment out all the javascripts from the head section of the .aspx page, and from the body onload= event too. I’m supposed to do that every single time I want to change the layout of a page, like add a new control or re-style something, and then put all the javascripts back when I’m done? This is absolute nonsense.
This new designer you’re making that executes javascripts and codebehind would only be suitable for the absolute most basic, stand-alone, Megan’s First Web Page type of application. For anything even moderately complex with javascripts in the .aspx and complex, inter-dependent code in the .vb or .cs codebehind, it is absolutely 100% unusable.
I want to use Visual Studio 2022 and I am glad you are working on updating the Web Forms designer surface. But it is so unusable right now, and is missing so many basic features, and it is doing so many completely insane things just to render the page to the designer surface, I’m flabbergasted with what I’ve experienced trying to work with VS 2022 Preview 3 for the last 24 hours. There needs to be a “turn off codebehind AND javascript execution” checkbox (or turn off Web Live Preview altogether, even better!) to STOP the design surface from executing javascript and codebehind. It should just let you work with a visual render of the CSS, HTML and asp.net controls and let you put things where you want them and style them, like the VS 2019 Web Forms designer surface (and all previous versions of it) did. Thank you.
What we have now is still a very early preview, we still have a lot of work ahead of us. I think we are considering all of these scenarios. We will meet soon to discuss in more details to ensure that we fully understand all of your feedback. Once again, thanks for all the feedback. This is really great, and we appreciate it all.
…CONTINUING: I have lots of images used as buttons on my .aspx pages that execute javascripts in the onclick event where doing a server postback would be slow/overkill. For example, I have images that function as Teams call buttons that appear next to users’ names and when a user clicks on one, the javascript onclick event fires and opens a Teams window and starts a Teams call with that person. This control on the .aspx page is just an asp.net Image control with some custom onclick Javascript added, because I don’t want a postback or any communication with the server to handle a basic function like opening a popup window or navigating to another page in the system. So, when I’m in the new VS 2022 Web Forms designer design surface, and I click on one of these images that I use as Teams call buttons because I want to move it somewhere else on the form, or change its properties or styling, the javascript onclick event fires and opens a Teams window! I’m on a design surface doing layout and styling, not running the application. When I click on something, I’m clicking on it to select that thing to perform some design action on it, I don’t want the javascript onlick event firing in the design view. I want the javascript events to fire when I am specifically previewing a page, running the app, but not when I am just on design surface trying to move things around and style them.
Sounds like the feature that we are working on to enable the designer without running the app should solve this as well.
When using the new designer, when you click on something it should just select it, not execute it. If it actually executing the click event, then click on the Visual Studio logo at the bottom right of the design view and select “Enable Inspector”. That should put it back into mode where clicking on an item just selects it.