One of the new features of ASP .NET MVC 3 is the Layout. Layouts in MVC 3 replace the master pages that we have been faithfully using over the past several years.
I thought I'd put together this little demo to show you how to get started with Layouts in ASP .NET MVC 3.
First, let's start off by creating our Layout. You can create a new layout by right-clicking on the View folder you want to apply the layout to and select
Add new Item =>
MVC 3 Layout Page (Razor).
By convention, all Layout pages are prefixed with an underscore so they can be differentiated from normal Razor Views.
As you'd expect, the Layouts you create are only accessible by the Views that are located in the same folder. If you want your Layout to be used by all of your Views across your application, then the Layout should be placed in the Shared folder.
My absolute favorite thing about the Razor View Engine is its simplicity. This is a much cleaner way to implement master page type functionality in a web application. Notice the absence of ContentPlaceHolders and other fluff that isn't needed anymore. Plus, you get the added benefit of using HTML 5 by default.
The Razor View Engine uses the
@RenderBody() method in place of a content place holder. Razor is smart enough to know what to include from your View s you don't have to worry about telling it.
In this example, our Layout will include all of the necessary HTML scaffolding for our page and include an
<h1> tag with some information about our site.
Now, we can create a simple Model. The
Person class will hold some primitive information about a human.
We can create a new Controller by right-clicking the Controllers folder and selecting
Controller. Remember, your controllers should always end in the word Controller.
This is a standard controller that will be called when the website root is requested by the user's browser. In here, we simply build up our model object with some data and send it to the View.
All that is left to do now is to create our View, assign our Layout to it, and print out the contents of our
Right-click the Home folder in your project and click
View to set the options for our new View. We will want to create a strongly-typed view and set the Layout page to the one we created at the beginning of this post. Your options should roughly match the screenshot below.
Once our view is created, we can add the code needed to print out the contents of our Person object.
@model MVC3Layouts.Models.Person will strongly type our View to the
Person class. This allows us to directly reference the members of
Person directly from the
Notice how clean Razor allows us to keep our Views? This new syntax allows the web developer to focus on what is important (good markup and content) without getting bogged down with heavy domain-specific syntax.
This View will render the following HTML page:
And that's it! We now have a fully-functioning ASP .NET MVC 3 site that uses Layouts.