CSHTML WYSIWYG editor/previewer

Question

I wanted to create an Asp.net Application, but I can't find a WYSIWYG editor in Visual Studio or even a Previewer, is the only way to see what your page looks like to compile and run the Application?

Answer 1

If you adopt asp.net + web forms? Then yes, you get a designer that you can drag + drop controls onto that web form. Given that MOST developers when asp.net came out were desktop developers?

This was and is a transition type of technology for those coming from the desktop. Even the code-behind on a web form? It was REALLY nice and again oh so familiar to desktop developers.

But now? Well, most developers don't come from a desktop background. So, they never really started out and enjoyed a drag + drop and a Wysiwyg forms designer.

So, if you adopt and create a new Visual Studio project, but choose MVC/razor?

There is no forms designer and no designer Wysiwyg concept.

is the only way to see what your page looks like to compile and run the Application?

Not always!

Launch + run the project on the web page you are working on.

You go into the markup page, change some markup and say modify some JavaScript? just hit ctrl-s to save, and go back to the web page, and refresh (f5 or click on browser refresh button). The page will re-load. this takes about 1 second.

If you modify the c# (or vb.net code), then you have to exit the web browser and re-start the application (so yes, your only option is to re-compile).

So, once you have the page created, you can leave that page running, make some changes to the markup page, ctrl-s, and now flip back to the web page and re-fresh. It takes VERY littlie time, and you don't need to re-compile the application in this case.

So, now you quite much: leave the web page running for tweaking and change of markup. You use the web browser inspector (f12) to view elements, debug JavaScript etc.

For those that never used nice RAD desktop development like Visual Studio has for desktop? Or asp.net web forms? Well, they don't know what they are missing so they don't complain much. And the flip between quick changes to markup, save and then back to the web browser and refresh? (and of course with two monitors, then the web page and markup are viewed at the same time). This is very fast to see your changes.

It is unfortunate that the industry in general is fast moving away from that great desktop paradigm in which drag + drop of controls, and then jumping to the code behind code snip for the controls events is quite much a thing of a past for web development.

Because of the above? I am still using asp.net + asp.net web forms. But I had a very strong desktop development background, so I am used to working this way. But for web development? Well, due to the rise of bootstrap, jquery.ui and the most stunning technology called css? Well, the drag + drop and having a system to "render" the form in a IDE environment is VERY difficult.

And the reason is that web technology and things like css etc. are changing so fast, that it NOT practical to build a form rendering engine that supports all of these new and fast moving technologies like bootstrap and css.

In effect that preview and W system is the browser, and trying to keep up and build a system to "render" the web page is VERY difficult, since in effect you need a full blown web browser inside of VS to do that rendering.

Visual Studio really can't keep up with the browser rendering technology, so it VERY difficult to include a web rendering system inside of Visual Studio. So, they don't and you now have to use a browser for this preview.

This is not a the end of the world, and for those that never used Visual Studio for web forms or desktop development? They just edit the markup, ctrl-s, and then refresh the web page - it is quick to see the changes.

However, for those of us that enjoyed the drag + drop and Wysiwyg cycle?

We miss this old way, and we have to bite the bullet and give up what amounted to one of the most stunning and welcome changes in our industry when Visual basic hit the scene in the early 90's.

That drag + drop, tied up a forms designer, and seamless writing of event code tied to EACH control you drop into that GUI was one of the most significant changes in our industry. And it had a spectacular effect on ease of development and programmer productivity.

Unfortunately, times change. Many a developer did NOT cross the bridge from say green screen text based software to windows GUI software. They could not handle the new way of doing things.

And now desktop vs web? This lovable way of working with a GUI and drag + drop is fast fading in our industry.

I do hold out great hope now that jquery.ui and things like bootstrap are reaching maturity (not changing so darn fast).

so, we may VERY well see the return of a drag + drop GUI approach. I think for any bootstrap or jquery dialogs? This should be a familer tool box and a drag + drop to a form.

Same goes for applying css to controls etc. A developer should not have to manually select + type this stuff into a plain jane text editor. In this light, I think the industry has taken a step backwards - but it has no choice - the web is forcing this change.

To be far, inteli-sense is fantastic, but we all going to miss this GUI and Wysiwyg approach to software.

To to answer your question: No, the MVC choice in Visual Studio no longer supports a GUI preview - you have to use a browser for this part of the development cycle.

After all, Visual Studio can hardly keep up with the fast moving browser technology and changes occurring in regards to web browsers in our industry.

#Edit

Just to note, you can even in VS 2019 still choose to create a asp + web forms project. asp.net web forms are still very alive and well, but the industry and even asp.net is fast moving away from the original asp.net web forms. It is still a viable choice, but is considered older or dare I say now a "legacy" technology choice. If one is coming from the desktop, then I still think asp.net web forms are still a great choice to get you up and running as fast as possible if this is all new to you.

Answer 2

Sorry but I can't comment on another answer yet otherwise this would respond to the link to CKEditor. The following is intended to save those looking at the responses from having to spend the time understanding what CKEditor can and can't do like I had to when looking for potential solutions for the question the post author asked.

RE: CKEditor by Alan, I have been playing with it for this purpose (WYSIWYG Editor), I created a "custom" editor and downloaded it per CKEditors instructions. It seems to be reasonable to help construct the initial structure of your page and then access html source to leverage in your application, but it didn't seem to be that good when you start creating the actual input fields etc in there (I didn't get more complex than that). Don't construct the editor using the Markdown option if you want the HTML source (they didn't seem to play well together).

Personally I ended up using Albert's suggestion of constructing my page using ASP.NET Web Forms to get the structure, then amended to fit within my Razor/.NET web project. (I am one of those dinosaurs that started with some Windows dev ;) but can appreciate the benefits of some of the newer formats).