如何Layout.CSHTML在ASP.NET创建下拉导航栏菜单项 [英] How to Create Dropdown Navbar Menu Item in Layout.CSHTML in ASP.NET
问题描述
我新的ASP.NET和我试图找出如何创建具有下拉功能的导航栏菜单项。我使用这个主题。在他们的样本code，他们表现出的下拉功能，但在我的默认MVC应用程序，我使用_Layout.cshtml创造我的导航栏。我有困难找出正确的语法。
我已实施部分我Index.cshtml页面内■哪些，我想第一个导航栏菜单项下拉菜单去相应。我怎么可能做到这一点？
Index.cshtml
＆lt;节ID =项目1＆GT; ...＆LT; /节＆gt;
＆lt;节ID =项目2＆GT; ...＆LT; /节＆gt;
＆lt;节ID =3项＆GT; ...＆LT; /节＆gt;
_Layout.cshtml
＆LT; DIV CLASS =导航栏导航栏，导航栏逆固定顶＆GT;
＆LT; DIV CLASS =容器＆GT;
＆LT; DIV CLASS =导航栏头＆GT;
＆LT;按钮式=按钮级=Navbar的切换数据切换=崩溃数据目标=＆GTNavbar的崩溃。
＆LT;跨度类=图标栏＆GT;＆LT; / SPAN＆GT;
＆LT;跨度类=图标栏＆GT;＆LT; / SPAN＆GT;
＆LT;跨度类=图标栏＆GT;＆LT; / SPAN＆GT;
＆LT; /按钮＆GT;
@ Html.ActionLink（我的应用，索引，家，新{面积=}，{新@class =Navbar的品牌}）
＆LT; / DIV＆GT;
＆LT; DIV CLASS =Navbar的垮垮＆GT;
＆LT; UL类=NAV导航栏，导航＆GT;
@ *＆LT;立GT; @ Html.ActionLink（指数，索引，家庭）＆LT; /李＆GT; * @
＆LT;李班=下拉菜单＆GT;
＆LT;一类=下拉菜单，切换角色=按钮咏叹调展开=false的数据切换=下拉菜单＆GT; @ Html.ActionLink（家，索引，家庭）＆LT; / A＆GT;
＆LT; UL类=下拉菜单中选择角色=菜单＆GT;
＆LT;立GT;动作1 LT; /李＆GT;
＆LT;立GT;＆LT; A HREF =＃＆GT;另一个动作＆LT; / A＆GT;＆LT; /李＆GT;
＆LT;立GT;＆LT; A HREF =＃＆GT;别的东西此处＆lt; / A＆GT;＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; /李＆GT;
＆LT;立GT; @ Html.ActionLink（关于，关于，家庭）＆LT; /李＆GT;
＆LT;立GT; @ Html.ActionLink（联系人，联系人，家庭）＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
在此先感谢！
编辑：
我已经更新了我_Layout.cshtml，显示的下拉和列表项做导航到我的索引页，但在这里我怎么能特异性地每个列表项指向Index.cshtml页面的每个部分（即项目1 ，项目2 或项目3 ？
＆LT; DIV CLASS =导航栏导航栏，导航栏逆固定顶＆GT;
＆LT; DIV CLASS =容器＆GT;
＆LT; DIV CLASS =导航栏头＆GT;
＆LT;按钮式=按钮级=Navbar的切换数据切换=崩溃数据目标=＆GTNavbar的崩溃。
＆LT;跨度类=图标栏＆GT;＆LT; / SPAN＆GT;
＆LT;跨度类=图标栏＆GT;＆LT; / SPAN＆GT;
＆LT;跨度类=图标栏＆GT;＆LT; / SPAN＆GT;
＆LT; /按钮＆GT;
@ Html.ActionLink（我的应用，索引，家，新{面积=}，{新@class =Navbar的品牌}）
＆LT; / DIV＆GT;
＆LT; DIV CLASS =Navbar的垮垮＆GT;
＆LT; UL类=NAV导航栏，导航＆GT;
@ *＆LT;立GT; @ Html.ActionLink（指数，索引，家庭）＆LT; /李＆GT; * @
＆LT;李班=下拉菜单＆GT;
＆LT;一类=下拉菜单，切换角色=按钮咏叹调展开=假的href =＃数据切换=下拉菜单＆GT;首页＆LT;跨度类=插入符号＆GT;＆LT; /跨度＆GT;＆下; / A＆GT;
＆LT; UL类=下拉菜单中选择角色=菜单＆GT;
＆LT;立GT; @ Html.ActionLink（项目1，索引，家，空，新的{ID =项目1}）LT; /李＆GT;
＆LT;立GT; @ Html.ActionLink（项目2，索引，家，空，新的{ID =项目2}）LT; /李＆GT;
＆LT;立GT; @ Html.ActionLink（项目3，索引，家，空，新的{ID =3项}）LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; /李＆GT;
＆LT;立GT; @ Html.ActionLink（关于，关于，家庭）＆LT; /李＆GT;
＆LT;立GT; @ Html.ActionLink（联系人，联系人，家庭）＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
下面是我引用另一个链接。
我HomeController.cs为的ActionResult指数
公众的ActionResult指数（）
{
返回查看（）;
}
这问题比与HTML少做asp.net。在链接您提供您可以在网页上的所有元素查看源代码。查看源代码导航栏上给出了如下的HTML。
您只需要（无论是网上下载的CSS或链接从一个托管版本某人）某处把这个网站在您的网页layout.cshtml，并引用他们的css文件，使造型生效
您可以使用链接标签的参考CSS HTML页面上：
＆LT;链接rel =stylesheet属性类型=文/ CSS的href =mystyle.css＆GT;
＆LT;导航类=导航栏导航栏逆＆GT;
＆LT; DIV CLASS =集装箱液＆GT;
＆LT; DIV CLASS =导航栏头＆GT;
＆LT;按钮式=按钮级=导航栏拨动崩溃数据切换=崩溃数据目标=＃BS-例如，导航栏崩溃-2＆GT;
＆LT;跨度类=SR-只有＆GT;拨动导航＆LT; / SPAN＆GT;
＆LT;跨度类=图标栏＆GT;＆LT; / SPAN＆GT;
＆LT;跨度类=图标栏＆GT;＆LT; / SPAN＆GT;
＆LT;跨度类=图标栏＆GT;＆LT; / SPAN＆GT;
＆LT; /按钮＆GT;
＆LT;一类=导航栏品牌的href =＃＆GT;品牌与LT; / A＆GT;
＆LT; / DIV＆GT; ＆LT; DIV CLASS =导航栏崩崩ID =BS-例如，导航栏崩溃-2＆GT;
＆LT; UL类=NAV导航栏，导航＆GT;
＆LT;李班=主动＆GT;＆LT; A HREF =＃＆GT;链接＆LT;跨度类=SR-只有＆GT;（电流）LT; / SPAN＆GT;＆LT; / A＆GT;＆LT; /李＆GT ;
＆LT;立GT;＆LT; A HREF =＃＆GT;链接＆LT; / A＆GT;＆LT; /李＆GT;
＆LT;李班=下拉菜单＆GT;
＆LT; A HREF =＃类=下拉菜单，切换数据切换=下拉菜单角色=按钮咏叹调展开=false的＆GT;下拉＆LT;跨度类=插入符号＆GT;＆LT; /跨度＆GT;＆下; / A＆GT;
＆LT; UL类=下拉菜单中选择角色=菜单＆GT;
＆LT;立GT;＆LT; A HREF =＃＆GT;动作＆LT; / A＆GT;＆LT; /李＆GT;
＆LT;立GT;＆LT; A HREF =＃＆GT;另一个动作＆LT; / A＆GT;＆LT; /李＆GT;
＆LT;立GT;＆LT; A HREF =＃＆GT;别的东西此处＆lt; / A＆GT;＆LT; /李＆GT;
＆LT;李班=分水岭＆GT;＆LT; /李＆GT;
＆LT;立GT;＆LT; A HREF =＃＆GT;分离链接＆LT; / A＆GT;＆LT; /李＆GT;
＆LT;李班=分水岭＆GT;＆LT; /李＆GT;
＆LT;立GT;＆LT; A HREF =＃ - 酮多个分离环节和LT; / A＆GT;＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT;窗体类=导航栏，导航栏的形式遗角色=搜索＆GT;
＆LT; DIV CLASS =表单组＆GT;
＆LT;输入类型=文本级=表格控占位=搜索＆GT;
＆LT; / DIV＆GT;
＆LT;按钮式=提交级=BTN BTN-默认＆GT;提交＆LT; /按钮＆GT;
＆LT; /表及GT;
＆LT; UL类=NAV导航栏，导航栏导航右＆GT;
＆LT;立GT;＆LT; A HREF =＃＆GT;链接＆LT; / A＆GT;＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / NAV＆GT;
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 this theme 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.
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?
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>
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?
<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 link I've referenced.
My HomeController.cs for ActionResult Index
public ActionResult Index()
{
return View();
}
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.
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)
you can use a link tag to reference css on your html page:
<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>
这篇关于如何Layout.CSHTML在ASP.NET创建下拉导航栏菜单项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
