如何合并Blazor组件模态提示实现单组件多验证场景

完全可以只保留一个PromptModalComponent实例，通过动态更新参数适配所有验证警告场景，这是Blazor组件复用的常规实现方式，具体步骤如下：

1. 改造提示弹窗组件 #

让组件支持绑定动态参数，包括弹窗可见性、标题、提示内容：

<!-- PromptModalComponent.razor -->
<div class="modal fade @(IsVisible ? "show d-block" : "")" tabindex="-1" aria-modal="@IsVisible">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">@MessageTitle</h5>
                <button type="button" class="btn-close" @onclick="CloseModal"></button>
            </div>
            <div class="modal-body">
                @Message
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" @onclick="CloseModal">确认</button>
            </div>
        </div>
    </div>
</div>

@code {
    [Parameter]
    public bool IsVisible { get; set; }

    [Parameter]
    public string MessageTitle { get; set; } = "验证提示";

    [Parameter]
    public string Message { get; set; } = string.Empty;

    [Parameter]
    public EventCallback<bool> IsVisibleChanged { get; set; }

    private async Task CloseModal()
    {
        await IsVisibleChanged.InvokeAsync(false);
    }
}

2. 父组件中复用单个实例 #

在需要验证的页面/组件中仅声明一次弹窗，通过更新绑定变量触发不同场景的提示：

<!-- ParentComponent.razor -->
<PromptModalComponent @bind-IsVisible="_isModalOpen" 
                      MessageTitle="_currentModalTitle" 
                      Message="_currentModalMessage" />

<form>
    <div class="mb-3">
        <label>角色名:</label>
        <input type="text" @bind="_roleName" class="form-control" />
    </div>
    <div class="mb-3">
        <label>性别:</label>
        <select @bind="_selectedGender" class="form-control">
            <option value="">请选择</option>
            <option value="Male">男</option>
            <option value="Female">女</option>
        </select>
    </div>
    <div class="mb-3">
        <label>书籍:</label>
        <select @bind="_selectedBook" class="form-control">
            <option value="">请选择</option>
            <option value="Book1">书籍A</option>
            <option value="Book2">书籍B</option>
        </select>
    </div>
    <button type="button" @onclick="SubmitForm" class="btn btn-primary">提交</button>
</form>

@code {
    private bool _isModalOpen;
    private string _currentModalTitle;
    private string _currentModalMessage;

    private string _roleName;
    private string _selectedGender;
    private string _selectedBook;

    private void SubmitForm()
    {
        // 角色名验证
        if (string.IsNullOrWhiteSpace(_roleName))
        {
            _currentModalTitle = "角色名验证失败";
            _currentModalMessage = "请输入有效的角色名";
            _isModalOpen = true;
            return;
        }

        // 性别验证
        if (string.IsNullOrWhiteSpace(_selectedGender))
        {
            _currentModalTitle = "性别选择验证失败";
            _currentModalMessage = "请选择性别";
            _isModalOpen = true;
            return;
        }

        // 书籍验证
        if (string.IsNullOrWhiteSpace(_selectedBook))
        {
            _currentModalTitle = "书籍选择验证失败";
            _currentModalMessage = "请选择要关联的书籍";
            _isModalOpen = true;
            return;
        }

        // 验证通过后的业务逻辑
        // ...
    }
}

方案优势 #

• 减少冗余组件实例，降低页面渲染开销
• 统一弹窗样式与交互逻辑，后期修改仅需维护单个组件
• 可快速扩展功能，比如添加确认回调、自定义按钮文本等，只需新增对应参数即可

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