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> | <a href="#">Help</a> | <a href="#">Contact Us</a> | <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();
}
}
}
}
}