.NET Blazor中多模态框可见性的统一管理方法问询

方案一：枚举+单个状态变量（推荐，类型安全） #

适合模态框数量固定的场景，用枚举标识当前激活的模态框，替代多个独立布尔值。

1. 定义模态框枚举 #

在页面或共享类中定义枚举，列出所有需要管理的模态框：

public enum ActiveModal
{
    None,
    Foo,
    Bar
}

2. 页面中使用单个状态变量 #

替换原有多个布尔值，用一个枚举变量记录当前显示的模态框：

@if (CurrentActiveModal == ActiveModal.Foo)
{
    <Modal OnClose="() => CurrentActiveModal = ActiveModal.None">
        <h3>Foo 编辑表单</h3>
        <!-- 表单控件内容 -->
        <button @onclick="() => CurrentActiveModal = ActiveModal.None">关闭</button>
    </Modal>
}

@if (CurrentActiveModal == ActiveModal.Bar)
{
    <Modal OnClose="() => CurrentActiveModal = ActiveModal.None">
        <h3>Bar 编辑表单</h3>
        <!-- 表单控件内容 -->
        <button @onclick="() => CurrentActiveModal = ActiveModal.None">关闭</button>
    </Modal>
}

<!-- 触发按钮 -->
<button @onclick="() => CurrentActiveModal = ActiveModal.Foo">打开Foo模态框</button>
<button @onclick="() => CurrentActiveModal = ActiveModal.Bar">打开Bar模态框</button>

@code {
    private ActiveModal CurrentActiveModal = ActiveModal.None;
}

3. 优化Modal组件（可选） #

如果你的Modal组件还没有统一的关闭回调，可以添加EventCallback参数简化逻辑：

<!-- Modal.razor -->
<div class="modal @(IsVisible ? "active" : "")">
    @ChildContent
    <button @onclick="OnClose">关闭</button>
</div>

@code {
    [Parameter] public RenderFragment ChildContent { get; set; }
    [Parameter] public EventCallback OnClose { get; set; }
    [Parameter] public bool IsVisible { get; set; }
}

优化后页面中的模态框可以写成：

<Modal IsVisible="CurrentActiveModal == ActiveModal.Foo" 
       OnClose="() => CurrentActiveModal = ActiveModal.None">
    <!-- Foo表单内容 -->
</Modal>

方案二：字典管理动态模态框 #

如果模态框数量不固定（比如根据数据动态生成），用Dictionary<string, bool>管理每个模态框的可见状态：

@foreach (var modalKey in ModalVisibility.Keys)
{
    @if (ModalVisibility[modalKey])
    {
        <Modal OnClose="() => ModalVisibility[modalKey] = false">
            <h3>@modalKey 操作表单</h3>
            <!-- 对应模态框内容 -->
        </Modal>
    }
}

<button @onclick="() => ToggleModal('Foo')">打开Foo</button>
<button @onclick="() => ToggleModal('Bar')">打开Bar</button>

@code {
    private Dictionary<string, bool> ModalVisibility = new()
    {
        { "Foo", false },
        { "Bar", false }
    };

    private void ToggleModal(string modalKey)
    {
        if (ModalVisibility.ContainsKey(modalKey))
        {
            ModalVisibility[modalKey] = !ModalVisibility[modalKey];
            // 如需打开当前模态框时自动关闭其他模态框，添加以下代码：
            // foreach (var key in ModalVisibility.Keys.Where(k => k != modalKey))
            // {
            //     ModalVisibility[key] = false;
            // }
        }
    }
}

进阶方案：封装模态框服务 #

如果需要在多个页面复用模态框管理逻辑，可以封装单例ModalService，通过事件通知页面显示指定模态框：

public class ModalService
{
    public event Action<ActiveModal> OnModalRequested;

    public void ShowModal(ActiveModal modalType)
    {
        OnModalRequested?.Invoke(modalType);
    }

    public void CloseModal()
    {
        OnModalRequested?.Invoke(ActiveModal.None);
    }
}

在页面中注入服务并订阅事件：

@inject ModalService ModalService

@if (CurrentActiveModal != ActiveModal.None)
{
    <!-- 模态框渲染逻辑 -->
}

<button @onclick="() => ModalService.ShowModal(ActiveModal.Foo)">打开Foo模态框</button>

@code {
    private ActiveModal CurrentActiveModal = ActiveModal.None;

    protected override void OnInitialized()
    {
        ModalService.OnModalRequested += modalType =>
        {
            CurrentActiveModal = modalType;
            StateHasChanged();
        };
    }

    public void Dispose()
    {
        ModalService.OnModalRequested -= modalType =>
        {
            CurrentActiveModal = modalType;
            StateHasChanged();
        };
    }
}

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