Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4839

Blazor Server .NET 7, anchor navigation not working on Razor class library page, works on pages in main app

$
0
0

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

Viewing all articles
Browse latest Browse all 4839

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>