ASP.NET MVC Razor designer

asp.net MvcRazor

asp.net Mvc Problem Overview


I am introducing ASP.NET MVC to a new team and one of the questions that comes up often is "Is there a designer view"

Even if it's not for layout is there an IN visual studio design view for ASP.NET MVC3 using the razor view engine.

asp.net Mvc Solutions


Solution 1 - asp.net Mvc

No, there is no designer. It would likely be difficult for a designer to even know what is meant by Razor code in many cases.

It's really not so difficult to just use your web browser as a viewer. You can make changes to the HTML without having to recompile, just make the change, save, and refresh your browser.

EDIT (8/2/2013)

Since this answer was originally written, Microsoft has released Visual Studio 2012 which includes a feature called Page Inspector, which while not a true "designer" in the way that the question was written, it does give a much nicer semi-live preview mode. This has been improved in Visual Studio 2013 (which was RTM'd today, 10/17/13).

Solution 2 - asp.net Mvc

I use a web browser window and set the url my localhost in place of the designer. view > "other windows" > "web browser". I then split the windows vertically or horizontaly.

Solution 3 - asp.net Mvc

I was able to work using the following trick:

  1. change the razor file's extension to .html
  2. Open the document
  3. with the document open, change file extension back to .cshtml

Congratulations, you now have a designer's view of the razor file. If you need razor intellisense, close and re-open it.

Solution 4 - asp.net Mvc

No, in general you should try and steer clear from visual designers. The combination of HTML/CSS/Javascript is something that just cannot be done well with visual designers and the short term pain of learning these manually will be well worth it. Once you know these well you will be coding in a cleaner and quicker way. I often use Expression Web to do initial layouts before copying it to Visual Studio.

Solution 5 - asp.net Mvc

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

In Visual Studio 2013 added browser link this allows two way communication between browser and Visual Studio. It means you can refresh browser when you change code and instantly see how it looks. Also you can change Css in the browser and have it saved in Visual Studio

Solution 6 - asp.net Mvc

I know I am late to the party, but..

You can trick the IDE as mentioned above, but if you are building applications in MVC, you should be comfortable in code view. It is more productive and most of the responsive design and css implementation can give you false results in design view. Designer is useful in WebForms. But with the Browser Link feature in Visual Studio 2013, there is no longer any reason to trick your IDE, you can have one-to-many browsers open and get live updates back and forth from browser to visual studio. Can't beat that! The browser is where it's at!

Browser Link!

Install the following and you will be golden!

Microsoft Visual Studio 2013 Update 3
Web Essentials (Dependent on VS Update 3)

Solution 7 - asp.net Mvc

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestiondetroitproView Question on Stackoverflow
Solution 1 - asp.net MvcErik FunkenbuschView Answer on Stackoverflow
Solution 2 - asp.net Mvc4ksView Answer on Stackoverflow
Solution 3 - asp.net MvcBraveNewMathView Answer on Stackoverflow
Solution 4 - asp.net MvcCraigView Answer on Stackoverflow
Solution 5 - asp.net MvcGraemeMillerView Answer on Stackoverflow
Solution 6 - asp.net MvcEric BishardView Answer on Stackoverflow
Solution 7 - asp.net MvcSumantaView Answer on Stackoverflow