Question

我想在MVC 5中实现导航侧边栏，但我无法在项目附带的Bootstrap 3中找到任何内置类。我已尝试使用以下代码：

_Layout.cshtml

<body>
//the sidebar code is here...
<div id="Wrapper">
    <ul>
        <li>hello</li>
        <li>Project</li>
        <li>Account settings</li>
    </ul>
</div>
<div class="navbar navbar-default 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>
        </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" id="page-content-wrapper">
    @RenderBody()
    <hr />
    <footer>
        <p>&copy; @DateTime.Now.Year/p>
    </footer>
</div>

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
<link href="~/Content/Custom.css" rel="stylesheet" />
@RenderSection("scripts", required: false)

CSS

#Wrapper {
background-color: #3F51B5;
z-index:1;
height: 100%;
width:300px;
position:fixed;
}

#page-content-wrapper{
margin-left:300px;
}

到目前为止，我所做的是我将margin-left: 300px添加到页面内容并添加<div id="Wrapper">来封装侧面导航栏并为其设置样式。我得到的结果如下：

但是，我发现了这个实现的这些问题：

如果我将侧边菜单放在_Layout.cshtml中，则表示每个页面都有该侧边菜单。但我希望只有在用户登录时才会显示侧边菜单。
如果我在每个人View中放置侧边菜单，这将导致页面左侧出现丑陋的空白区域，因为每个View都会在@RenderBody()中呈现。
如果我将侧边菜单放在_Layout.cshtml中，如何在点击按钮时包含jQuery代码以切换和隐藏侧边菜单？

有没有更好的实现呢？

Answer 1

为了简化解决方案，我将创建两个布局：

<ul class="nav navbar-nav text-center">
  <li><a href="#"><span class="glyphicon glyphicon glyphicon-file" aria-hidden="true"></span><p>Requests</p></a></li>
  <li><a href="#"><span class="glyphicon glyphicon-tasks" aria-hidden="true"></span><p>Activities</p></a></li>
  <li><a href="#"><span class="glyphicon glyphicon glyphicon-file" aria-hidden="true"></span><p>Reports</p></a></li>
  <li><a href="#"><span class="glyphicon glyphicon glyphicon-file" aria-hidden="true"></span><p>Admin</p></a></li>
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Country <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </li>
  <li><a href="#"><span class="glyphicon glyphicon-save" aria-hidden="true"></span><p>Save View</p></a></li>
</ul>

要转到Google边栏，请在_Layout.cshtml _LayoutNoSidebar.cshtml中添加此模板： https://blackrockdigital.github.io/startbootstrap-simple-sidebar/

如何在MVC 5中实现Bootstrap Sidebar

1 个答案: