![](/img/trans.png)
[英]Passing values from JavaScript to C# ASP.NET Core Razor Pages for SQL Querying
[英]Change active navbar link using JavaScript in ASP.NET Core Razor Pages
當我瀏覽我的Razor-Pages
時,我需要更改導航欄鏈接顏色。 我嘗試使用JavaScript
,但似乎每次當我 go 到另一個頁面時頁面都會重新呈現,我無法toggle
我的元素。
這是我到目前為止所嘗試的:
導航欄鏈接
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between ml-5">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link active-link" asp-area="" asp-page="/Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-area="" asp-page="/Privacy">Privacy</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-page="/Movies/Index">Movies</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-page="/Genres/Index">Genres</a>
</li>
</ul>
</div>
網站.js
const links = document.querySelectorAll('.nav-link');
let currentActive = document.querySelector('.active-link');
const changeClass = (e) => {
//e.preventDefault();
currentActive.classList.remove('active-link');
e.target.classList.add('active-link');
};
links.forEach((el) => el.addEventListener('click', changeClass));
在這里,我將當前active link
保存在我的js
中,當我導航到另一個頁面時,頁面會重新呈現,並且我的js
文件會再次重新加載,以便我之前的值設置回默認的active link
。
我找到了一種可能的解決方案,但它似乎有點硬編碼和解決方法,我相信應該有更好的方法。
PS 理想情況下,使用JavaScript
的解決方案是最好的,但是,我不會在這里堅持任何事情。
使用DOMContentLoaded
事件而不是 click 事件。 這樣,更改將在呈現后應用於實際頁面。 目前,您正在將更改應用於您從中導航的頁面上的鏈接:
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.nav-link').forEach(link => {
if (link.getAttribute('href').toLowerCase() === location.pathname.toLowerCase()) {
link.classList.add('active-link');
} else {
link.classList.remove('active-link');
}
});
})
不一定需要 javascript。
TagHelpers 可用於服務器端解決方案,請在此處查看我對類似問題的回答。
例如,標簽助手使用導航欄元素上的自定義屬性來描述每個鏈接對應的頁面。 然后標簽助手處理屬性時,將值與當前地址進行比較,如果匹配,則添加active
的 class。
它還會刪除該屬性,使其在響應 HTML 中對用戶不可用。 在服務器端執行此操作還可確保禁用 javascript 的用戶可以使用突出顯示。
我遇到了同樣的問題並開始使用這種方法:為每個頁面創建不同的布局。 每個布局都突出顯示了感興趣的鏈接。 問題是您有許多布局,只是在導航欄鏈接中進行了微小的更改。
所以,我決定改進解決方案,最終它比預期的要簡單得多:
這里是第二種方法的片段:
// _Layout.cshtml
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" asp-area="" asp-page="/Index">VS22Netcore01</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul id="mainMenu" class="navbar-nav flex-grow-1">
<li class="nav-item">
**<a id="linkHome"** class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
</li>
<li class="nav-item">
**<a id="linkPrivacy"** class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
</li>
<li class="nav-item">
**<a id="linkAbout"** class="nav-link text-dark" asp-area="" asp-page="/About">Acerca de</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">
<main role="main" class="pb-3">
@RenderBody() <!-- inserta la pagina en el container} -->
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2021 - VS22Netcore01 - <a asp-area="" asp-page="/Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
**@await RenderSectionAsync("Scripts", required: true)**
</body>
請注意雙星號之間的代碼。
然后,在每個內容頁面中,我添加了如下內容:
//Privacy.cshtml, a sample page
@page
@model PrivacyModel
@{
ViewData["Title"] = "Privacy Policy";
}
<h1>@ViewData["Title"]</h1>
<p>Use this page to detail your site's privacy policy.</p>
@section Scripts
{
<script>
**$('#linkPrivacy').removeClass('text-dark');
$('#linkPrivacy').addClass('text-info');**
</script>
}
如您所見,每個內容頁面中的腳本都會更改鏈接的樣式。 這樣你就有了不同的“稍微”頁面。
問候
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.