Where Did My Master Pages Go?! An Introduction to Layouts in ASP .NET MVC 3

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.

The Layout

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.

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
</head>
<body>
    <h1>This is the Home Layout page!</h1>
    <div>
        @RenderBody()
    </div>
</body>
</html>

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.

The Model

Now, we can create a simple Model. The Person class will hold some primitive information about a human.

public class Person {
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string TwitterHandle { get; set; }
}

The Controller

We can create a new Controller by right-clicking the Controllers folder and selecting Add => Controller. Remember, your controllers should always end in the word Controller.

public class HomeController : Controller
{
    private Person p = new Person();

    public ActionResult Index()
    {
        p.FirstName = "Robert";
        p.LastName = "Greiner";
        p.TwitterHandle = "@robert_greiner";
        return View(p);
    }
}

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.

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 Person object.

Right-click the Home folder in your project and click Add => 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

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Home/_Layout.cshtml";
}

<h2>Index</h2>

<h3>Person Information</h3>
@Model.FirstName<br />
@Model.LastName<br />
@Model.TwitterHandle<br />

@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 Model object.

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.

The Results

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.

Creative Commons License

What do you think?