Blazor(.NET8)按钮触发SetItemAsStringAsync失效问题求助

问题原因 #

页面刷新的核心原因是登录按钮触发了表单的默认提交行为：如果你的登录按钮包裹在<form>标签内，按钮默认是submit类型，点击时会触发传统HTML表单的提交流程，导致整页刷新，直接中断异步的本地存储操作。

解决方案 #

方法1：修改按钮类型为button #

直接将按钮的type属性设为button，从根源避免触发表单提交：

<form>
    <!-- 账号、密码输入框等内容 -->
    <button type="button" @onclick="UserLogin">登录</button>
</form>

方法2：在点击事件中阻止默认行为 #

如果需要保留表单结构，可通过MouseEventArgs手动阻止默认提交动作：

<form>
    <!-- 账号、密码输入框等内容 -->
    <button @onclick="(e) => UserLogin(e)">登录</button>
</form>

对应C#方法修改如下：

private async Task UserLogin(MouseEventArgs e)
{
    e.PreventDefault(); // 阻止表单默认提交行为
    
    var loginresult = Utils.AuthenticateUser(authUser.Email, authUser.Password);
    var user = await Utils.DataInterface.GetUser(authUser.Email);
    
    if (loginresult)
    {
        await localStorage.SetItemAsStringAsync("website.login", user.Email);
        // 可在此添加登录成功后的逻辑，比如跳转至首页
        // NavigationManager.NavigateTo("/home");
    }
}

额外排查步骤 #

1. 确认Blazored.LocalStorage已正确注册到服务容器（你在页面生命周期事件中能正常使用，这一步大概率没问题）。
2. 若仍有问题，可添加异常捕获排查潜在错误：

private async Task UserLogin(MouseEventArgs e)
{
    e.PreventDefault();
    try
    {
        var loginresult = Utils.AuthenticateUser(authUser.Email, authUser.Password);
        var user = await Utils.DataInterface.GetUser(authUser.Email);
        
        if (loginresult)
        {
            await localStorage.SetItemAsStringAsync("website.login", user.Email);
        }
    }
    catch (Exception ex)
    {
        Console.WriteLine($"登录操作异常：{ex.Message}");
    }
}

内容的提问来源于stack exchange，提问作者Jay Imerman