MVC 3 – Nested layouts – sections don’t render in Areas

asp.net-mvc-3razor

Problem:

Given this nested layout structure:

~/Views/Shared/_layoutBase.cshtml
~/Views/Shared/_layout.cshtml

Where _layoutBase.cshtml is the layout for _layout.cshtml.

Any sections defined in the layout files render their content fine in pages under ~/Views/...

However, for views in an area, the sections are never rendered.

Setup:

_layoutBase:

<script type="text/javascript">
        @RenderSection("footerScripts", false)
    </script>
</body>
</html>

_layout.cshtml:

@section footerScripts{
    @RenderSection("footerScripts", false)
}

"content" view:

@section footerScripts{
$(function () {
    SetFocusOnForm("CaptchaCode", "NextButton");
});
}

The content of section footerScripts never gets rendered in a view in an area. It does get rendered in a view that is under the ~/Views folder.

Area _ViewStart.cshtml:

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

Question:

Can you see anything wrong?!

Best Answer

I am unable to reproduce the problem. Here's my setup and steps I did.

Create a new ASP.NET MVC 3 application using the Internet Application Template

Add ~/Views/Shared/_LayoutBase.cshtml:

<!DOCTYPE html>
<html>
<body>
@RenderBody()
<script type="text/javascript">
    @RenderSection("footerScripts", false)
</script>
</body>
</html>

Replace the contents of ~/Views/Shared/_Layout.cshtml with this:

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

@section footerScripts{
    @RenderSection("footerScripts", false)
}

@RenderBody()

Right click on the project and add an Admin area

Add a TestController to this admin area and add a corresponding ~/Areas/Admin/Views/Test/Index.cshtml view:

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

<h2>Index</h2>

@section footerScripts{
    alert('ok');
}

Run the application and navigate to /admin/test/index
The alert is shown

Related Solutions

Asp.net-mvc – Defaulting a section in a Razor view

Ah... I was messing with this and found I could do it by just switching the logic around:

@RenderSection("Header", false)
@if (!IsSectionDefined("Header")) { 
<header>
    Default Header!
</header>
}

So if my pages don't define @section Header { ... }, it renders the default.

Asp.net-mvc – How to specify different Layouts in the ASP.NET MVC 3 razor ViewStart file

You could put a _ViewStart.cshtml file inside the /Views/Public folder which would override the default one in the /Views folder and specify the desired layout:

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

By analogy you could put another _ViewStart.cshtml file inside the /Views/Staff folder with:

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

You could also specify which layout should be used when returning a view inside a controller action but that's per action:

return View("Index", "~/Views/Shared/_StaffLayout.cshtml", someViewModel);

Yet another possibility is a custom action filter which would override the layout. As you can see many possibilities to achieve this. Up to you to choose which one fits best in your scenario.

UPDATE:

As requested in the comments section here's an example of an action filter which would choose a master page:

public class LayoutInjecterAttribute : ActionFilterAttribute
{
    private readonly string _masterName;
    public LayoutInjecterAttribute(string masterName)
    {
        _masterName = masterName;
    }

    public override void OnActionExecuted(ActionExecutedContext filterContext)
    {
        base.OnActionExecuted(filterContext);
        var result = filterContext.Result as ViewResult;
        if (result != null)
        {
            result.MasterName = _masterName;
        }
    }
}

and then decorate a controller or an action with this custom attribute specifying the layout you want:

[LayoutInjecter("_PublicLayout")]
public ActionResult Index()
{
    return View();
}