带导航栏的Asp.net菜单 [英] Asp.net menu with navbar
本文介绍了带导航栏的Asp.net菜单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
亲爱的，我想在asp.new菜单中使用bootstrap菜单样式但是我的所有尝试都不起作用。
我要使用的菜单是
< pre > < nav class = navbar fixed-top navbar-expand-lg navbar-dark bg-dark fixed-top >
< div 类 = 容器 >
< a class = navbar-brand href = Default.aspx > 网络名称< / a >
< 按钮 < span class =code-attribute> class = navbar-toggler navbar-toggler-right type = 按钮 数据切换 = 折叠 data-target = ＃ navbarResponsive aria-controls = navbarResponsive aria-expanded = false aria-label = 切换导航 >
< span class = navbar-toggler-icon > < / span >
< / button >
< div < span class =code-attribute> class = 折叠navbar-collapse < span class =code-attribute> id = navbarResponsive >
< ul class = navbar-nav ml-auto >
< li class = nav-item >
< a class = nav-link href = aboutus.aspx > aboutus < / a >
< / li >
< li class = nav-item >
< < span class =code-leadattribute> a class = nav-link href = contact.html > 联系< / a >
< / li >
< li class = nav-item下拉菜单 >
< a class = nav-link下拉切换 href = ＃ < span class =code-attribute> id = navbarDropdownPortfolio data -toggle = 下拉列表 aria-haspopup = true aria-expanded = false >
投资组合
< ; / a >
< div class = 下拉菜单下拉菜单右键 aria-labelledby = navbarDropdownPortfolio >
< span class =code-keyword>< a class = dropdown-item href = portfolio- 1-col.html > 1列组合< / a >
< a class = dropdown- item href = portfolio-2-col.html > 2列组合< / a >
< a class = dropdown-item href = portfolio-3-col.html > 3列组合< / a >
< a class = dropdown-item href = portfolio-4-col.html < span class =code-keyword>> 4列组合< / a >
< a class = dropdown-item href = portfolio-item.html < span class =code-keyword>> 单个项目组合项< / a >
< / div >
< / li >
< li class = nav-item下拉菜单 >
< ; a class = nav- link dropdown-toggle href = ＃ id < span class =code-keyword> = navbarDropdownBlog data-toggle = 下拉列表 aria-haspopup = true aria-expanded = false >
博客
< / a >
< div class = 下拉菜单下拉菜单 - 右 aria-labelledby = navbarDropdownBlog >
< ; a class < span class =code-keyword> = dropdown-item href = blog-home-1.html > 博客首页1 < / a >
< a < span class =code-attribute> class = dropdown-item href = blog-home-2.html > Blog Home 2 < / a >
< a class = dropdown-item href = blog-post。 html > 博客帖子< / a >
< / div >
< / li >
< li class = nav-item下拉菜单 >
< a class = nav-link dropdown-toggle href = ＃ id = navbarDropdownBlog5 data -toggle = 下拉列表 aria-haspopup = true aria-expanded = false >
其他页面
< / a >
< div class = 下拉菜单下拉列表-menu-right aria-labelledby = navbarDropdownBlog >
< a class = dropdown-item href = full-width.html > 全宽Page < / a >
< a class = dropdown-item href = sidebar.html > 补充工具栏页面< / a >
< a 类 = dropdown-item href = faq.html > 常见问题< / a >
< a class = dropdown-item href = 404.html > 404 < / a >
< a class = dropdown-item href = pricing.html > 定价表< / a >
< < span class =code-leadattribute> / div >
< / li >
< / ul >
< / div >
< / div >
< / nav > ;
和我的asp菜单是
< pre lang =HTML> < pre > < asp：SiteMapDataSource ID = SiteMapDataSource2 runat = server ShowStartingNode = false / >
< asp：菜单ID =Menu2 runat =serverOrientation =HorizontalRenderingMode =ListDataSourceID =SiteMapDataSource2>
< / asp：菜单>
我尝试过：
我尝试的是什么
< pre >
>
< asp：SiteMapDataSource ID = SiteMapDataSource2 runat = server ShowStartingNode = false / >
< nav class = < span class =code-keyword> navbar fixed-top navbar-expand-lg navbar-dark bg-dark fixed-top
< div class = container >
< a class = navbar-brand href = Default3.aspx > صندوقالزمالة< / a >
< 按钮 class = navbar- toggler navbar-toggler-right type = 按钮 data-toggle = 折叠 < span class =code-attribute> data-target = ＃navbarResponsive aria-controls = navbarResponsive aria-expanded = false < span class =code-attribute> aria-label = 切换导航 >
< < span class =code-leadattribute> span class = navbar-toggler-icon > < / span >
< / button >
< div class = 折扣navbar-collapse id = navbarResponsive >
< asp：菜单 ID = Menu2 runat = server 方向 = 水平 RenderingMode = 列表 DataSourceID = SiteMapDataSource2
IncludeStyleBlock = false StaticMenuStyle-CssClass = DynamicMenuStyle-CssClass = >
< StaticSelectedStyle CssClass = nav-item nav-link / >
< StaticHoverStyle CssClass = nav-item nav-link / >
< / asp：菜单 >
</div >
</div>
</nav> 解决方案 Hi there,
$ b$b Assuming you do have all required references for Bootstrap 3.3.7 (js and css), as well as JQuery, just like Matias Lopez mentioned; the following code example may offer some help.
It depicts a menu with three items, where the last one is a sub-menu. For this particular case, LinkButtons were used, but if your intent is plain navigation, then you can use the HTML, and just complete the href=\"...\". Link tags Ids may also be unnecessary in such case.
//Markup (content page .aspx)
<div id=\"MnuCliente\" runat=\"server\" class =\"collapse navbar-collapse\" >
\t<ul class=\"nav navbar-nav\">
\t<li><asp:LinkButton id=\"Mnu00\" runat=\"server\" Text=\"Datos Cliente\" OnClick=\"Link_Click\" /></li>
<li><asp:LinkButton id=\"Mnu01\" runat=\"server\" Text=\"Operaciones\" OnClick=\"Link_Click\" /></li>
<li class=\"dropdown-submenu\">
\t<a href=\"#\" class=\"dropdown-toggle\" data-toggle=\"dropdown\">Documentos</a>
<ul class=\"dropdown-menu\">
<li><asp:LinkButton id=\"Mnu02\" runat=\"server\" Text=\"Vigentes\" OnClick=\"Link_Click\" /></li>
<li><asp:LinkButton id=\"Mnu03\" runat=\"server\" Text=\"Morosos\" OnClick=\"Link_Click\" /></li>
<li><asp:LinkButton id=\"Mnu04\" runat=\"server\" Text=\"Cancelados\" OnClick=\"Link_Click\" /></li>
<li><asp:LinkButton id=\"Mnu05\" runat=\"server\" Text=\"Prorrogados\" OnClick=\"Link_Click\" /></li>
<li><asp:LinkButton id=\"Mnu06\" runat=\"server\" Text=\"Protestados\" OnClick=\"Link_Click\" /></li>
<li><asp:LinkButton id=\"Mnu07\" runat=\"server\" Text=\"Excedentes\" OnClick=\"Link_Click\" /></li>
< / ul>
\t\t</li>
\t</ul>
< / div>
//Rendered HTML (href=\"...\" have been removed for brevity)
<div id=\"MnuClient\" class=\"collapse navbar-collapse\">
\t<ul class=\"nav navbar-nav\">
\t\t<li><a id=\"Mnu00\" href=\"...\">Datos Cliente</a></li>
<li><a id=\"Mnu01\" href=\"...\">Operaciones</a></li>
\t\t<li class=\"dropdown-submenu\">
\t\t\t<a href=\"#\" class=\"dropdown-toggle\" data-toggle=\"dropdown\">Documents</a>
\t\t\t<ul class=\"dropdown-menu\">
\t\t\t\t<li><a id=\"Mnu02\" href=\"...\">Vigentes</a></li>
\t\t\t\t<li><a id=\"Mnu03\" href=\"...\">Morosos</a></li>
\t\t\t\t<li><a id=\"Mnu04\" href=\"...\">Cancelados</a></li>
\t\t\t\t<li><a id=\"Mnu05\" href=\"...\">Prorrogados</a></li>
\t\t\t\t<li><a id=\"Mnu06\" href=\"...\">Protestados</a></li>
\t\t\t\t<li><a id=\"Mnu07\" href=\"...\">Excedentes</a></li>
\t\t\t</ul>
</li>
\t</ul>
</div>
Cheers!
Dear all, I want to use bootstrap menu style in asp.new menu but all my try not work.
the menu i want to use is
<pre> <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="Default.aspx">web name </a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="aboutus.aspx">aboutus</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">contact</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownPortfolio" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Portfolio
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownPortfolio">
<a class="dropdown-item" href="portfolio-1-col.html">1 Column Portfolio</a>
<a class="dropdown-item" href="portfolio-2-col.html">2 Column Portfolio</a>
<a class="dropdown-item" href="portfolio-3-col.html">3 Column Portfolio</a>
<a class="dropdown-item" href="portfolio-4-col.html">4 Column Portfolio</a>
<a class="dropdown-item" href="portfolio-item.html">Single Portfolio Item</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Blog
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog">
<a class="dropdown-item" href="blog-home-1.html">Blog Home 1</a>
<a class="dropdown-item" href="blog-home-2.html">Blog Home 2</a>
<a class="dropdown-item" href="blog-post.html">Blog Post</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Other Pages
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog">
<a class="dropdown-item" href="full-width.html">Full Width Page</a>
<a class="dropdown-item" href="sidebar.html">Sidebar Page</a>
<a class="dropdown-item" href="faq.html">FAQ</a>
<a class="dropdown-item" href="404.html">404</a>
<a class="dropdown-item" href="pricing.html">Pricing Table</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
and my asp menu is
<pre> <asp:SiteMapDataSource ID="SiteMapDataSource2" runat="server" ShowStartingNode="false" />
<asp:Menu ID="Menu2" runat="server" Orientation="Horizontal" RenderingMode="List" DataSourceID="SiteMapDataSource2"> </asp:Menu>
What I have tried:
that what i try
<pre>
<asp:SiteMapDataSource ID="SiteMapDataSource2" runat="server" ShowStartingNode="false" />
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="Default3.aspx">صندوق الزمالة </a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<asp:Menu ID="Menu2" runat="server" Orientation="Horizontal" RenderingMode="List" DataSourceID="SiteMapDataSource2"
IncludeStyleBlock="false" StaticMenuStyle-CssClass="" DynamicMenuStyle-CssClass="">
<StaticSelectedStyle CssClass="nav-item nav-link" />
<StaticHoverStyle CssClass="nav-item nav-link" />
</asp:Menu>
</div>
</div>
</nav> 解决方案
Hi there,
Assuming you do have all required references for Bootstrap 3.3.7 (js and css), as well as JQuery, just like Matias Lopez mentioned; the following code example may offer some help.
It depicts a menu with three items, where the last one is a sub-menu. For this particular case, LinkButtons were used, but if your intent is plain navigation, then you can use the HTML, and just complete the href="...". Link tags Ids may also be unnecessary in such case.
//Markup (content page .aspx) <div id="MnuCliente" runat="server" class ="collapse navbar-collapse" > <ul class="nav navbar-nav"> <li><asp:LinkButton id="Mnu00" runat="server" Text="Datos Cliente" OnClick="Link_Click" /></li> <li><asp:LinkButton id="Mnu01" runat="server" Text="Operaciones" OnClick="Link_Click" /></li> <li class="dropdown-submenu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Documentos</a> <ul class="dropdown-menu"> <li><asp:LinkButton id="Mnu02" runat="server" Text="Vigentes" OnClick="Link_Click" /></li> <li><asp:LinkButton id="Mnu03" runat="server" Text="Morosos" OnClick="Link_Click" /></li> <li><asp:LinkButton id="Mnu04" runat="server" Text="Cancelados" OnClick="Link_Click" /></li> <li><asp:LinkButton id="Mnu05" runat="server" Text="Prorrogados" OnClick="Link_Click" /></li> <li><asp:LinkButton id="Mnu06" runat="server" Text="Protestados" OnClick="Link_Click" /></li> <li><asp:LinkButton id="Mnu07" runat="server" Text="Excedentes" OnClick="Link_Click" /></li> </ul> </li> </ul> </div> //Rendered HTML (href="..." have been removed for brevity) <div id="MnuClient" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li><a id="Mnu00" href="...">Datos Cliente</a></li> <li><a id="Mnu01" href="...">Operaciones</a></li> <li class="dropdown-submenu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Documents</a> <ul class="dropdown-menu"> <li><a id="Mnu02" href="...">Vigentes</a></li> <li><a id="Mnu03" href="...">Morosos</a></li> <li><a id="Mnu04" href="...">Cancelados</a></li> <li><a id="Mnu05" href="...">Prorrogados</a></li> <li><a id="Mnu06" href="...">Protestados</a></li> <li><a id="Mnu07" href="...">Excedentes</a></li> </ul> </li> </ul> </div>
Cheers!
这篇关于带导航栏的Asp.net菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
