如何在ASP.NET中的Layout.CSHTML中創建下拉導航欄菜單項

Question

我是ASP.NET新手，我想弄清楚如何創建具有下拉功能的導航欄菜單項。我特別使用this主題。在他們的示例代碼中，他們演示了下拉功能，但是在我的默認MVC應用程序中，我使用_Layout.cshtml創建了我的導航欄。我很難弄清楚正確的語法。

我已在我的Index.cshtml頁面中實現了section s，我希望第一個導航欄菜單項下拉菜單能夠相應地執行。我怎麼能做到這一點？

Index.cshtml

<section id="item 1">...</section> 
<section id="item 2">...</section> 
<section id="item 3">...</section> 

_Layout.cshtml

<div class="navbar navbar-inverse 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> 
      @Html.ActionLink("My Application", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" }) 
     </div> 
     <div class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
       @*<li>@Html.ActionLink("Index", "Index", "Home")</li>*@ 
       <li class="dropdown"> 
        <a class="dropdown-toggle" role="button" aria-expanded="false" data-toggled="dropdown">@Html.ActionLink("Home", "Index", "Home")</a> 
       <ul class="dropdown-menu" role="menu"> 
        <li>Action 1</li> 
        <li><a href="#">Another action</a></li> 
        <li><a href="#">Something else here</a></li> 
       </ul> 
       </li> 
       <li>@Html.ActionLink("About", "About", "Home")</li> 
       <li>@Html.ActionLink("Contact", "Contact", "Home")</li> 
      </ul> 
     </div> 
    </div> 
</div> 

提前感謝！

編輯：

我已經更新了我_Layout.cshtml它顯示的下拉和列表項做導航到我的索引頁，但在這裏，我怎麼能具體指導各列表項指向的每個部分Index.cshtml頁面（即item 1，item 2，或item 3？

<div class="navbar navbar-inverse 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> 
      @Html.ActionLink("My Application", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" }) 
     </div> 
     <div class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
       @*<li>@Html.ActionLink("Index", "Index", "Home")</li>*@ 
       <li class="dropdown"> 
        <a class="dropdown-toggle" role="button" aria-expanded="false" href="#" data-toggle="dropdown">Home <span class="caret"></span></a> 
        <ul class="dropdown-menu" role="menu"> 
         <li>@Html.ActionLink("Item 1", "Index", "Home", null, new { id = "item 1" })</li> 
         <li>@Html.ActionLink("Item 2", "Index", "Home", null, new { id = "item 2" })</li> 
         <li>@Html.ActionLink("Item 3", "Index", "Home", null, new { id = "item 3" })</li> 
        </ul> 
       </li> 
       <li>@Html.ActionLink("About", "About", "Home")</li> 
       <li>@Html.ActionLink("Contact", "Contact", "Home")</li> 
      </ul> 
     </div> 
    </div> 
</div> 

這裏是另一個link我引用。

我爲HomeController.cs

public ActionResult Index() 
    { 
     return View(); 
    } 

Answer 1

這個問題與使用asp.net相比，與使用html相比較少。在您提供的鏈接中，您可以查看頁面上所有元素的源代碼。在導航欄上查看源代碼給出下面的html。

你只需要在一些地方把這個網站在layout.cshtml網頁，並引用它們的CSS文件，這樣的造型生效（無論是下載的CSS或鏈接從一個託管版本有人在線）

你可以用link標籤來引用您的HTML頁面的CSS：

<link rel="stylesheet" type="text/css" href="mystyle.css"> 

---

<nav class="navbar navbar-inverse"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Brand</a> 
    </div> 

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> 
     <li><a href="#">Link</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> 
      <ul class="dropdown-menu" role="menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      <li class="divider"></li> 
      <li><a href="#">One more separated link</a></li> 
      </ul> 
     </li> 
     </ul> 
     <form class="navbar-form navbar-left" role="search"> 
     <div class="form-group"> 
      <input type="text" class="form-control" placeholder="Search"> 
     </div> 
     <button type="submit" class="btn btn-default">Submit</button> 
     </form> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">Link</a></li> 
     </ul> 
    </div> 
    </div> 
</nav> 

Answer 2

通過PussInBoots here該解決方案可以解決問題。

@Html.ActionLink("Some link text", "MyAction", "MyController", protocol: null, hostName: null, fragment: "MyAnchor", routeValues: null, htmlAttributes: null) 

其中MyAnchor將是原始問題中的部分ID。