Question 86132 in ASP.NET Question posted in
The official documentation can be found here.

Visual Studio 2022 Enable Web Live Preview – Asp.net

I wanted to try developing a website in VS but I’d really like a visual (WYSIWYG) editor. Apparently, this is available in VS. In that video, and lots of other videos and websites, it shows ‘Design’ and ‘Split’ buttons on the window, which should show a live view of the web page that’s open. It seems this is supposed to work with both .aspx and .cshtml files.

However, nowhere can I find how to enable this, and I’ve done a lot of searching. I’ve even uninstalled and reinstalled VS. There are no options, settings or menu options to enable it. I’m using VS 2022 Community, fully up to date, in an ASP.NET Core Web App project using .NET 7.0.

Does anyone know what’s wrong? I wondered if it was only available in VS Professional/Enterprise, but seemed silly to me.

Tags:

2

Answers


  1. 0

    You can find it by creating an asp.net web (.Net Framework) and selecting Web Form in it.

    I use vs2022 17.4.2 community version

    enter image description here

    You can also view its settings in the tool.

    enter image description here

    Login or Signup to reply.
  2. 0

    that feature in the brand new vs2022 is for ONLY .net framework, and ONLY for web forms.

    So, if you using MVC, then you don’t have a forms designer.

    And if you using .net core, then you can’t use this feature either.

    So, when you create a project, it MUST be .net framework (not .net core), and it MUST be a webforms project, and NOT MVC projects.

    So, that would be say this (for c#).

    enter image description here

    And (best choice) would of course be this template:

    enter image description here

    And if using vb.net, then again, same thing:

    So, web projects, and .net framework – NOT .net core projects.

    thus:

    enter image description here

    So, out of those templates, then again, of course a asp.net web application would be the preferred choice.

    so, for example, here is a gridview in "live" preview, and yes you can edit or drag + drop controls into that live preview.

    it looks like this (split screen for example).

    enter image description here

    but, if I run the page, same in a chrome based browser (Edge, or chrome).

    Then I see this:

    enter image description here

    Since the new designer is based on the chrome engine then as above shows, yes, it is rather cool.

    Here is that web page, not split view in the designer:
    (so I have NOT yet hit f5 to run, but only am in design mode)

    enter image description here

    so, in old legacy designer, I would see/get this:

    enter image description here

    So, note how do you DO NOT see say for example the bootstrap menu bar.

    But, if I turn on live preview, and now I see/get this:

    enter image description here

    Note how we now even see the bootstrap menu bar in the preview – I have not yet hit f5 to run in browser. And on the bottom, you see a "bread-crumb hierarchy" as to what element you clicked on (very much like f12 debug tools in a browser, and then using "elements" selection).

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search