nuevo en Blazor. Actualmente estoy trabajando en una aplicación Blazor que usa componentes DevExpress, lo que dificulta un poco el desplazamiento. Quiero que la aplicación se cargue al comienzo de la página cada vez que navego a una nueva página. Actualmente, una solución temporal que encontré es usar el método OnAfterRenderAsync del diseño de navegación principal para llamar a esta función.
protected override async Task OnAfterRenderAsync(bool firstRender) { await JsRuntime.InvokeVoidAsync("ScrollTop"); }El método anterior se utiliza en el componente MainLayout. Su implementación está disponible en un archivo JS diferente que es
function ScrollTop() { document.getElementsByClassName('content')[0].scrollTop = 0; }Este es un método algo torpe porque aunque las páginas se cargan en la parte superior, cualquier cambio en los componentes de la página hace que la página se desplace hacia arriba nuevamente. ¿Hay alguna manera de hacer esto donde el evento se dispararía solo si se cambia la ubicación de la página?
Puedes usar este método. Cree un nuevo archivo JavaScript en su carpeta wwwroot. Por ejemplo ScrollToTop.js. Dentro pon tu código con función de exportación.
export function Scroll() { document.getElementsByClassName('content')[0].scrollTop = 0; }En su componente, cree un método OnAfterRenderAsync y dentro de él llame a su función:
protected override async Task OnAfterRenderAsync(bool firstRender) { await using var module = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./ScrollToTop.js"); await module.InvokeVoidAsync("Scroll"); }Tenga esto en su MainLayout.razor
@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; }