ASP.NET MVC 3: Layouts with Razor
page 5 of 10
by Scott Guthrie
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 49293/ 87

Refactoring to use a Layout

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):



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.


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.

View Entire Article

User Comments

No comments posted yet.

Product Spotlight
Product Spotlight 

Community Advice: ASP | SQL | XML | Regular Expressions | Windows

©Copyright 1998-2024  |  Page Processed at 2024-05-25 11:39:17 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search