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.ScrollToLocationHash(string! locationAbsolute) -> System.Threading.Tasks.Task!
 Microsoft.AspNetCore.Components.Sections.SectionContent
 Microsoft.AspNetCore.Components.Sections.SectionContent.ChildContent.get -> Microsoft.AspNetCore.Components.RenderFragment?
 Microsoft.AspNetCore.Components.Sections.SectionContent.ChildContent.set -> void

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>
+    /// Scrolls to location 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 ScrollToLocationHash(string locationAbsolute);
+}

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

@@ -38,6 +38,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>
@@ -277,14 +279,19 @@ private void OnLocationChanged(object sender, LocationChangedEventArgs args)
     }
 
     Task IHandleAfterRender.OnAfterRenderAsync()
+    {
+        return EnableNavigationInterceptionThenScrollToLocationHash();
+    }
+
+    private async Task EnableNavigationInterceptionThenScrollToLocationHash()
     {
         if (!_navigationInterceptionEnabled)
         {
             _navigationInterceptionEnabled = true;
-            return NavigationInterception.EnableNavigationInterceptionAsync();
+            await NavigationInterception.EnableNavigationInterceptionAsync();
         }
 
-        return Task.CompletedTask;
+        await ScrollToLocationHash.ScrollToLocationHash(_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 ScrollToLocationHash(string locationAbsolute)
+        {
+            return Task.CompletedTask;
+        }
+    }
+
     [Route("feb")]
     public class FebComponent : ComponentBase { }
 

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

@@ -41,6 +41,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 ScrollToLocationHash(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 ScrollToLocationHash(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

@@ -6,6 +6,7 @@ import '@microsoft/dotnet-js-interop';
 export const domFunctions = {
   focus,
   focusBySelector,
+  focusOnNavigate
 };
 
 function focus(element: HTMLOrSVGElement, preventScroll: boolean): void {
@@ -22,6 +23,15 @@ function focus(element: HTMLOrSVGElement, preventScroll: boolean): void {
   }
 }
 
+function focusOnNavigate(selector: string): void {
+  let hash = location.hash;
+  let element : HTMLElement | null;
+  element = hash.length > 1 ? document.getElementById(hash.slice(1)) : null;
+  if (!element) {
+    focusBySelector(selector);
+  }
+}
+
 function focusBySelector(selector: string): void {
   const element = document.querySelector(selector) as HTMLElement;
   if (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,14 @@ function setHasLocationChangingListeners(hasListeners: boolean) {
   hasLocationChangingEventListeners = hasListeners;
 }
 
+function scrollToElement(id : string) : void {
+  var element = document.getElementById(id);
+  if (element)
+  {
+    element.scrollIntoView();
+  }
+}
+
 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 +85,18 @@ export function attachToEventDelegator(eventDelegator: EventDelegator): void {
     const anchorTarget = findAnchorTarget(event);
 
     if (anchorTarget && canProcessAnchor(anchorTarget)) {
-      const href = anchorTarget.getAttribute('href')!;
-      const absoluteHref = toAbsoluteUri(href);
+      const anchorHref = anchorTarget.getAttribute('href')!;
+
+      if (anchorHref.startsWith('#') && anchorHref.length > 1) {
+        event.preventDefault(); 
+        const hash = location.hash;
+        const urlInBrowser = hash.length > 1 ? location.href.replace(hash, anchorHref) : location.href + anchorHref;
+        window.history.pushState({}, "", urlInBrowser);
+        scrollToElement(anchorHref.slice(1));
+        return;
+      }
+
+      const absoluteHref = toAbsoluteUri(anchorHref);     
 
       if (isWithinBaseUriSpace(absoluteHref)) {
         event.preventDefault();

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

src/Components/WebAssembly/WebAssembly/src/Services/InternalJSImportMethods.cs

@@ -25,6 +25,9 @@ public string GetApplicationEnvironment()
     public void NavigationManager_EnableNavigationInterception()
         => NavigationManager_EnableNavigationInterceptionCore();
 
+    public void NavigationManager_ScrollToElement(string id)
+        => NavigationManager_ScrollToElementCore(id);
+
     public string NavigationManager_GetLocationHref()
         => NavigationManager_GetLocationHrefCore();
 
@@ -64,6 +67,9 @@ public string RegisteredComponents_GetParameterValues(int id)
     [JSImport(BrowserNavigationManagerInterop.EnableNavigationInterception, "blazor-internal")]
     private static partial void NavigationManager_EnableNavigationInterceptionCore();
 
+    [JSImport(BrowserNavigationManagerInterop.ScrollToElement, "blazor-internal")]
+    private static partial void NavigationManager_ScrollToElementCore(string id);
+
     [JSImport(BrowserNavigationManagerInterop.GetLocationHref, "blazor-internal")]
     private static partial string NavigationManager_GetLocationHrefCore();
 

src/Components/WebAssembly/WebAssembly/src/Services/WebAssemblyScrollToLocationHash.cs

@@ -0,0 +1,25 @@
+// 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.WebAssembly.Services;
+
+internal sealed class WebAssemblyScrollToLocationHash : IScrollToLocationHash
+{
+    public static readonly WebAssemblyScrollToLocationHash Instance = new WebAssemblyScrollToLocationHash();
+
+    public Task ScrollToLocationHash(string locationAbsolute)
+    {
+        var hashIndex = locationAbsolute.IndexOf("#", StringComparison.CurrentCultureIgnoreCase);
+
+        if (hashIndex > -1 && locationAbsolute.Length > hashIndex + 1)
+        {
+            var elementId = locationAbsolute[(hashIndex + 1)..];
+
+            InternalJSImportMethods.Instance.NavigationManager_ScrollToElement(elementId);
+        }
+
+        return Task.CompletedTask;
+    }
+}

src/Components/WebAssembly/WebAssembly/test/TestInternalJSImportMethods.cs

@@ -25,6 +25,8 @@ public string GetPersistedState()
 
     public void NavigationManager_EnableNavigationInterception() { }
 
+    public void NavigationManager_ScrollToElement(string id) { }
+
     public string NavigationManager_GetBaseUri()
         => "https://www.example.com/awesome-part-that-will-be-truncated-in-tests";
 

src/Components/WebView/WebView/src/ComponentsWebViewServiceCollectionExtensions.cs

@@ -25,6 +25,7 @@ public static IServiceCollection AddBlazorWebView(this IServiceCollection servic
         services.AddLogging();
         services.TryAddScoped<IJSRuntime, WebViewJSRuntime>();
         services.TryAddScoped<INavigationInterception, WebViewNavigationInterception>();
+        services.TryAddScoped<IScrollToLocationHash, WebViewScrollToLocationHash>();
         services.TryAddScoped<NavigationManager, WebViewNavigationManager>();
         services.TryAddScoped<IErrorBoundaryLogger, WebViewErrorBoundaryLogger>();
         return services;

src/Components/WebView/WebView/src/Services/WebViewScrollToLocationHash.cs

@@ -0,0 +1,11 @@
+// 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.WebView.Services;
+
+internal sealed class WebViewScrollToLocationHash : IScrollToLocationHash
+{
+    public Task ScrollToLocationHash(string locationAbsolute) => Task.CompletedTask;
+}