如何在Blazor中打开窗口时禁用NavMenu组件？需先验证用户输入

下面是两种直接实用的实现方案，可根据你的项目结构选择：

方案1：通过布局组件传递状态（适合单页面验证场景） #

1. 在MainLayout.razor中添加控制变量并传递给NavMenu：

@inherits LayoutComponentBase

<div class="page">
    <div class="sidebar">
        <!-- 将启用状态传递给NavMenu组件 -->
        <NavMenu IsEnabled="@IsNavMenuEnabled" />
    </div>

    <main>
        <article class="content px-4">
            @Body
        </article>
    </main>
</div>

@code {
    // 初始状态设为禁用
    public bool IsNavMenuEnabled { get; set; } = false;
}

2. 修改NavMenu.razor，接收参数并控制菜单项交互：

<div class="top-row ps-3 navbar navbar-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="">你的应用名称</a>
    </div>
</div>

<nav class="flex-column">
    <div class="nav-item px-3">
        <!-- 添加禁用样式，点击时判断是否允许导航 -->
        <NavLink class="nav-link @(IsEnabled ? "" : "disabled")" href="" @onclick="(e) => HandleNavClick(e, "")">
            <span class="oi oi-home" aria-hidden="true"></span> 首页
        </NavLink>
    </div>
    <div class="nav-item px-3">
        <NavLink class="nav-link @(IsEnabled ? "" : "disabled")" href="counter" @onclick="(e) => HandleNavClick(e, "counter")">
            <span class="oi oi-plus" aria-hidden="true"></span> 计数器
        </NavLink>
    </div>
    <!-- 其他菜单项按同样方式修改 -->
</nav>

@code {
    // 接收布局传递的启用状态参数
    [Parameter] public bool IsEnabled { get; set; } = true;

    private void HandleNavClick(MouseEventArgs e, string href)
    {
        if (!IsEnabled)
        {
            // 阻止默认导航行为
            e.PreventDefault();
            // 可选：添加提示告知用户需先完成验证
            // 比如调用你的Toast组件：ToastService.ShowInfo("请先完成当前页面的验证");
        }
    }
}

3. 在NavMenu.razor.css中添加禁用样式：

.nav-link.disabled {
    pointer-events: none; /* 阻止点击事件触发 */
    opacity: 0.6; /* 视觉上显示为灰色 */
    cursor: not-allowed; /* 鼠标悬停显示禁止图标 */
}

4. 在需要验证的页面中，验证通过后更新布局状态：

<EditForm Model="@FormModel" OnValidSubmit="OnValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <div class="mb-3">
        <label>必填项:</label>
        <InputText @bind-Value="FormModel.RequiredField" class="form-control" />
        <ValidationMessage For="@(() => FormModel.RequiredField)" />
    </div>

    <button type="submit" class="btn btn-primary">完成验证</button>
</EditForm>

@code {
    private FormModel FormModel { get; set; } = new();
    // 级联获取布局组件实例
    [CascadingParameter] private MainLayout MainLayout { get; set; }

    private void OnValidSubmit()
    {
        // 验证通过后启用NavMenu
        MainLayout.IsNavMenuEnabled = true;
    }

    public class FormModel
    {
        [Required(ErrorMessage = "此项不能为空")]
        public string RequiredField { get; set; }
    }
}

方案2：全局状态服务（适合多页面共享验证状态） #

如果验证状态需要在多个页面共享，或者不想依赖布局组件，可以用状态服务实现：

1. 创建状态服务类：

public class NavMenuStateService
{
    // 导航菜单启用状态
    public bool IsEnabled { get; private set; } = false;
    // 状态变更通知事件
    public event Action OnStateChanged;

    public void EnableNavMenu()
    {
        IsEnabled = true;
        NotifyStateChanged();
    }

    public void DisableNavMenu()
    {
        IsEnabled = false;
        NotifyStateChanged();
    }

    private void NotifyStateChanged()
    {
        OnStateChanged?.Invoke();
    }
}

2. 在Program.cs中注册服务：

builder.Services.AddScoped<NavMenuStateService>();

3. 修改NavMenu.razor注入服务并响应状态变更：

@inject NavMenuStateService NavMenuState
@implements IDisposable

<nav class="flex-column">
    <div class="nav-item px-3">
        <NavLink class="nav-link @(NavMenuState.IsEnabled ? "" : "disabled")" href="" @onclick="(e) => HandleNavClick(e, "")">
            <span class="oi oi-home" aria-hidden="true"></span> 首页
        </NavLink>
    </div>
    <!-- 其他菜单项按同样方式修改 -->
</nav>

@code {
    protected override void OnInitialized()
    {
        // 订阅状态变更事件，自动更新UI
        NavMenuState.OnStateChanged += StateHasChanged;
    }

    private void HandleNavClick(MouseEventArgs e, string href)
    {
        if (!NavMenuState.IsEnabled)
        {
            e.PreventDefault();
        }
    }

    // 取消订阅避免内存泄漏
    public void Dispose()
    {
        NavMenuState.OnStateChanged -= StateHasChanged;
    }
}

4. 在验证页面中调用服务启用菜单：

@inject NavMenuStateService NavMenuState

<EditForm Model="@FormModel" OnValidSubmit="OnValidSubmit">
    <!-- 表单内容同方案1 -->
</EditForm>

@code {
    private void OnValidSubmit()
    {
        NavMenuState.EnableNavMenu();
    }
}

注意事项 #

• 若页面刷新后需要保留验证状态，可以结合LocalStorage或SessionStorage，在状态服务初始化时读取存储的状态。
• 禁用样式的pointer-events: none和点击事件阻止逻辑配合使用，可双重防止用户绕过限制。

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