is this a defect? cannot define section when using nested layouts : The Official Microsoft ASP.NET Forums

Reply

jhouse

Participant

1856 Points

374 Posts

is this a defect? cannot define section when using nested layouts

Nov 15, 2010 09:07 PM|LINK

Is this a defect with Razor nested layouts?

<div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"></div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste">'render' an optional section in a parent layout</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"></div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste">reference the parent layout from a child layout</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"></div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste">reference the child layout from a view </div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"></div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste">define the section in the parent layout</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"></div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste">throws an error</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"></div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> The following sections have been defined but have not been rendered for the layout page "~/Views/Sample/_LayoutChild.cshtml": "HtmlHead".</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> </div>

'render' an optional section in a parent layout
reference the parent layout from a child layout
reference the child layout from a view
define the section in the view, the section is rendered from the parent layout

throws an error

The following sections have been defined but have not been rendered for the layout page "~/Views/Sample/_LayoutChild.cshtml": "HtmlHead".

I uploaded some code which demostrates this issue - https://github.com/house9/SampleAspMvc3NestedLayoutSectionIssue

NOTE: if the view directly references the parent layout instead of the child it works fine

Reply

marcind

Contributor

3344 Points

609 Posts

Microsoft

Re: is this a defect? cannot define section when using nested layouts

Nov 15, 2010 09:19 PM|LINK

This is by design. Currently Razor layouts can only consume (render) sections defined immediately by the view using them. You cannot have a hierarchy of layout pages and in the outermost layout consume a section defined in the innermost view.

Marcin Dobosz
ASP.NET Team
@marcind
Blog

Reply

imran_ku07

All-Star

45815 Points

7698 Posts

MVP

Re: is this a defect? cannot define section when using nested layouts

Nov 16, 2010 06:18 AM|LINK

Try this trick,

_LayoutChild.cshtml:

@{
    Layout = "~/Views/Sample/_LayoutParent.cshtml";
}


<h2>
    This is "~/Views/Sample/_LayoutChild.cshtml"
</h2>


@RenderBody()


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

_LayoutParent.cshtml:

<!DOCTYPE html>
<html>
<head>
    <title>@View.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    @*
    <script src="@Url.Content("~/Scripts/jquery-1.4.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
    *@

    
</head>

<body>

    <h1>
        "~/Views/Sample/_LayoutParent.cshtml"
    </h1>

    @RenderBody()
    @RenderSection("HtmlHead", false)
</body>
</html>

Index.cshtml:

@{
    //Layout = "~/Views/Sample/_LayoutParent.cshtml";
    Layout = "~/Views/Sample/_LayoutChild.cshtml";
}

<h3>
    This is /sample/index
</h3>

@section HtmlHead {
Imran Baloch Sample
}

<p>
    '_LayoutParent' renders section 'HtmlHead'
</p>
<p>
    defining 'HtmlHead' in this view works when we directly use the layout of '_LayoutParent'
</p>
<p>
    but if we change the layout to '_LayoutChild' (which is nested under '_LayoutParent')
    it will throw a runtime error 
</p>

<pre style="font-style: italic; width: 360px">
    The following sections have been defined but have not been rendered for the layout page "~/Views/Sample/_LayoutChild.cshtml": "HtmlHead".
</pre>

"And whoever is removed away from the Fire and admitted to Paradise, he indeed is successful." (The Holy Quran)
Excellent Windows VPS Hosting
Imran Baloch MVP, MVB, MCP, MCTS, MCPD