Razor makes it really easy to start from an existing page
and refactor it to use a layout. Let’s do that with our simple sample
above. Our first step will be to add a “SiteLayout.cshtml” file to our
project under the \Views\Shared folder of our project (which is the default
place where common view files/templates go):
SiteLayout.cshtml
We’ll use the SiteLayout.cshtml file to define the common
content of our site. Below is an example of what it might look like:
A couple of things to note with the above file:
It is no longer necessary (as of the ASP.NET MVC 3 Beta) to
have an @inherits directive at the top of the file. You can optionally still
have one if you want (for example: if you want a custom base class), but it
isn’t required. This helps keep the file nice and clean. It also
makes it easier to have designers and non-developers work on the file and not
get confused about concepts they don’t understand.
We are calling the @RenderBody() method within the layout
file above to indicate where we want the views based on this layout to “fill
in” their core content at that location in the HTML.
We are outputting the “View.Title” property within the
<title> element of our <head> section. I’ll discuss how this
is used in a bit.
And now we have a common layout template that we can use to
maintain a consistent look and feel across any number of pages on our site.
Index.cshtml
Let’s now update our Index.cshtml view to be based on the
SiteLayout.cshtml file we just created. Below is an first-cut of what it
might look like:
A couple of things to note about the above file:
We did not need to wrap our main body content within a tag
or element – by default Razor will automatically treat the content of
Index.cshtml as the “body” section of the layout page. We can optionally
define “named sections” if our layout has multiple replaceable regions.
But Razor makes the 90% case (where you only have a body section) super clean
and simple.
We are programmatically setting the View.Title value within
our Index.cshtml page above. The code within our Index.cshtml file will
run before the SiteLayout.cshtml code runs – and so we can write view code that
programmatically sets values we want to pass to our layout to render.
This is particularly useful for things like setting the page’s title, as well
as <meta> elements within the <head> for search engine optimization
(SEO).
At the moment, we are programmatically setting the Layout
template to use within our Index.cshtml page. We can do this by setting
the Layout property on the View (note: in the first preview this property was
called “LayoutPage” – we changed it to just be “Layout” with the ASP.NET MVC 3
Beta). I’ll discuss some alternative ways (new with the ASP.NET MVC 3
Beta) that we can set this property shortly.
And now when we request the /Products URL within our site,
we’ll get the following HTML returned:
Notice above how the returned HTML content is a merge of the
SiteLayout.cshtmk and Index.cshtml. The “Product Categories” title at the
top is set correctly based on the view, and our dynamic list of categories is
populated in the correct place.
