Blazor Server on .NET 7, implemented anchor navigation using the code from text verbatim. This works great for pages in the main app. When applied to pages located in a Razor class library, navigation always routes to the main app index page - why?
I expected a hyperlink click to scroll down to a section lower in the active Razor class library page - not the main app's index page.
AnchorNavigation.razor from the class library:
@inject IJSRuntime JSRuntime@inject NavigationManager NavigationManager@implements IDisposable@code { protected override void OnInitialized() { NavigationManager.LocationChanged += OnLocationChanged; } private IJSObjectReference? module; protected override async Task OnAfterRenderAsync(bool firstRender) { // if (firstRender) // module = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./SharedComponents\\AnchorNavigation.js"); await ScrollToFragment(); } public async void Dispose() { // if (module is not null) // await module.DisposeAsync(); NavigationManager.LocationChanged -= OnLocationChanged; } private async void OnLocationChanged(object sender, LocationChangedEventArgs e) { await ScrollToFragment(); } private async Task ScrollToFragment() { var uri = new Uri(NavigationManager.Uri, UriKind.Absolute); var fragment = uri.Fragment; if (fragment.StartsWith('#')) { // Handle text fragment (https://example.org/#test:~:text=foo) // https://github.com/WICG/scroll-to-text-fragment/ var elementId = fragment.Substring(1); var index = elementId.IndexOf(":~:", StringComparison.Ordinal); if (index > 0) { elementId = elementId.Substring(0, index); } if (!string.IsNullOrEmpty(elementId)) { await JSRuntime.InvokeVoidAsync("BlazorScrollToId1", elementId); } } }}_Host.cshtml from the main app:
<script> function BlazorScrollToId1(id) { const element = document.getElementById(id); if (element instanceof HTMLElement) { element.scrollIntoView({ behavior: "smooth", block: "start", inline: "nearest" }); } }</script>Index.razor from the main app - this works:
...<Common.SharedComponents.AnchorNavigation /> ...<p><a href="@GetHreff(0)">0.0 Introduction</a></p> ...<section id="@GetIdf(0)"> ...<h5 class="cardB-title">Introduction</h5>...</section>@code { string GetIdf(int i) => "header-" + i; string GetHreff(int i) => "#" + GetIdf(i);}Table of Contents from class library - this does not work, it navigates to the app's main index page.
@page "/Table of Contents"<PageTitle>Table of Contents</PageTitle><Common.SharedComponents.AnchorNavigation /> ...<p><a href="@GetHreff(0)">Paper 1</a></p> ...<section id="@GetIdf(0)"> ...<h2>Paper 1</h5>...</section>@code { string GetIdf(int i) => "header-" + i; string GetHreff(int i) => "#" + GetIdf(i);}