使用 MudBlazor 在 Blazor 中成功更新密码后，无法显示 Snackbar 消息

Question

在使用 MudBlazor 作为 UI 组件的 Blazor 应用程序中成功或不成功地更新密码后，我遇到了显示 Snackbar 消息的问题。尽管成功更新密码，但 Snackbar 消息并未显示。我正在使用 .Net8

@page "/manage-profile"
@using Application.Data   
@using System.ComponentModel.DataAnnotations
@using Microsoft.AspNetCore.Identity
@using Application.Services
@using BCrypt.Net
@using Microsoft.AspNetCore.Antiforgery;
@attribute [RequireAntiforgeryToken]
@rendermode InteractiveServer
@inject ILogger<ManageProfile> Logger
@attribute [Authorize(Roles = "Student")]
@inject NavigationManager NavigationManager
@inject UserService UserService
@inject ISnackbar SnackBar


<PageTitle>Change password</PageTitle>

<br />
<MudContainer>
    <h3>Change password</h3>

 <MudButton Color="Color.Success" @onclick="@(() => SnackBar.Add("The reactor is running at optimum temperature", Severity.Success))">Success Snackbar</MudButton>
    <div class="row">
        <div class="col-md-6">
            <EditForm Model="Input" FormName="change-password" OnValidSubmit="OnValidSubmitAsync" method="post">
                <DataAnnotationsValidator />
                <div class="form-floating mb-3">
                    <InputText type="password" @bind-Value="Input.OldPassword" class="form-control" autocomplete="current-password" aria-required="true" placeholder="Please enter your old password." />
                    <label for="old-password" class="form-label">Old password</label>
                    <ValidationMessage For="() => Input.OldPassword" class="text-danger" />
                </div>
                <div class="form-floating mb-3">
                    <InputText type="password" @bind-Value="Input.NewPassword" class="form-control" autocomplete="new-password" aria-required="true" placeholder="Please enter your new password." />
                    <label for="new-password" class="form-label">New password</label>
                    <ValidationMessage For="() => Input.NewPassword" class="text-danger" />
                </div>
                <div class="form-floating mb-3">
                    <InputText type="password" @bind-Value="Input.ConfirmPassword" class="form-control" autocomplete="new-password" aria-required="true" placeholder="Please confirm your new password." />
                    <label for="confirm-password" class="form-label">Confirm password</label>
                    <ValidationMessage For="() => Input.ConfirmPassword" class="text-danger" />
                </div>
                <div class="mb-3">
                    <span class="text-danger">@message</span>
                </div>
                <button type="submit" class="w-100 btn btn-lg btn-primary">Update password</button>
            </EditForm>
        </div>
    </div>
</MudContainer>


@code {
    private string? message;
    private string? successMessage;
    private User user = default!;
    public required string hashedPassword;
    public required long UserId;

    [CascadingParameter]
    private HttpContext HttpContext { get; set; } = default!;

    [SupplyParameterFromForm]
    private InputModel Input { get; set; } = new();

    protected override async Task OnInitializedAsync()
    {
        UserId = await UserService.GetLoggedInUserId();
        user = await UserService.GetUserById(UserId);

    }

    private async Task OnValidSubmitAsync()
    {
        if (Input.NewPassword == Input.ConfirmPassword)
        {
            if (BCrypt.Verify(Input.OldPassword, user.Password))
            {
                hashedPassword = BCrypt.HashPassword(Input.NewPassword);
                await UserService.ChangeUserPassword(hashedPassword, user);

                await InvokeAsync(() =>
                    {
                        SnackBar.Add("Password Updated successfully", Severity.Success);
                    });
                NavigationManager.NavigateTo(NavigationManager.Uri, true);

                return;
            }
            else
            {
                message = "Old Password is Incorrect";
                return;
            }
        }
        else
        {
            message = "The new password and confirmation password do not match";
            return;
        }

    }

    private sealed class InputModel
    {
        [Required]
        [DataType(DataType.Password)]
        [Display(Name = "Current password")]
        public string OldPassword { get; set; } = "";

        [Required]
        [StringLength(100, ErrorMessage = "The {0} must be at least {2} and at max {1} characters long.", MinimumLength = 6)]
        [DataType(DataType.Password)]
        [Display(Name = "New password")]
        public string NewPassword { get; set; } = "";

        [DataType(DataType.Password)]
        [Display(Name = "Confirm new password")]
        [Compare("NewPassword", ErrorMessage = "The new password and confirmation password do not match.")]
        public string ConfirmPassword { get; set; } = "";
    }
}

我期待的是成功更新密码后，SnackBar 消息应该弹出，显示密码更改成功完成。但事实并非如此。总体而言，密码更新正常，但 Snackbar 消息未显示。但是，当我在按钮上使用它时，如代码所示，单击按钮时 SnackBar 会显示正常。

我正在寻求有关如何解决此问题的指导。任何见解或建议将不胜感激。谢谢！

Answer 1

您是否尝试过对 NavigateTo 调用进行注释以查看小吃栏是否真的显示？

// NavigationManager.NavigateTo(NavigationManager.Uri, true);

也许这可以给你一些提示？