在 layout.cshtml 中实现多个部分答案

【问题标题】：Implement multiple section in layout.cshtml在 layout.cshtml 中实现多个部分
【发布时间】：2021-05-17 12:51:44
【问题描述】：

假设我有一个名为“_Layout.cshtml”的部分布局和一个名为“Sidebar.cshtml”的侧边栏，它们都位于“/Views/Shared”中。我有几个页面，例如登录、索引、帐户维护、管理课程等。我想让“Sidebar.cshtml”出现在“Account Maintenance.cshtml”和“Manage Course.cshtml”中，但“Index.cshtml”和“Login.cshtml”不应该出现在“Sidebar.cshtml”中。

我已经测试在“_Layout.cshtml”中实现了@RenderSection，但它没有呈现，我知道“_Layout.cshtml”是部分视图。在这种情况下，我怎样才能实现我试图实现的假设。

图片说明：“左栏”标识为“侧边栏” P/S：.NET Core 新手

_Layout.cshtml 的代码

 <div class="container">
        <main role="main" class="pb-3">
               @RenderSection("sidebar", false)
            @RenderBody()
        </main>
    </div>

Sidebar.cshtml 的代码

@{
    Layout = "_Layout.cshtml";
}
@section sidebar{
    
    <nav class="col-md-2 d-none d-md-block bg-light sidebar">
            <div class="sidebar-sticky">
                <ul class="nav flex-column">
                    <li class="nav-item nav-link">
                        <img src="https://facebook.com/static/logo/cs_logo.png?v=1" class="rounded-circle" style="height: auto; max-width: 100%">
                    </li>
                    <li class="nav-item nav-link">
                        Role: <br><strong>22</strong>
                    </li>
                    <li class="nav-item nav-link">
                        Name:<br><strong>23qe</strong>
                    </li>
                    <li class="nav-item nav-link">
                        User ID:<br><strong>324eef</strong>
                    </li>
                    <li class="nav-item nav-link">
                        Last online:<br><strong>dsffsdf</strong>
                    </li>
                </ul>
            </div>
        </nav>
}

【问题讨论】：

标签： c# asp.net layout asp.net-core-mvc

【解决方案1】：

问题是，sidebar.cshtml 正在定义部分。如果您在控制器中使用return View("sidebar.cshtml")，这将是有意义的。但是您想使用另一个视图从侧边栏获取内容，因此这些部分应该在另一个视图上定义，而不是在 sidebar.cshtml 中。

例如，您正在调用 Account/Maintenance，所以让布局定义部分，这里我们需要提供内容来填充这些部分。

在视图/帐户/Maintenance.cshtml

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<span>Body text</span>
@section sidebar{
    @{ 
        await Html.RenderPartialAsync("~/Views/Shared/sidebar.cshtml"); 
    }
}

在 Views/Shared/Sidebar.cshtml 中只提供内容：

<nav class="col-md-2 d-none d-md-block bg-light sidebar">
    <div class="sidebar-sticky">
        <ul class="nav flex-column">
            <li class="nav-item nav-link">
                <img src="https://facebook.com/static/logo/cs_logo.png?v=1" class="rounded-circle" style="height: auto; max-width: 100%">
            </li>
            <li class="nav-item nav-link">
                Role: <br><strong>22</strong>
            </li>
            <li class="nav-item nav-link">
                Name:<br><strong>23qe</strong>
            </li>
            <li class="nav-item nav-link">
                User ID:<br><strong>324eef</strong>
            </li>
            <li class="nav-item nav-link">
                Last online:<br><strong>dsffsdf</strong>
            </li>
        </ul>
    </div>
</nav>

在 AccountController 中：

public IActionResult Maintenance()
{
    return View();
}

因此，侧边栏将显示在维护中，因为视图为该部分提供内容并使用定义该部分的 _Layout。

_Layout.cshtml

<html>
<body>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderSection("sidebar", false)
            @RenderBody()
        </main>
    </div>
</body>
</html>

【讨论】：

如果我想在 _Layout.cshtml 中嵌入侧边栏，因为侧边栏主要会被多个页面使用。此外，它仅不被多个页面使用。
在 _Layout.cshtml 中，sidebar 部分不是强制性的。这是通过在@RenderSection("sidebar", false) 中传递false 参数来指定的。因此，如果您希望视图具有侧边栏，只需像我在 Maintenance.cshtml 中所做的那样包含此部分。否则不要包含它。
在我的 _Layout.cshtml 中添加 @RenderSection("sidebar", false) 后它没有呈现
我已经测试了上面的代码并在 .Net Core 3.1 中运行良好。可能你的代码有什么不同。
_Layout.cshtml: ~/Views/Shared/_Layout.cshtml ||| Sidebar.cshtml：~/Views/Shared/Sidebar.cshtml ||| Home的索引视图：~/Views/Home/Index.cshtml