Bootstrap 4 w/ASP.Net Nav Tabs/Pills 单击打开子菜单和页面答案

【问题标题】：Bootstrap 4 w/ASP.Net Nav Tabs/Pills click Opens Sub-menu and PageBootstrap 4 w/ASP.Net Nav Tabs/Pills 单击打开子菜单和页面
【发布时间】：2018-08-10 15:45:46
【问题描述】：

我正在尝试为使用母版页的非常大的 VS2008 ASP.NET 站点创建基于引导程序的菜单替换。

该站点有一个两级菜单，其中第一行包含主要区域，第二行包含内容，具体取决于所选的主菜单区域。一天后，我有了一个漂亮的 Bootstrap 布局，可以完美地显示和显示二级菜单内容。

使用 VS 2008（由于现有代码库无法更新）， nav 和 flex 布局的东西 Bootstrap.bundle js/bootstrap css v4.1.3 和 JQuery 3.3.1

我需要帮助的地方是获取主菜单 Nav-Pills 以打开主题页面的 url（不起作用） - 并显示 nav-content 子菜单 div（如果存在）（有效）。我为下面的示例裁剪了一堆额外的菜单/内容。

单击 Home Nav-Pill 应显示 Default.aspx（已在加载时显示）。首页 nav-Pill 点击截图：

单击 Nav-Search Pill 应显示子菜单并加载 Search.aspx 页面。当前加载子菜单（完成后将包含指向子区域页面的链接），但单击后仍显示同一页面而不是 search.aspx。 Search nav-Pill 点击截图：

到目前为止我的代码： MasterPage.master

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="CSS/bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="CSS/Site.css" rel="stylesheet" type="text/css" />    
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
<div class="container-fluid" style="background-color:#eeeeee">
   <nav class="mainnav nav nav-pills bg-light  d-flex justify-content-md-between" role="tablist">  

        <a class=" d-flex nav-item" href="#">
            LOGO HERE<%-- <img height="44px" src="Images/logo_color.gif" alt="Logo" />--%>
        </a>
        <ul class="nav align-self-end">
            <li class="nav-item" style="height:25px">
                <%--<a class="nav-link active mr-2" id="nav-home-tab" data-toggle="tab" href="#nav-blank" role="tab" aria-controls="blank" aria-expanded="true">Home</a>--%>
                <asp:HyperLink class="nav-link active mr-2" id="nav-home-tab" NavigateUrl="~/Default.aspx" data-toggle="tab" data-target="#nav-blank" role="tab" aria-controls="blank" aria-expanded="true"  runat="server">Home</asp:HyperLink>
            </li>
            <li class="nav-item">
                <%--<a class="nav-link mr-2" id="nav-search-tab" data-toggle="tab" data-target="#nav-search" href="http://google.com" role="tab" aria-controls="search" aria-expanded="true">Search</a>    --%>
                <asp:HyperLink class="nav-link mr-2" id="nav-search-tab" data-toggle="tab" NavigateUrl="http://google.com" data-target="#nav-search" role="tab" aria-controls="search" aria-expanded="true"  runat="server">Search</asp:HyperLink>
            </li>
        </ul> 

        <div class=" d-flex d-inline-block align-content-end justify-content-end">
            <a href="#">Admin</a>&nbsp;|&nbsp;<a href="#">Help</a>&nbsp;|&nbsp;<a href="#">Contact Us</a>&nbsp;|&nbsp;<a href="#">Logout</a>
        </div>        
    </nav>     

    <div class="tab-content col-sm-12" id="pills-tabContent">        
        <div class="tab-pane fade" id="nav-blank" role="tabpanel" aria-expanded="false">
        </div>
        <div class="tab-pane fade" id="nav-search" role="tabpanel" aria-labelledby="nav-search-tab" aria-expanded="false">
            <nav class="nav nav-tabs" id="nav-sub-search" role="tablist">
                <a class="nav-item nav-link mr-2" href="#">Advanced Search</a>
                <a class="nav-item nav-link mr-2" href="#">Geographical Search</a>
            </nav>
        </div>
    </div>
</div>

    <form id="form1" runat="server">
    <div>
        <asp:ContentPlaceHolder id="MainContent" runat="server">            
        </asp:ContentPlaceHolder>
    </div>
    </form>

    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js" type="text/javascript"></script>
    <script src="Scripts/bootstrap.bundle.js" type="text/javascript"></script>
</body>
</html>

主页默认.aspx

<%@ Page Language="C#"  MasterPageFile="~/MasterPage.Master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="cMainContent" runat="server" ContentPlaceHolderID="MainContent">
<div class="container-fluid" style="background-color:#dddddd">
     <br />
     Home Page Content    
</div>    
</asp:Content>

Search.aspx 内容：

<%@ Page Language="C#" MasterPageFile="~/MasterPage.Master" AutoEventWireup="true" CodeFile="Search.aspx.cs" Inherits="Search" %>
<asp:Content ID="cSearchContent" runat="server" ContentPlaceHolderID="MainContent">
<div class="container-fluid" style="background-color:#dddddd">
    <br />
    Search Content 
</div>
</asp:Content>

我更喜欢一种简单的全局方式，而不是向每个控件添加 javascript 事件。似乎我可以使用 href/NavigateUrl 作为页面名称和数据目标来打开子菜单？ - 但不起作用。想法？

【问题讨论】：

标签： asp.net twitter-bootstrap visual-studio-2008 bootstrap-4 nav

【解决方案1】：

几天后，考虑到 data-toggle="tab" 破坏了使用 URL 来打开网站......以及更多加载子菜单......

然而 - 最终放弃了这种方法，因为它太多而没有效果，而且它不支持站点地图子菜单层次结构。最后，我修改了站点的 web.sitemap，在需要的地方添加了自定义值，并修改了站点的 customtheme.Skin 文件以支持 Bootstrap 值。最终结果是能够继续用于主菜单并自动加载辅助子菜单列表。 I had to add OnItemDatabound commands to mark tabs as selected (add or remove 'active' to CSS to show correct bootstrap images) when main or submenu item is selected (since main menu is not a bootstrap control).

我确实找到了足够的参考来编写一个不错的基于中继器的子菜单 - 如果它可能对其他人有帮助，请在此处发布（因为大多数帖子都是单个菜单，此代码显示了如何添加我在网上找不到的活动/选定项目支持）：

<div class="subMenuContainer">
    <asp:Repeater ID="subMenu" OnItemDataBound="subMenu_OnItemDataBound" runat="server" DataSourceID="SiteMapDataSource2">
        <HeaderTemplate>
            <ul class="nav nav-pills">
        </HeaderTemplate>                                                                
        <ItemTemplate>
            <li class="nav-item">
                <asp:HyperLink ID="HyperLink1" CssClass="nav-link mr-2 btn-sm btn-mycustombuttonstyle" runat="server" 
                    Text='<%# Eval("title") %>' ToolTip='<%# Eval("description") %>' NavigateUrl='<%# Eval("Url") %>'></asp:HyperLink>
            </li>
        </ItemTemplate>                                                                
        <FooterTemplate>
            </ul>
        </FooterTemplate>
    </asp:Repeater>
</div>


protected void subMenu_OnItemDataBound(object sender, RepeaterItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {
        SiteMapNode currentNode = SiteMap.CurrentNode;
        if (currentNode != null)
        {                
            HyperLink subMenuHyperlink = (HyperLink)e.Item.FindControl("HyperLink1");
            string curpage = Request.Url.PathAndQuery.Substring(Request.Url.PathAndQuery.LastIndexOf('/') + 1);
            string linkTarget = subMenuHyperlink.NavigateUrl.Substring(subMenuHyperlink.NavigateUrl.LastIndexOf('/') + 1);
            if (linkTarget.Equals(curpage)) {
                if (!subMenuHyperlink.CssClass.ToLower().Contains("active"))
                {
                    subMenuHyperlink.CssClass += " active";
                }
            }
            else
            {
                if (subMenuHyperlink.CssClass.ToLower().Contains("active"))
                {
                    subMenuHyperlink.CssClass = subMenuHyperlink.CssClass.Replace("active", "").Trim();
                }
            }
        }
    }
}

【讨论】：