Hash routing to named element

src/Components/Components/src/PublicAPI.Unshipped.txt

@@ -4,6 +4,8 @@ Microsoft.AspNetCore.Components.Infrastructure.ComponentStatePersistenceManager.
 Microsoft.AspNetCore.Components.RenderHandle.DispatchExceptionAsync(System.Exception! exception) -> System.Threading.Tasks.Task!
 *REMOVED*Microsoft.AspNetCore.Components.NavigationManager.ToAbsoluteUri(string! relativeUri) -> System.Uri!
 Microsoft.AspNetCore.Components.NavigationManager.ToAbsoluteUri(string? relativeUri) -> System.Uri!
+Microsoft.AspNetCore.Components.Routing.IScrollToLocationHash
+Microsoft.AspNetCore.Components.Routing.IScrollToLocationHash.RefreshScrollPositionForHash(string! locationAbsolute) -> System.Threading.Tasks.Task!
 Microsoft.AspNetCore.Components.Rendering.ComponentState
 Microsoft.AspNetCore.Components.Rendering.ComponentState.Component.get -> Microsoft.AspNetCore.Components.IComponent!
 Microsoft.AspNetCore.Components.Rendering.ComponentState.ComponentId.get -> int

src/Components/Components/src/Routing/IScrollToLocationHash.cs

@@ -0,0 +1,17 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+
+namespace Microsoft.AspNetCore.Components.Routing;
+
+/// <summary>
+/// Contract to setup scroll to location hash.
+/// </summary>
+public interface IScrollToLocationHash
+{
+    /// <summary>
+    /// Refreshes scroll position for hash on the client.
+    /// </summary>
+    /// <param name="locationAbsolute">Absolute URL of location</param> 
+    /// <returns>A <see cref="Task" /> that represents the asynchronous operation.</returns>
+    Task RefreshScrollPositionForHash(string locationAbsolute);
+}

src/Components/Components/src/Routing/Router.cs

@@ -26,6 +26,9 @@ static readonly IReadOnlyDictionary<string, object> _emptyParametersDictionary
     bool _navigationInterceptionEnabled;
     ILogger<Router> _logger;
 
+    private Type? _updateScrollPositionForHashLastHandlerType;
+    private bool _updateScrollPositionForHash;
+
     private CancellationTokenSource _onNavigateCts;
 
     private Task _previousOnNavigateTask = Task.CompletedTask;
@@ -38,6 +41,8 @@ static readonly IReadOnlyDictionary<string, object> _emptyParametersDictionary
 
     [Inject] private INavigationInterception NavigationInterception { get; set; }
 
+    [Inject] private IScrollToLocationHash ScrollToLocationHash { get; set; }
+
     [Inject] private ILoggerFactory LoggerFactory { get; set; }
 
     /// <summary>
@@ -206,6 +211,13 @@ internal virtual void Refresh(bool isNavigationIntercepted)
                 context.Handler,
                 context.Parameters ?? _emptyParametersDictionary);
             _renderHandle.Render(Found(routeData));
+
+            // If you navigate to a different page, then after the next render we'll update the scroll position
+            if (context.Handler != _updateScrollPositionForHashLastHandlerType)
+            {
+                _updateScrollPositionForHashLastHandlerType = context.Handler;
+                _updateScrollPositionForHash = true;
+            }
         }
         else
         {
@@ -276,15 +288,19 @@ private void OnLocationChanged(object sender, LocationChangedEventArgs args)
         }
     }
 
-    Task IHandleAfterRender.OnAfterRenderAsync()
+    async Task IHandleAfterRender.OnAfterRenderAsync()
     {
         if (!_navigationInterceptionEnabled)
         {
             _navigationInterceptionEnabled = true;
-            return NavigationInterception.EnableNavigationInterceptionAsync();
+            await NavigationInterception.EnableNavigationInterceptionAsync();
         }
 
-        return Task.CompletedTask;
+        if (_updateScrollPositionForHash)
+        {
+            _updateScrollPositionForHash = false;
+            await ScrollToLocationHash.RefreshScrollPositionForHash(_locationAbsolute);
+        }
     }
 
     private static partial class Log

src/Components/Components/test/Routing/RouterTest.cs

@@ -23,6 +23,7 @@ public RouterTest()
         services.AddSingleton<ILoggerFactory>(NullLoggerFactory.Instance);
         services.AddSingleton<NavigationManager>(_navigationManager);
         services.AddSingleton<INavigationInterception, TestNavigationInterception>();
+        services.AddSingleton<IScrollToLocationHash, TestScrollToLocationHash>();
         var serviceProvider = services.BuildServiceProvider();
 
         _renderer = new TestRenderer(serviceProvider);
@@ -220,6 +221,16 @@ public Task EnableNavigationInterceptionAsync()
         }
     }
 
+    internal sealed class TestScrollToLocationHash : IScrollToLocationHash
+    {
+        public static readonly TestScrollToLocationHash Instance = new TestScrollToLocationHash();
+
+        public Task RefreshScrollPositionForHash(string locationAbsolute)
+        {
+            return Task.CompletedTask;
+        }
+    }
+
     [Route("feb")]
     public class FebComponent : ComponentBase { }
 

src/Components/Endpoints/src/DependencyInjection/RazorComponentsServiceCollectionExtensions.cs

@@ -42,6 +42,7 @@ public static IRazorComponentsBuilder AddRazorComponents(this IServiceCollection
         services.TryAddScoped<NavigationManager, HttpNavigationManager>();
         services.TryAddScoped<IJSRuntime, UnsupportedJavaScriptRuntime>();
         services.TryAddScoped<INavigationInterception, UnsupportedNavigationInterception>();
+        services.TryAddScoped<IScrollToLocationHash, UnsupportedScrollToLocationHash>();
         services.TryAddScoped<ComponentStatePersistenceManager>();
         services.TryAddScoped<PersistentComponentState>(sp => sp.GetRequiredService<ComponentStatePersistenceManager>().State);
         services.TryAddScoped<IErrorBoundaryLogger, PrerenderingErrorBoundaryLogger>();

src/Components/Endpoints/src/DependencyInjection/UnsupportedScrollToLocationHash.cs

@@ -0,0 +1,14 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+
+using Microsoft.AspNetCore.Components.Routing;
+
+namespace Microsoft.AspNetCore.Components.Endpoints;
+
+internal sealed class UnsupportedScrollToLocationHash : IScrollToLocationHash
+{
+    public Task RefreshScrollPositionForHash(string locationAbsolute)
+    {
+        throw new InvalidOperationException("Scroll to location hash calls cannot be issued during server-side static rendering, because the page has not yet loaded in the browser.");
+    }
+}

src/Components/Server/src/Circuits/CircuitFactory.cs

@@ -47,12 +47,14 @@ public async ValueTask<CircuitHost> CreateCircuitHostAsync(
 
         var navigationManager = (RemoteNavigationManager)scope.ServiceProvider.GetRequiredService<NavigationManager>();
         var navigationInterception = (RemoteNavigationInterception)scope.ServiceProvider.GetRequiredService<INavigationInterception>();
+        var scrollToLocationHash = (RemoteScrollToLocationHash)scope.ServiceProvider.GetRequiredService<IScrollToLocationHash>();
         if (client.Connected)
         {
             navigationManager.AttachJsRuntime(jsRuntime);
             navigationManager.Initialize(baseUri, uri);
 
             navigationInterception.AttachJSRuntime(jsRuntime);
+            scrollToLocationHash.AttachJSRuntime(jsRuntime);
         }
         else
         {

src/Components/Server/src/Circuits/RemoteScrollToLocationHash.cs

@@ -0,0 +1,47 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+
+using Microsoft.AspNetCore.Components.Routing;
+using Microsoft.JSInterop;
+using Interop = Microsoft.AspNetCore.Components.Web.BrowserNavigationManagerInterop;
+
+namespace Microsoft.AspNetCore.Components.Server.Circuits;
+
+internal sealed class RemoteScrollToLocationHash : IScrollToLocationHash
+{
+    private IJSRuntime _jsRuntime;
+
+    public void AttachJSRuntime(IJSRuntime jsRuntime)
+    {
+        if (HasAttachedJSRuntime)
+        {
+            throw new InvalidOperationException("JSRuntime has already been initialized.");
+        }
+
+        _jsRuntime = jsRuntime;
+    }
+
+    public bool HasAttachedJSRuntime => _jsRuntime != null;
+
+    public async Task RefreshScrollPositionForHash(string locationAbsolute)
+    {
+        if (!HasAttachedJSRuntime)
+        {
+            // We should generally never get here in the ordinary case. Router will only call this API once pre-rendering is complete.
+            // This would guard any unusual usage of this API.
+            throw new InvalidOperationException("Navigation commands can not be issued at this time. This is because the component is being " +
+                "prerendered and the page has not yet loaded in the browser or because the circuit is currently disconnected. " +
+                "Components must wrap any navigation calls in conditional logic to ensure those navigation calls are not " +
+                "attempted during prerendering or while the client is disconnected.");
+        }
+
+        var hashIndex = locationAbsolute.IndexOf("#", StringComparison.CurrentCultureIgnoreCase);
+
+        if (hashIndex > -1 && locationAbsolute.Length > hashIndex + 1)
+        {
+            var elementId = locationAbsolute[(hashIndex + 1)..];
+
+            await _jsRuntime.InvokeVoidAsync(Interop.ScrollToElement, elementId).AsTask();
+        }
+    }
+}

src/Components/Server/src/DependencyInjection/ComponentServiceCollectionExtensions.cs

@@ -77,6 +77,7 @@ public static IServerSideBlazorBuilder AddServerSideBlazor(this IServiceCollecti
         services.AddScoped<NavigationManager, RemoteNavigationManager>();
         services.AddScoped<IJSRuntime, RemoteJSRuntime>();
         services.AddScoped<INavigationInterception, RemoteNavigationInterception>();
+        services.AddScoped<IScrollToLocationHash, RemoteScrollToLocationHash>();
         services.TryAddScoped<AuthenticationStateProvider, ServerAuthenticationStateProvider>();
 
         services.TryAddEnumerable(ServiceDescriptor.Singleton<IConfigureOptions<CircuitOptions>, CircuitOptionsJSInteropDetailedErrorsConfiguration>());

src/Components/Shared/src/BrowserNavigationManagerInterop.cs

@@ -17,4 +17,6 @@ internal static class BrowserNavigationManagerInterop
     public const string NavigateTo = Prefix + "navigateTo";
 
     public const string SetHasLocationChangingListeners = Prefix + "setHasLocationChangingListeners";
+
+    public const string ScrollToElement = Prefix + "scrollToElement";
 }

src/Components/Web.JS/src/DomWrapper.ts

@@ -5,7 +5,7 @@ import '@microsoft/dotnet-js-interop';
 
 export const domFunctions = {
   focus,
-  focusBySelector,
+  focusOnNavigate
 };
 
 function focus(element: HTMLOrSVGElement, preventScroll: boolean): void {
@@ -22,7 +22,12 @@ function focus(element: HTMLOrSVGElement, preventScroll: boolean): void {
   }
 }
 
-function focusBySelector(selector: string): void {
+function focusOnNavigate(selector: string): void {
+  const preventScroll = location.hash.length > 1 && elementExists(location.hash.slice(1));
+  focusBySelector(selector, preventScroll);
+}
+
+function focusBySelector(selector: string, preventScroll: boolean): void {
   const element = document.querySelector(selector) as HTMLElement;
   if (element) {
     // If no explicit tabindex is defined, mark it as programmatically-focusable.
@@ -32,6 +37,12 @@ function focusBySelector(selector: string): void {
       element.tabIndex = -1;
     }
 
-    element.focus();
+    element.focus({ preventScroll: preventScroll });
   }
 }
+
+function elementExists(identifier: string): boolean {
+  const element = document.getElementById(identifier)
+      || document.getElementsByName(identifier)[0];
+  return !!element;
+}

src/Components/Web.JS/src/Services/NavigationManager.ts

@@ -27,6 +27,7 @@ export const internalFunctions = {
   navigateTo: navigateToFromDotNet,
   getBaseURI: (): string => document.baseURI,
   getLocationHref: (): string => location.href,
+  scrollToElement
 };
 
 function listenForNavigationEvents(
@@ -53,6 +54,18 @@ function setHasLocationChangingListeners(hasListeners: boolean) {
   hasLocationChangingEventListeners = hasListeners;
 }
 
+export function scrollToElement(identifier: string): boolean {
+  const element = document.getElementById(identifier)
+    || document.getElementsByName(identifier)[0];
+
+    if (element) {
+      element.scrollIntoView();
+      return true;
+    }
+
+    return false;
+}
+
 export function attachToEventDelegator(eventDelegator: EventDelegator): void {
   // We need to respond to clicks on <a> elements *after* the EventDelegator has finished
   // running its simulated bubbling process so that we can respect any preventDefault requests.
@@ -76,8 +89,13 @@ export function attachToEventDelegator(eventDelegator: EventDelegator): void {
     const anchorTarget = findAnchorTarget(event);
 
     if (anchorTarget && canProcessAnchor(anchorTarget)) {
-      const href = anchorTarget.getAttribute('href')!;
-      const absoluteHref = toAbsoluteUri(href);
+      let anchorHref = anchorTarget.getAttribute('href')!; 
+      if (anchorHref.startsWith('#')) {
+        // Preserve the existing URL but set the hash to match the link that was clicked
+        anchorHref = `${location.origin}${location.pathname}${location.search}${anchorHref}`;
+      }
+
+      const absoluteHref = toAbsoluteUri(anchorHref);     
 
       if (isWithinBaseUriSpace(absoluteHref)) {
         event.preventDefault();
@@ -87,6 +105,23 @@ export function attachToEventDelegator(eventDelegator: EventDelegator): void {
   });
 }
 
+function isSamePageWithHash(absoluteHref: string): boolean {
+  const hashIndex = absoluteHref.indexOf('#');
+  return hashIndex > -1 && location.href.replace(location.hash, '') === absoluteHref.substring(0, hashIndex);
+}
+
+function performScrollToElementOnTheSamePage(absoluteHref : string, replace: boolean, state: string | undefined = undefined): void {
+  saveToBrowserHistory(absoluteHref, replace, state);
+
+  const hashIndex = absoluteHref.indexOf('#');
+  if (hashIndex == absoluteHref.length - 1) {
+    return;
+  }
+
+  const identifier = absoluteHref.substring(hashIndex + 1);
+  scrollToElement(identifier);
+}
+
 // For back-compat, we need to accept multiple overloads
 export function navigateTo(uri: string, options: NavigationOptions): void;
 export function navigateTo(uri: string, forceLoad: boolean): void;
@@ -138,6 +173,11 @@ function performExternalNavigation(uri: string, replace: boolean) {
 async function performInternalNavigation(absoluteInternalHref: string, interceptedLink: boolean, replace: boolean, state: string | undefined = undefined, skipLocationChangingCallback = false) {
   ignorePendingNavigation();
 
+  if (isSamePageWithHash(absoluteInternalHref)) {
+    performScrollToElementOnTheSamePage(absoluteInternalHref, replace, state);
+    return;
+  }   
+
   if (!skipLocationChangingCallback && hasLocationChangingEventListeners) {
     const shouldContinueNavigation = await notifyLocationChanging(absoluteInternalHref, state, interceptedLink);
     if (!shouldContinueNavigation) {
@@ -152,6 +192,12 @@ async function performInternalNavigation(absoluteInternalHref: string, intercept
   // we render the new page. As a best approximation, wait until the next batch.
   resetScrollAfterNextBatch();
 
+  saveToBrowserHistory(absoluteInternalHref, replace, state);
+
+  await notifyLocationChanged(interceptedLink);
+}
+
+function saveToBrowserHistory(absoluteInternalHref: string, replace: boolean, state: string | undefined = undefined): void {
   if (!replace) {
     currentHistoryIndex++;
     history.pushState({
@@ -164,8 +210,6 @@ async function performInternalNavigation(absoluteInternalHref: string, intercept
       _index: currentHistoryIndex,
     }, /* ignored title */ '', absoluteInternalHref);
   }
-
-  await notifyLocationChanged(interceptedLink);
 }
 
 function navigateHistoryWithoutPopStateCallback(delta: number): Promise<void> {

src/Components/Web/src/DomWrapperInterop.cs

@@ -9,5 +9,5 @@ internal static class DomWrapperInterop
 
     public const string Focus = Prefix + "focus";
 
-    public const string FocusBySelector = Prefix + "focusBySelector";
+    public const string FocusOnNavigate = Prefix + "focusOnNavigate";
 }

src/Components/Web/src/Routing/FocusOnNavigate.cs

@@ -56,7 +56,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
         if (_focusAfterRender)
         {
             _focusAfterRender = false;
-            await JSRuntime.InvokeVoidAsync(DomWrapperInterop.FocusBySelector, Selector);
+            await JSRuntime.InvokeVoidAsync(DomWrapperInterop.FocusOnNavigate, Selector);
         }
     }
 

src/Components/WebAssembly/WebAssembly/src/Hosting/WebAssemblyHostBuilder.cs

@@ -249,6 +249,7 @@ internal void InitializeDefaultServices()
         Services.AddSingleton<IJSRuntime>(DefaultWebAssemblyJSRuntime.Instance);
         Services.AddSingleton<NavigationManager>(WebAssemblyNavigationManager.Instance);
         Services.AddSingleton<INavigationInterception>(WebAssemblyNavigationInterception.Instance);
+        Services.AddSingleton<IScrollToLocationHash>(WebAssemblyScrollToLocationHash.Instance);
         Services.AddSingleton(new LazyAssemblyLoader(DefaultWebAssemblyJSRuntime.Instance));
         Services.AddSingleton<ComponentStatePersistenceManager>();
         Services.AddSingleton<PersistentComponentState>(sp => sp.GetRequiredService<ComponentStatePersistenceManager>().State);

src/Components/WebAssembly/WebAssembly/src/Services/IInternalJSImportMethods.cs

@@ -13,6 +13,8 @@ internal interface IInternalJSImportMethods
 
     void NavigationManager_EnableNavigationInterception();
 
+    void NavigationManager_ScrollToElement(string id);
+
     string NavigationManager_GetLocationHref();
 
     string NavigationManager_GetBaseUri();