Lately I'm playing around with ASP.NET MVC, a great framework to built dynamic web pages on top of .NET framework. If you have used ASP.NET in the past, the common layout has been available as a master page. Even better, you had an opportunity to “nest” masterpages and thus provide a unique layout for different parts of your application.
Same thing can be done also in MVC Razor. Every page (System.Web.Mvc.WebViewPage – you can change it in web.config : it is set in web.config in Views folder) has a property Layout, which accepts virtual path to your view; aka MasterPage. In the default template, that comes with MVC 3, you get a _Layout.cshtml, which is a base layout for all your pages (defined in _ViewStart.cshtml – a starting point for your app, before all views gets rendered). Basically, if you want to have a different master pages for your webpages, you can done that in code in view, so you can override the default settings and set the Layout property to a layout page you want to use. But this can get dirty and maintenance hell. Usually your layout needs perhaps a different vertical menu on specific pages or default one. Can be done with partial, but even with partial, your code can be a spaghetti code.
Sections comes to the rescue. Section is a designed to represent a fraction on your layout page. Why care? Well, first thing is, you can set required to false, and if you don’t use it in your view, no biggy. even better, you can set the default content to be rendered. Marcin Doboz has a great article about that.
Lets say that you want to have a vertical menu, which will be rendered in a in two column layout. Your page could look something like this (right is defined in css – it just floats right with width 200px):
<div id="main">
@RenderBody()
<div id="right">
Some menu items here
</div>
</div>
We will use the section to provide a right menu div:
<div id="main">
@RenderBody()
<div id="right">
@RenderSection("RightMenu")
</div>
</div>
Usage in view Home/Index:
@{
ViewBag.Title = "Home Page";
}
<p>
Some content
</p>
@section RightMenu {
<a href='http://bojan.preliator.net' target="_blank">My blog link</a>
}
And the result (never mind the position – can be fixed in css 
):
What if we don’t use the section? Well, since section default settings is required=true, we got an error, which is easily fixable with setting the required to false.
@RenderSection("RightMenu", false)
| Required=true |
Required=false |
 |
 |
As Marcin Doboz has done in his blog post, we can use IsSectionDefined property to provide default content (if we define the RightMenu, use that markup, if don’t, show default blog links):
@if (IsSectionDefined("RightMenu"))
{
@RenderSection("RightMenu")
}
else
{
<a href='http://bojan.preliator.net'>My blog</a><br />
<a href='http://milos.preliator.net'>Milos blog</a>
}
And the result is (if we don’t define the markup):
I think it is very simple and powerful. I recommend looking this post from Marcin Doboz about nested layout techniques.
Subscribe