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.

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#).
And (best choice) would of course be this template:
And if using vb.net, then again, same thing:
So, web projects, and .net framework - NOT .net core projects.
thus:
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).
but, if I run the page, same in a chrome based browser (Edge, or chrome).
Then I see this:
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)
so, in old legacy designer, I would see/get this:
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:
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).

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
You can also view its settings in the tool.

Related

Visual Studio - Adding New Item - Why so few options available?

I am using Visual Studio 2022 with an old ASP.Net Webforms application. When trying to add a new item (such as an aspx page or class), I am only getting the following options:
On other "modern" projects, I get to see full options. Under 'Online', there is nothing available. What am I missing here?
Search this up on your apps. If it is available, you should be able to download and install plugins and "modern" projects there.
Click on modify.
Then choose desired platforms.

Browserlink CSS autosync not working ASP.NET Core 2.0

I cannot get the CSS to sync in ASP.NET Core 2.0.
Here's what I do:
Create brand new application using MS template
Launch the generated template (app.UseBrowserLink() is present)
Try to modify site.css by setting the background-color to yellow
Nothing happens
I have the CSS autosync enabled, in the browserlink dashboard I can see the connected browser and I can also use the Refresh button on the dashboard
.
Funny enough, when I create a new project using the classic old ASP.NET MVC template, CSS autosync does indeed work, however I cannot make it run on ASP.NET Core template
I've also tried installing the BrowserLink.Loader assembly and referencing thatone but to no avail...
Any help greatly appreciated
It looks like this is an open issue with Visual studio, and as of October "CSS Auto-Sync isn't supported on ASP.NET Core yet".
Something you could try is to use Chrome's "add folder to workspace" feature as suggested here and you can also try enabling browser link for static files which has helped some people to make it work.
You can also vote on this to encourage Microsoft to implement CSS autosync for ASP.NET Core.

F12 Go To Definition not working for CSS in CSHTML files - VS2017

I am working on my first Asp.net Core 2.0 Mvc web site.
Normally I use web forms, but I'm trying something new.
In my .cshtml files I cannot F12 or right click and "go to definition" on CSS classes. I thought something may be wrong with my install but I was able to open up a web forms application and it works just fine from an ASPX page.
I have seen topics from 2013 about this issue, but no solutions.
I have installed web essentials, but that didn't work either.
This is something I use regularly and it is hard to do it manually especially when you are looking at a minified CSS file.
I'm using Visual Studio 2017 Pro.
The ReSharper extension for Visual Studio adds this feature.
https://www.jetbrains.com/help/resharper/ReSharper_by_Language__CSS__Navigation.html#navigation-within-css-file

BrowserLink MVC 6 - Not Working - No Extra Code Injected

How do I get BrowserLink to work in MVC6 - using RC1 Release 1. Using Visual Studio 2015 Update 1.
Browsers never appear in Browser Link dashboard. No extra js is injected or extra web calls made by site so it just seems to not be adding browser link code.
I have app.UseBrowserLink(). I am running in Development mode, debug. I have tried CoreClr and Full Framework. This happens even with a brand new Asp.net 5 web template with no changes made to it.
What else do I need to do? Does Browserlink actually work for anyone with ASP.NET 5 RC1?
I would also add I ran older projects based on MVC5 and Browserlink works on them without issue.
Seems to be an issue with the installation of "Microsoft ASP.NET 5 RC1 Update 1". Go into Control Panel > Programs and Features > Click "Microsoft ASP.NET 5 RC1 Update 1" and press Change > Repair.
Fixed it for me on three of my development machines.

Drap and Drop in Eclipse for Web Projects

Is there an equivalent drag and drop style for Eclipse (or any IDE in Java) for J2EE or JSP that is similar to the IDE feel of ASP.NET in Visual Studio? ASP.NET allows you to drag and drop controls to a web form or web page.
Netbeans IDE is the answer of your question. You can design your JSP pages like you are designing Asp.NET pages in Visual Studio. Here is the link of this feature of Netbeans.
Netbeans Visual Web Design http://www.netbeans.org/images/v6/5/screenshots/visual-web-jsp.png
I don't know Visual Studio's capabilities, but Eclipse of course offers visual editors in form of a plugin. Here's an example of a JSP editor (http://www.myeclipseide.com/module-htmlpages-display-pid-12.html). There are also editors for Swing GUIs etc. Just Google for "visual editor/designer eclipse jsp".
I had this same question this morning, so I downloaded Eclipse and tried to figure it out (I typically use Visual Studio). Here it is, but it is apparently not nearly as capable as Visual Studio Design View. Create an HTML file, and then right click on the file and select Web Page Editor.
I learned about it from here, it was difficult to find. http://dev.eclipse.org/newslists/news.eclipse.webtools/msg13837.html
I would love to see a comparison between VS Design View and Eclipse Web Page Editor; seems like building UIs for the Internet still (after many many years) a mess.
Screen Shot of Eclipse Web Page Editor
Eclipse Web Page Editor http://www.petegordon.com/eclipse_web_page_editor.jpg
Visual Web Pack - http://netbeans.org/community/magazine/html/03/visualwebdev/ , which provides you with all the resources you need to create a proper page with customizable designed.
You put no restrictions on your IDE, so I can safely say that it is for NetBeans (only build 5.5, however). It is a discontinued project, but whatever is already made, is made to last a while. Strongly suggest.

Resources