如何創建一個菜單欄上的MVC

我一直在MVC工作了幾個月，它的順利左側所有的方式，但我無法弄清楚如何創建一個工具欄菜單一路屏幕最左側。如何創建一個菜單欄上的MVC

這是一個標準的MVC 5 web應用程序。

我認爲問題是，在_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爲好。

我只是無法得到它看起來就是我想要的。

感謝。

來源

2016-03-14 Neill

好吧，我已經發現了兩個方法來做到這一點至今。那裏可能會有更好的。

首先，我是正確的，我的假設是，在_layout查看div容器是造成問題。

選項1

在_layout視圖，容器的div和RenderBody，使用@RenderSection代碼

@RenderSection("LeftMenu", required: false) 

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

然後在您需要的菜單視圖之前，請將菜單代碼：

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

的「LeftMenu」只是一個名字，任何名稱都可以在這裏使用。

這導致@section代碼是RenderBody之前「運行」。

這有效，但有一個缺點，因爲我可能想在多個視圖中使用菜單，所以我必須在每個視圖中添加@section LeftMenu {}代碼，因爲您不能使用@section {}在局部視圖中。

選項2：

在_layout視圖，取下容器的div包圍@RenderBody

在每個視圖中的容器的div包圍的代碼。在內容代碼之前，在部分視圖中創建菜單並在您需要的每個視圖中呈現它（@ Html.Partial）。

奧尼爾

來源

2016-03-15 14:06:47 Neill

很好的回答@Neill，對於我來說，LeftMenu沒有水平與人體一致，所以，我這樣做

–

如何創建一個菜單欄上的MVC

回答

相關問題