MVC – common layouts

In the simple example of a comic shop we’ve looked at so far, we’ve created a couple of very basic web pages using MVC 4 and Visual Studio. Many web sites have a ‘look and feel’ that is common to all their pages. There are two separate aspects to this look and feel. One consists of things like the colour scheme, font types and sizes for various headers and text, background images and so on. These things are usually specified in a CSS (cascading style sheet) file, and that’s not what we’ll look at here.

The other aspect consists of features such as headers and footers that appear on every page. These features are a matter of content rather than style, and as such, aren’t specified by a CSS file. It’s these features we’ll be concerned with here.

MVC allows us to create shared views, that is, views which are common to more than one page. One commonly used shared view is the layout view. When we create an empty MVC project, as we did in creating the comic shop site, there are, as you might expect, no shared views or layout files created, so we need to create our own. (If you selected one of the ready-made applications when you create the project, you would get a layout (and a CSS file) created for you, but it usually requires some extensive modifications to customize it for your own site, so it’s a good idea to start from scratch to get an idea of how these files are structured.)

First, we need to tell the server where to look for a layout file. If you’re using the Razor view engine (which is standard for MVC 4 sites), the construction of a view begins with a reference to a file called _ViewStart.cshtml, which is located in the top level of the Views folder. An empty project won’t have this file, and if it doesn’t exist, Razor just carries on to the requested view and builds it on its own.

So the first thing to do is to create this file. In Solution Explorer, right click on the Views node and select Add –> View, then give the name of the view as _ViewStart (note the underscore at the start). Uncheck the “Use a layout or master page” box and then click the Add button.

Delete all the code in this file and replace it with:

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

This tells Razor where the layout file is found. If you try running your web site now, you’ll get a ‘file not found’ error in the browser, which shows you that Razor is indeed looking for this layout file.

The next step is to create this file. First, we need to create the Shared folder, so right-click on Views in Solution Explorer and then Add –> New folder. Name the folder Shared.

Now right click on the Shared folder and add a view called _Layout (again, note the leading underscore). You’ll get a file with the following code in it:

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>_Layout</title>
</head>
<body>
    <div>

    </div>
</body>
</html>

If you now try to run your web site, you’ll get an error message saying that the “RenderBody” method has not been called. RenderBody() is the method that, not surprisingly, renders the body of the page, and without it, you wouldn’t get any of your view code displayed. To fix this, insert the line

@RenderBody()

at line 14 in the file. That is, put it inside the <div> tag within the <body> of the layout. Run your web site again and if all goes well, you should see the same page we had in the last post, with a list of comics in the database.

So far, we haven’t actually added anything to the site. However, now we can start to see the power of the _Layout file. Suppose we want a common header such as “Comic Shop” to appear on all our pages. We could type this header in every View file, but that’s very repetitive and error-prone. A better way is to insert this common content into the _Layout file.

For example, to have a common header on all our pages, we can insert the line

<h2>Comic Shop</h2>

after the opening <body> tag on line 12. Open the home page and you’ll see that this header appears on your page. Go to the Add page (where you can add a comic to the database) and you’ll see the same header appears there too.

Note that in order for _Layout to be applied to a view, that view must be created with the “Use a layout or master page” box checked. As it says in the dialog, leave the name of the layout page blank if you’ve specified it in the _ViewStart file as described above.

We can insert all sorts of stuff into the _Layout file to create as complex a common layout as we like, but you get the idea. (As another example, you might want to change the title of the page to ‘Comics’ by changing line 10.)

Advertisements
Post a comment or leave a trackback: Trackback URL.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: