47

I guess that most people that use Visual Studio had my same reaction when they created their first ASP.NET MVC project: where did the Design View end up?

When using classic Web Forms to develop an application in Visual Studio, the Design View is really handy, it helps you to create user controls and other components in your webpage by simply drag and dropping the item from the toolbox to the design page. Although it does not allow positioning and advanced styling, as Dreamweaver does instead, it is a really useful feature if you want to avoid painful HTML formatting and CSS styling (or you do not have good knowledge of HTML).

Is there any way to use a graphic designer to create the View layout and then integrate the design with the "logic" part of the View (the one that uses the model to populate/submit the data from/to the controller)?

GEOCHET
  • 21,119
  • 15
  • 74
  • 98
CiccioMiami
  • 8,028
  • 32
  • 90
  • 151
  • This has been asked before: http://stackoverflow.com/questions/4551300/asp-net-mvc-razor-designer – Linkgoron Apr 11 '11 at 14:48
  • 10
    The Asp.Net MVC framework is a concerted effort to get AWAY from the needlessly complex and inflexible abstractions of web-forms and drag-and-drop development. You'll find that most developers who use MVC are very glad to be rid of the designer. – Brook Apr 11 '11 at 14:50
  • 1
    I think Microsoft is changing their position on this see my answer below http://channel9.msdn.com/posts/Visual-Studio-vNext-Introducing-Page-Inspector. Not drag and drop but it joins client view to the developer view – GraemeMiller Oct 14 '11 at 14:02
  • 11
    Not sure why folks dislike the design view/split code-design view. Sure beats switching to a web browser. Some kind of live preview by the side would be great especially for nested views. And for those who don't like the live preview feature - don't use it! Personally I'd prefer the rendered HTML/CSS side-by-side as I code the HTML. – DeepSpace101 Feb 23 '12 at 05:34

4 Answers4

27

I guess that most people that use Visual Studio had my same reaction when they created their first ASP.NET MVC project: where did the Design View end up?

Not at all. Personally I never used the design view in classic web forms and when I migrated to MVC it didn't really make any difference. And not only this, it doesn't make any sense to use it anymore. I am very happy that there is no designer messing with my code anymore. I have enough headaches with Intellisense, if you use a designer which touches the code behind the scenes things will get messy. All I need is working Intellisense which completes the tags and ideally understands HTML5.

As far as designing web pages is concerned you may take a look at the Expression tools.

Darin Dimitrov
  • 1,023,142
  • 271
  • 3,287
  • 2,928
  • 6
    thanks for your answer. Actually I didn't like it either when the designer was messing with my source code as well. However it was quite handy to have the opportunity to create the page layout, for instance by positioning the div tag either absolute or relative, and then placing the html tags accordingly. – CiccioMiami Apr 12 '11 at 07:16
  • 5
    I did not like it at all that MVC didn't have a designer. I believed rather than dumping the designer, that they needed to design a better one. One that did not 'mess with the source code' like the @CiccioMiami pointed out. However I did get used to the MVC style quickly. Still I found myself checking what it looked like in a browser often. More time consuming or less? I don't know. I believe the reason you hear coders saying they never used the designer was 1) Macho (I code only in notepad!) 2) Especially for larger projects, it did sometimes alter or not display them right. – Robert Koernke Jan 17 '16 at 12:41
  • The Expression tools link is dead – Alde Jun 02 '20 at 20:19
20

Yes, I had that same reaction, coming from a webforms background. I need the constant feedback of a graphical designer to let me know what effect my code is having. Learning MVC is a big enough learning curve in and of itself without having to do it blindfolded.

Now that it's 4 years later, I don't mind saying Page Inspector is built in to VS 2013. If you're still using VS 2010 in 2015, all I can say is, if you upgrade, you'll never look back.

Just right click on the code and choose View in Page Inspector. There's an Inspect button in the inspector that you can use to see where an element of the design is located in the code. It can save you beaucoup time.

EDIT

And it looks like they removed it from Visual Studio 2015 and didn't even bother to post an explanation as to why. Smh...I'll update this if I find a 3rd party solution.

toddmo
  • 20,682
  • 14
  • 97
  • 107
  • +1. If using razor v3 after viewing in chrome and then stopping debug, you can hit ctrl + alt + enter and it will refresh your browser view if left open. – kyle Jan 07 '16 at 16:50
  • 3
    Visual Studio gets its name from the early pre .Net versions that were specifically designed to help create applications Visually. Visual Basic distinguished itself from other Basics at the time by encouraging a top down drag and drop visual approach and this was very very successful ! Now that this is no longer possible with modern web development I think it's only fair they drop 'Visual' from the IDE name – userSteve Aug 24 '18 at 07:44
  • 1
    Visual Studio is not just MVC. It still supports forms too, as well as console programs. – Don Dilanga Aug 25 '18 at 16:15
7

If you are looking for designer to get instant feedback of the HTML/cshtml changes, this can be achieved by BrowserLink feature in Visual Studio. Fire the browser and hit the page/view you are currently designing and when you make any changes to the mark up/cshtml, hit the refresh button within Visual Studio, updates made to the code will be immediately pushed to browser.

Other alternate is to use Chrome Developer tools (F12) and using "Edit as Html" feature.

I know these alternates are not rich as native designer view support in Visual Studio, but these are some practical workarounds.

Venkatesh Muniyandi
  • 5,132
  • 2
  • 37
  • 40
7

I think they are working on that as a feature for Expression Blend 5 Developer Preview .

They clearly recognise the issue of designing JS in the designer so I suspect they realise the same applies to some designers working on MVC applications.

I was told by someone from Microsoft "I think in Blend for HTML, using interactive mode, you would probably be just fine with designing MVC or MVVM patterns"

Also check out Visual Studio Page Inspector it looks like it will do what is needed

Now use WebEssentials with BrowserLink in VS2013 or up

GraemeMiller
  • 11,973
  • 8
  • 57
  • 111