Web Design Visual Studio

[Leysan Torri]

aylineok Yes. I am very much aware of Hot Reload, but it doesn't give me the same level of comfort. One thing is that I need to run the application once. Also, if I have to see it in different devices, then I have to keep on changing the target device and run the application.

In XAML there is no view source similar to HTML where I can manipulate divs and see the result in the browsers. I wish we had all these features, but by the time they come out, we will be retired or dead.

@LearningNewthings I originally wanted a UI but I quickly learned the syntax and I think you'll be impressed by how quickly you pick up the syntax, especially with the help of HotReload. I think it's similar to how I originally started HTML work with Dreamweaver using the UI creation, but soon started using code and the property window to explore and edit properties I didn't know by heart.

To me, the strength or weakness of any UI toolkit is the quality of its visual editor. When the two are not the same, that's an instant huge red flag.

Maybe it's because I saw GUIs introduced, learned the UI ropes on the ST and the Amiga. I work on backend systems. I built HTML, RXML, and XSLT websites, and I've used XAML for UWP.

That MS haven't yet ported their designer/previewer tells you everything you need to know about long-term viability of the current state of MAUI: It's an option for anyone already heavily invested in XAML-centric development, but the rest of us probably have to stick with Qt/GTK/Flutter/Imgui for the time being.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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;

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.

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.

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.

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.

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!

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.

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.

I need to be able to create precise, pixel-perfect, absolute positioned form layouts like this: 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.

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.

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.

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.

3a8082e126