locked
I don't get how to use simple href="#section" anchors on Blazor. RRS feed

  • Question

  • User-2066630380 posted

    I do apologize that this sounds so NOOB, but I'm just wondering how to get this done. For some reason, oddly when first directing to a non available page and then using browser back these links do work. See my hello world example here (link removed)

    With the link we should just be able to auto scroll to the bottom. How do we substitute the simple same page <a href="#sectionid"></a> tag for blazor? 

    Thanks anyone!

    Thursday, July 4, 2019 1:44 PM

Answers

  • User-474980206 posted
    Because blazer, like many SPA’s uses hashtag navigation for routing, on page links don’t work. Use scrollintoview instead.
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, July 4, 2019 4:35 PM

All replies

  • User-474980206 posted
    Because blazer, like many SPA’s uses hashtag navigation for routing, on page links don’t work. Use scrollintoview instead.
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, July 4, 2019 4:35 PM
  • User-2066630380 posted

    Hi Bruce, 

    Much appreciate the right direction you've provided. I further researched and impemented the latest preview 3 (apparently a changing landscape), I've had to use async for this. It is almost compiling except for once exception line UriHelper.OnLocationChanged += OnLocationChanges;  gives me No overload for 'OnLocationChanges' matches delegate 'EventHandler<LocationChangedEventArgs>'

    This is what I have below. Any ideas would be very welcomed. Thanks!

    @functions {
    
            private string Type { get; set; }
    
    
        protected override async Task OnInitAsync()
        {
          
            await base.OnInitAsync();
            await NavigateToElement();
            UriHelper.OnLocationChanged += OnLocationChanges;
        } 
     
    
        private async Task OnLocationChanges(object sender, string location) => await NavigateToElement();
    
        private async Task NavigateToElement()
        {
            var url = UriHelper.GetAbsoluteUri();
            var fragment = new Uri(url).Fragment;
    
            if (string.IsNullOrEmpty(fragment))
            {
                return;
            }
    
            var elementId = fragment.StartsWith("#") ? fragment.Substring(1) : fragment;
    
            if (string.IsNullOrEmpty(elementId))
            {
                return;
            }
    
            await ScrollToElementId(elementId);
        }
    
        private Task<bool> ScrollToElementId(string elementId)
        {
            return JSRuntime.InvokeAsync<bool>("scrollToElementId", elementId);
        }
    }

    Friday, July 5, 2019 9:12 AM
  • User-474980206 posted

    I use react instead of blazor, so can not help you. I just follow its technology. 

    blazor is designed similar to react and others. its a component model with a virtual dom, and synthetic events. just like react, a blazor app is a tree of components, an event is passesd to the blazor engine and causes the engine to render the tree to build a new virtual dom (this is different than razor pages which writes html directly to the stream).

    there is a javascript module that drives all of this. it calls the blazor code (via websocket if server hosted, else directly), and gets back update to its virtual dom tree. it then compares its virtual dom to the real dom and update the real dom.

    this javascript module handles all real events, like mouse move, click and routing. it then creates a synthetic event that is passed to the blazor engine (server or web assembly hosted), which in turn will return a new virtual dom (they may have partial updates at this point).

    here is the javascript support for navigation:

       https://github.com/aspnet/AspNetCore/blob/master/src/Components/Web.JS/src/Services/UriHelper.ts

    you will see its uses the browser's history object:

       https://developer.mozilla.org/en-US/docs/Web/API/History_API

    and just calls into the blazor engine to navigate.

    Friday, July 5, 2019 11:02 PM