当部分视图跨布局页共享时，如何在部分视图中使用"RenderBody()“？

Question

以下是我的ASP.NET MVC应用程序中的确切场景：

有两个布局页面是完全相同的。但是，一种是在“标签”中有角相关属性，而另一种是非角布局。为了避免在两个剃刀布局文件中重复标记，我想创建一个部分视图，并在布局页面之间共享它。

以下是部分视图(剃须刀)，我将其命名为"_LayoutPartial"：

_LayoutPartial.cshtml

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li>@Html.ActionLink("Home", "Index", "Home")</li>
                <li>@Html.ActionLink("About", "About", "Home")</li>
                <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
            </ul>
            @Html.Partial("_LoginPartial")
        </div>
    </div>
</div>
<div class="container body-content">
    @RenderBody()
    <hr />
    <footer>
        <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
    </footer>
</div>

上述部分视图在"_Layout.cshtml“和"_AngularLayout.cshtml”中共享，如下所示：

_Layout.cshtml

<body>
    @Html.Partial("_LayoutPartial")

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>

_AngularLayout.cshtml

<body ng-app="myAngularLab">
    @Html.Partial("_LayoutPartial")

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>

当我试图运行MVC应用程序时，会出现以下错误：

不能直接请求文件“~/视图/Shared/_LayoutPartial.cshtml”，因为它调用了"RenderBody“方法。

错误消息非常明显，似乎我们只能在母版页中使用RenderBody方法，而不能在其他任何地方使用。但是，我很想知道，通过编写公共代码而不是在两个布局页面中保留重复代码，我们如何才能拥有两个相同的布局页面(如示例所示)？

Answer 1

我认为您需要使用“嵌套布局”，将一个布局页面作为其他布局的“母版页”，类似于webforms对应的布局：

_BaseLayout.cshtml

<html>
<head>
    <!-- other header tags (link, meta, title etc.) -->

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")

    <!-- JS & CSS includes if available -->
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <!-- other elements -->
    </div>
    <div class="container body-content">
        @RenderBody()
        <!-- other elements -->
    </div>

    @RenderSection("scripts", required: false)
</body>
</html>

_Layout.cshtml

@{ Layout = "~/Views/Shared/_BaseLayout.cshtml"; } // put reference to base layout here

<div>
    <!-- Non-Angular layout -->
    @RenderBody()
</div>

_AngularLayout.cshtml

@{ Layout = "~/Views/Shared/_BaseLayout.cshtml"; } // put reference to base layout here

<div ng-app="myAngularLab">
    <!-- Angular layout -->
    @RenderBody()
</div>

使用“嵌套布局”的优点：

1. 消除了重复@Styles.Render & @Scripts.Render的需要，对于@RenderSection也是如此(对于引用基本布局的每个页面，它们都会自动插入)。
2. 无需使用多个body标记，只需使用div标记来保存视图页内容即可。

文件"X“不能直接请求，因为它调用"RenderBody”方法肯定来自直接从子布局调用的Html.Partial，其中 method can't be requested directly as a template。

如果要为嵌套布局设置默认布局，请在_ViewStart.cshtml中放置一个子布局引用

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

另一个注意事项:部分视图用于视图页，而不是布局页。布局页专门用作视图页的占位符，而不是用于操作方法直接访问。

Answer 2

在_Layout.cshtml:中试试这个

<body>
    @Html.Partial("_LayoutPartial")

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
   <div class="container body-content">
    @RenderBody()
    <hr />
    <footer>
        <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
    </footer>
</div>
</body>

并将@RenderBody()从_LayoutPartial.cshtml中删除。

@RenderBody()通常在布局页面中使用，它呈现内容页中不属于指定部分的部分。

希望这是有帮助的：)