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应用程序时，出现以下错误：

无法请求文件“〜/ Views / 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>

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

无需重复@Styles.Render＆amp; @Scripts.Render，也适用于@RenderSection（它们会自动插入引用基本布局的每个页面）。
无需使用多个body代码，只需使用div代码替换即可保存查看页面内容。

无法直接请求文件“X”，因为它调用“RenderBody”方法当然来自Html.Partial，它直接从子布局调用a layout page with RenderBody method can't be requested directly as a template。< / p>

如果要为嵌套布局设置默认布局，请将其中一个子布局参考放在_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()通常用于布局页面，它会呈现内容页面中不在命名区域内的部分。

希望这有用：）

如何在布局页面之间共享局部视图时在局部视图中使用“RenderBody（）”？

2 个答案: