如何在没有 Javascript 的情况下将焦点设置到页面顶部？

问题描述

有没有办法在不使用 JavaScript 的情况下在 Blazor 中转到页面顶部？我有一个项目列表，用户可以单击其中一个进行编辑并在页面顶部查看更多详细信息。我正在为我的组件使用 MudBlazor。

解决方法

使用 .NET 5.0，您现在拥有 FocusAsync()

<input @ref="exampleInput" />
<button @onclick="ChangeFocus">Focus the Input Element</button>
@code {
    private ElementReference exampleInput;
    private async Task ChangeFocus()
    {
        await exampleInput.FocusAsync();
    }
}

https://docs.microsoft.com/en-us/aspnet/core/blazor/components/event-handling?view=aspnetcore-5.0#focus-an-element

,

为了到达页面顶部，我使用 NavigationManager 导航到同一页面，并将 forceLoad 设置为 false（默认值）

    @inject NavigationManager NavigationManager

    NavigationManager.NavigateTo($"/{currentpage}");

这有点麻烦，但它可以工作并且不会重新加载页面。