Bootstrap 4 с ASP.Net Nav Tabs/Pills нажмите Открыть подменю и страницу

Я пытаюсь создать замену меню на основе Bootstrap для очень большого сайта VS2008 ASP.NET, который использует мастер-страницы.

На сайте есть двухуровневое меню, в котором верхняя строка содержит основные области, а вторая строка содержит контент в зависимости от выбранной области главного меню. Через день у меня есть хороший макет Bootstrap, который отлично смотрится и отображает содержимое вторичного меню.

Используя VS 2008 (не может обновиться из-за существующей кодовой базы), навигация и гибкая разметка с Bootstrap.bundle js/bootstrap css v4.1.3 и JQuery 3.3.1

Где мне нужна помощь, так это получить главное меню Nav-Pills, чтобы открыть URL-адрес страницы темы (не работает) и показать div подменю nav-content, если оно существует (работает). Я вырезал кучу дополнительных меню / контента для примера ниже.

При нажатии Home Nav-Pill должен отобразиться Default.aspx (уже отображается при загрузке). Home nav-Pill нажмите на скриншот:

При нажатии на Таблетку Nav-Search должно появиться подменю И загрузить страницу 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 для открытия подменю? - но не работает. Идеи?

1 ответ

Через несколько дней я, наконец, получил частичную работу с написанными на javascript событиями onclick для принудительной загрузки страницы, учитывая, что data-toggle="tab" разрушает использование URL для открытия сайтов... и многое другое для загрузки подменю...

Тем не менее - в конце концов отказались от подхода, поскольку это было слишком много для небольшого эффекта, и он не поддерживал иерархию подменю sitmap. В конце я изменил 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();
                }
            }
        }
    }
}
Другие вопросы по тегам