Html 如何在 ASP.NET 中的 Layout.CSHTML 中创建下拉导航栏菜单项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32420028/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to Create Dropdown Navbar Menu Item in Layout.CSHTML in ASP.NET
提问by Matthew
I am new to ASP.NET and I am trying to figure out how to create a nav bar menu items with drop down capability. I am using thistheme in particular. In their sample code they demonstrate the drop down functionality, but in my default MVC application I am using _Layout.cshtml to create my nav bar. I am having difficulty figuring out the correct syntax.
我是 ASP.NET 的新手，我想弄清楚如何创建具有下拉功能的导航栏菜单项。我特别使用这个主题。在他们的示例代码中，他们演示了下拉功能，但在我的默认 MVC 应用程序中，我使用 _Layout.cshtml 创建我的导航栏。我很难找出正确的语法。
I have implemented sections within my Index.cshtml page which I would like the first nav bar menu item drop downs to go to accordingly. How may I accomplish this?
我已经section在我的 Index.cshtml 页面中实现了s，我希望第一个导航栏菜单项下拉菜单相应地转到。我怎样才能做到这一点？
Index.cshtml
索引.cshtml
<section id="item 1">...</section>
<section id="item 2">...</section>
<section id="item 3">...</section>
_Layout.cshtml
_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>
Thanks in advance!
提前致谢！
EDIT:
编辑：
I've updated my _Layout.cshtml which shows the dropdown and the list items do navigate to my Index page, but from here how can I specifically direct each list item to point to each section of Index.cshtml page (i.e. item 1, item 2, or item 3?
我已经更新了我的 _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>
Here is another linkI've referenced.
这是我引用的另一个链接。
My HomeController.cs for ActionResult Index
我的 HomeController.cs 用于 ActionResult Index
public ActionResult Index()
{
return View();
}
回答by duxfox--
This issue has less to do with asp.net than with html. In the link you provided you can view source on all elements on the page. Viewing the source on the navigation bar gives the html below.
与 html 相比，这个问题与 asp.net 的关系不大。在您提供的链接中，您可以查看页面上所有元素的源代码。在导航栏上查看源代码会得到下面的 html。
You just need to put this html somewhere in your layout.cshtml page and reference their css files so that the styling comes into effect (either download the css or link it from a hosted version someone online)
您只需要将此 html 放在 layout.cshtml 页面中的某个位置并引用它们的 css 文件，以便样式生效（下载 css 或从某人在线的托管版本中链接它）
you can use a link tag to reference css on your html page:
您可以使用链接标签在您的 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>
回答by Matthew
The solution by PussInBoots hereresolves the issue.
通过PussInBoots该解决方案在这里解决问题。
@Html.ActionLink("Some link text", "MyAction", "MyController", protocol: null, hostName: null, fragment: "MyAnchor", routeValues: null, htmlAttributes: null)
Where MyAnchorwill be the section id from the original question.
MyAnchor原始问题中的部分 ID在哪里。
