如何将<asp:Menu>显示为bootstrap navbar

Question

我正在开发一个ASP.Net应用程序,我有一个Bootstrap navbar设置如下:

Site.Master

<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>
            <asp:HyperLink runat="server" AccessKey="1" ToolTip="Go to Home Page" NavigateUrl="~/Home">
                Home
            </asp:HyperLink>
        </div>

        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li>
                    <a runat="server" href="~/Page_1">Page 1</a>
                </li>
                <li>
                    <a runat="server" href="~/Page_2">Personal Details</a>
                </li>
                <li>
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                        Page 3 <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a runat="server" href="~/Page_3/Page_3A">Page 3A</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a runat="server" href="~/Page_3/Page_3B">Page 3B</a></li>
                        <li><a runat="server" href="~/Page_3/Page_3C">Page 3C</a></li>
                        <li><a runat="server" href="~/Page_3/Page_3D">Page 3D</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a runat="server" href="~/Page_3/Page_3E">Page 3E</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>

现在我想将其转换为使用站点地图并保持Bootstrap布局.所以我有以下站点地图代码和更新的母版页:

Web.sitemap

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
    <siteMapNode roles="*">
        <siteMapNode url="~/Page_1" title="Page 1"  description="Page 1" />
        <siteMapNode url="~/Page_2" title="Page 2"  description="Page 2" />
        <siteMapNode url="~/Page_3/Default" title="Page 3"  description="Page 3">
            <siteMapNode url="~/Page_3/Page_3A" title="Page 3A"  description="Page 3A" />
            <siteMapNode url="~/Page_3/Page_3B" title="Page 3B"  description="Page 3B" />
            <siteMapNode url="~/Page_3/Page_3C" title="Page 3C"  description="Page 3C" />
            <siteMapNode url="~/Page_3/Page_3D" title="Page 3D"  description="Page 3D" />
            <siteMapNode url="~/Page_3/Page_3E" title="Page 3E"  description="Page 3E" />
        </siteMapNode>
    </siteMapNode>
</siteMap>

Site.Master

<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>
            <asp:HyperLink runat="server" AccessKey="1" ToolTip="Go to Home Page" NavigateUrl="~/Home">
                Home
            </asp:HyperLink>
        </div>

        <div class="navbar-collapse collapse">
            <asp:Menu ID="mnuMain" Runat="server" DataSourceID="smdsMain"
                Orientation="Horizontal" 
                StaticDisplayLevels="2" >
              </asp:Menu>

            <asp:SiteMapDataSource ID="smdsMain" runat="server" ShowStartingNode="false" SiteMapProvider="XmlSiteMapProvider" />
        </div>
    </div>
</div>

我的站点地图功能,但我的布局navbar现在已完全破坏.我该如何解决这个问题？

我想navbar用站点地图实现标准的Bootstrap .

Answer 1

我不再需要下拉列表并找到了解决方案。不过，它可以改进以适应下拉菜单。

我不得不使用一个<asp:Repeater>. 像这样：

<ul class="nav navbar-nav">
    <asp:Repeater runat="server" ID="rptMenu" DataSourceID="smdsMain">
        <ItemTemplate>
            <li>
                <a runat="server" href='<%# Eval("Url") %>'><%# Eval("Title") %></a>
            </li>
        </ItemTemplate>
    </asp:Repeater>
</ul>

<asp:SiteMapDataSource ID="smdsMain" runat="server" ShowStartingNode="false" SiteMapProvider="XmlSiteMapProvider" />

很高兴我终于得到了有用的东西。最好的部分是您不需要更改 CSS 来满足它。