MVC 3 - Nested layouts - sections don't render in Areas

Question

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?!

score 31 · Accepted Answer · answered Oct 25 '11 at 17:13

31

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

answered Oct 25 '11 at 17:13

Darin Dimitrov

1,023,142
271
3,287
2,928

+1: I believe you. I will go through it all tomorrow, too pie eyed now. There has to be an error in my code, but blowed if I can see it. Many thanks. – awrigley Oct 25 '11 at 18:25
Just what I was looking for. Nested Render within Layouts... Thx! – nrod Mar 28 '13 at 09:01
In addition to this, if you like to add an area of e.g "admin" you can just add this to the _ViewStart.cshtml of the area @{ Layout = "~/Views/Shared/_AdminLayout.cshtml"; } Add an _AdminLayout.cshtml from the root Shared folder that looks like this. @{ Layout = "~/Views/Shared/_LayoutBase.cshtml"; } @section footerScripts{ @RenderSection("footerScripts", false) } @RenderBody() – jayson.centeno Sep 28 '15 at 06:30

score 7 · Answer 2 · answered Oct 26 '11 at 08:00

The Reason Why:

I have got up this morning and saw the problem straight away:

I had the @section blocks in a Partial View. In MVC 3, that WON'T work!!

ARGH!

I really appreciate Darin's effort, that effectively provided proof that sections do work in Areas as expected. But the real cause was this.

I forgot they were in a Partial View, because I have a mvc 3 wizard that uses partial views for steps. It works so well and consistently, using ajax if javascript is available, that you forget what you are doing.

Please give Darin a vote, but this is the real answer.

If this solved your problem you should accept your own answer. — Martin Liversage, Feb 26 '13 at 12:44

MVC 3 - Nested layouts - sections don't render in Areas

Problem:

Setup:

Question:

2 Answers2

The Reason Why:

Linked