Is there a way to add a designer view for the cshtml razor editor?

Question

I am using an inhouse tool we developed to parse razor templates with generated models. The thing is that now it requires loading the template every time in order to parse it. I wanted to add an edior so i could preview the cshtml while writing it, so i thought the best way would be to make it a visual studio extension.

I researched the web and it seems to me like you can write a custom editor for VS, but then I have to write the editor itself, which i dont want to do.

Is there a way to use the existing razor editor built in to VS2012 and add a preview tab with my control that gets the current text from the razor editor so i can parse it and show the preview?

The reason want to use the existing editor is for coloring, intellisense, error handling etc.

Answer 1

There is no built-in support for a design view for Razor (CSHTML and VBHTML) files. Part of the reason for this is that they are a mix of code and HTML, which ranges from "very difficult" to "super impossible" to parse.

Having said that, there's a super cool feature in VS2012 called Page Inspector that can show you the real rendered page alongside the code that generated it (e.g. your Razor view) and the mappings between them, even if some of the content came from a layout page or partial view.

Check out http://msdn.microsoft.com/en-us/library/hh420390(v=VS.110).aspx and look for the "Page Inspector" section, which includes links to several blog posts and videos that describe the feature in depth.

Here's an excerpt:

Page Inspector is a tool that renders a web page (HTML, Web Forms, ASP.NET MVC, or Web Pages) directly within the Visual Studio IDE. You can use Page Inspector to examine both the source code and the resulting output. For ASP.NET pages, you can use Page Inspector to determine which server-side code has produced the HTML markup that is rendered to the browser. Page Inspector works even when the default ASP.NET bundling and minification features are enabled.