Exclusive event triggered in Blazor only upon changing the page location

Question

Exclusive event triggered in Blazor only upon changing the page location

Just starting out with Blazor. I've been working on a Blazor project that utilizes DevExpress components, causing some issues with scrolling. My goal is to have the page start at the top every time I navigate to a new page. Currently, I've found a temporary solution by using the OnAfterRenderAsync method in the Main Navigation Layout to trigger this functionality.

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    await JsRuntime.InvokeVoidAsync("ScrollTop");
}

This method is implemented in the MainLayout component and the corresponding code can be found in a separate JS file:

function ScrollTop() {

document.getElementsByClassName('content')[0].scrollTop = 0;

}

Although this approach somewhat works by loading pages at the top, any changes made to in-page components cause the page to scroll back up. Is there a way to modify this so that the event only fires when the page location is changed?

javascript c#.net blazor devexpress

Answer 1

Answer №1

A solution is available for implementing this technique. Begin by creating a new JavaScript file within your wwwroot directory. For instance, name it ScrollToTop.js. Inside this file, insert your code utilizing the export function.

export function Scroll() {
document.getElementsByClassName('content')[0].scrollTop = 0;
}

Within your component, establish an OnAfterRenderAsync method and invoke your function within it:

    protected override async Task OnAfterRenderAsync(bool firstRender)
{
        await using var module = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./ScrollToTop.js");
        await module.InvokeVoidAsync("Scroll");
}

Answer 2

A solution is available for implementing this technique. Begin by creating a new JavaScript file within your wwwroot directory. For instance, name it ScrollToTop.js. Inside this file, insert your code utilizing the export function.

export function Scroll() {
document.getElementsByClassName('content')[0].scrollTop = 0;
}

Within your component, establish an OnAfterRenderAsync method and invoke your function within it:

    protected override async Task OnAfterRenderAsync(bool firstRender)
{
        await using var module = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./ScrollToTop.js");
        await module.InvokeVoidAsync("Scroll");
}

Answer 3

Answer №2

Make sure to include the following code snippet in your MainLayout.razor file:

@inject NavigationManager NavigationManager


protected override void OnInitialized() {
    NavigationManager.LocationChanged += OnLocationChanged;
}

async void OnLocationChanged(object sender, LocationChangedEventArgs args) {        
    await JsRuntime.InvokeVoidAsync("ScrollTop");
}

public void Dispose() {
    NavigationManager.LocationChanged -= OnLocationChanged;
}

Answer 4

Make sure to include the following code snippet in your MainLayout.razor file:

@inject NavigationManager NavigationManager


protected override void OnInitialized() {
    NavigationManager.LocationChanged += OnLocationChanged;
}

async void OnLocationChanged(object sender, LocationChangedEventArgs args) {        
    await JsRuntime.InvokeVoidAsync("ScrollTop");
}

public void Dispose() {
    NavigationManager.LocationChanged -= OnLocationChanged;
}

Exclusive event triggered in Blazor only upon changing the page location

Answer №1

Answer №2

Similar questions

Assistance required for activating an unidentified function or plugin within a Chrome extension

Issue with adding json_encode to the end

The image slide change feature ceases to function properly when incorporating two separate functions

Using an if/else statement in a Jade Template to conditionally remove a select option

Tips for entering multiple values in an input field

Load the index file using any URL parameter in the Express.js Router's "catchall" feature

Issue with React's MaterialUI Select Component not displaying the values passed as props

Hiding a button based on the visibility of another button in the user's viewport

What is the best way to utilize a basic jQuery hide/show function to display everything before hiding it?

Filtering a list with Vue.js using an array of checkboxes

What methods are commonly used to calculate the bitsPerSecond rate for media recording?

What is the correct way to incorporate Regular Expressions in Selenium IDE coding?

The Node.js error message reads: "Cannot set headers after they have been sent" while trying to make a post request

Tips on using CSS to hide elements on a webpage with display:none

Should I implement this practice when developing an AJAX website? Is it recommended to enable PHP code within .html files, or should I switch to using .php files instead?

Error: Unable to access property 'nTr' as it is not defined

How can I retrieve the key name associated with each value in a JSON file?

AngularJS users are experiencing issues with the "See More" feature not functioning as expected

What is the significance of combining two arrays?

Import Document from Project - Automation Framework Visual Studio 2010 C# using Selenium WebDriver