Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / .NET

Live View of Web-page Developing MVC Apps within Visual Studio 2012

5.00/5 (3 votes)
1 Oct 2013CPOL 11.5K  
Get a quick view of your MVC app as you code
Here's a quick tip that will ease the pain of having to go out to the browser every time to check and recheck how things are looking and working while developing in MVC.

Introduction

While I love developing in MVC to bits, one of the annoying things is having to go out to the browser every time to check and recheck how things are looking and working. This issue hurts even more when you want to test how things are working/looking on a form that's embedded deep within your application. Here's a quick tip that eases the pain greatly...

Setup

For a quick test, create a new standard MVC project, go into the index.cshtml page, right-click anywhere and select "View in page inspector". Visual Studio will build the app and open an embedded window showing the app.

Image 1

Pretty useful - here are a few screens showing it in detail, including some sample data flowing out of a controller:

Image 2

Image 3

When you make a change in your code, the Page Inspector goes out of sync, showing a yellow warning box... to rebuild/refresh the page, just hit CTRL + ALT + ENTER.

Image 4

Handy, enjoy! :)

P.S.: As an update, here is a very short (3 or so minutes) run-through by Mr Hanselman - well worth your time!

History

  • 6th September, 2013: Initial version

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)