Question

我已经和MVC合作了几个月并且进展顺利，但是我无法弄清楚如何创建一个侧边栏菜单一直到屏幕的最左边。

这是一个标准的MVC 5 Web应用程序。

我认为问题是，在_Layout View中，

@RenderBody()

属于div标签：

<div class="container body-content">

因此，我创建的任何视图中的所有代码都包含在该容器中。

这甚至是原因吗？

我的观点：

<h2>TestSideBar</h2>

<div class="container" id="sidebar" style="margin-left: 0px">
    <div id="wrapper" class="wrapper">
        <!-- Sidebar -->
        <div class="nav navbar-left">
            <div class="sidebar-wrapper">
                <div class="logo">
                    <a href="#" class="simple-text">
                        Placeholder
                    </a>
                </div>

                <ul class="nav">
                    <li>
                        <a href="@Url.Action("Item1", "Controller")">
                            <span class="glyphicon glyphicon-off ">  Item 1</span>
                        </a>

                        <a href="@Url.Action("Item2", "Controller")">
                            <span class="glyphicon glyphicon-star "> Item 2</span>
                        </a>
                    </li>
                </ul>

            </div>
        </div><!-- end navbar-left -->
    </div><!-- end sidebar container -->


    <div class="main-panel">
        Main Content Stuff Here

    </div><!-- end main-panel -->
</div><!-- end wrapper-->

我附上了2张图片，现在看起来如何以及我希望它看起来如何

我也试过使用@section RenderLeft。

我无法让它看起来像我想要的那样。

感谢。

Answer 1

到目前为止，我已经找到了两种方法。那里可能会有更好的。

首先，我认为_Layout View中的容器div导致问题是正确的。

选项1

在_Layout视图中，在容器div和RenderBody之前，使用@RenderSection代码

@RenderSection("LeftMenu", required: false)

<div class="container body-content">
    @RenderBody()

然后在视图中您想要菜单，将菜单代码包含在：

中

@section LeftMenu{
    <!-- Content Here -->
}

“LeftMenu”只是一个名称，这里可以使用任何名称。

这会导致@section中的代码在RenderBody之前“运行”。

这有效，但有一个缺点，因为我可能想在多个View中使用菜单，我必须在每个View中添加@section LeftMenu {}代码我想要它因为你不能使用@section {在部分视图中。

选项2：

在_Layout View中，删除包含@RenderBody

的容器div

在每个View中将代码括在容器div中。在部分视图中创建菜单，并在内容代码之前在您需要的每个视图中呈现它（@ Html.Partial）。

尼尔

Answer 2

您可以使用Html.RenderPartial

创建一个视图，例如_ LeftMenu.csthml 并将其放在“视图/共享” 文件夹中。

将左菜单html放到该视图中，例如（当然，如果愿意，也可以使用Divs和Model完成）

<ul class="list-group">
    <li class="nav-item">
        <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link text-dark" asp-area="" asp-controller="NextController" asp-action="Index">another menu link</a>
    </li>
</ul>

然后将 Layout页面中的内容区域分为两部分，一个用于左侧菜单，第二个用于将包含子页面的渲染主体区域：

<body>
    <header>
    </header
        <div class="row col-md-12 FullContent">
            <div class="col-md-2 CustomLeftnavbar">
                @{Html.RenderPartial("~/Views/Shared/_LeftMenu.cshtml");}
            </div>
            <div class="container col-md-10">
                <main role="main" class="CustomBody">
                    @RenderBody()
                </main>
            </div>
        </div>
</body>

这样，您将无需违反DRY原理，因为它将与使用相同布局页面的任何其他页面共享。

如何在MVC的左侧创建菜单侧边栏

2 个答案: