如何在MVC中创建一个位于左侧的菜单侧栏

Question

我已经使用MVC工作了几个月，运行得很好，但是我不知道如何在屏幕的最左边创建一个边栏菜单。

这是一个标准的MVC5Web应用程序。

我认为问题在于，在_Layout视图中，

@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视图中的容器div导致了问题。

选项1

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

@RenderSection("LeftMenu", required: false)

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

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

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

"LeftMenu“只是一个名字，任何名字都可以在这里使用。

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

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

选项2：

在RenderBody视图中，删除包含@RenderBody的容器_Layout

在每个视图中，将代码封装在一个容器div中。在局部视图中创建菜单，并在内容代码之前的每个视图中呈现它(@Html.Partial)。

尼尔

Answer 2

您可以使用Html.RenderPartial

创建一个视图，例如：_LeftMenu.csthml，并将其放在"Views/Shared“文件夹中。

将左侧的菜单html放在该视图中，例如(当然可以使用Div和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>

然后将布局页面中的内容区域分成两部分，一个用于左侧菜单，另一个用于包含子页面的渲染正文区域：

<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原则，因为它将与使用相同布局页面的任何和所有其他页面共享