Question

我正在尝试为使用母版页的超大型VS2008 ASP.NET网站创建基于Bootstrap的菜单替换。

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

使用VS 2008（由于现有代码库而无法更新），导航和弹性布局的东西 Bootstrap.bundle js / bootstrap CSS v4.1.3和JQuery 3.3.1

需要帮助的地方是导航菜单以同时打开一个导航到主题页面的网址（不起作用）-并显示nav-content子菜单div（如果存在）（有效）。在下面的示例中，我裁剪了许多其他菜单/内容。

单击Home Nav-Pill应该显示Default.aspx（已在加载时显示）。主页nav-Pill单击屏幕快照：

单击Nav-Search Pill应该显示子菜单并加载Search.aspx页面。当前加载子菜单（完成后将包含子区域页面的链接），但单击后仍显示同一页面，而不是search.aspx。搜索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>

主页Default.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用于页面名称并将data-target用于子菜单打开？ -但不起作用。想法？

Answer 1

几天后，我终于部分地使用javascript编写的onclick事件来强制页面加载，因为考虑到data-toggle =“ tab”破坏了URL的使用以打开网站...以及更多的加载子菜单...

但是-最终放弃了这种方法，因为它太多了，收效甚微，并且不支持坐图子菜单层次结构。最后，我修改了站点的web.sitemap，在需要的地方添加了自定义值，并修改了站点的customtheme.Skin文件以支持Bootstrap值。最终结果是能够继续用于主菜单并自动加载次要子菜单列表。当选择主菜单或子菜单项时（因为主菜单不是自举程序控件），我不得不添加OnItemDatabound命令以将选项卡标记为已选中（向CSS添加或删除“活动”以显示正确的自举程序图像）。

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

<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();
                }
            }
        }
    }
}

带ASP.Net导航选项卡/药的Bootstrap 4，单击打开子菜单和页面

1 个答案: