Blazor .NET 7中Bootstrap Modal打开后验证状态未重置问题

问题核心是：EditForm的验证状态与绑定的Model实例强关联，关闭Modal后Model未重置，导致再次打开时旧的验证错误依然显示。以下是两种可靠的解决方式：

方式一：打开Modal时重置Model与验证状态 #

这种方式在用户点击「新增服务器」按钮触发Modal打开时，直接重置表单数据和验证状态，确保每次打开都是干净的表单。

步骤1：修改组件代码，添加打开Modal的处理逻辑 #

给新增按钮绑定点击事件，并为EditForm添加引用以便操作验证状态：

<!-- 新增服务器按钮 -->
<button type="button" class="btn btn-primary" @onclick="OpenAddServerModal">新增服务器</button>

<!-- Modal部分，保留原有结构，为EditForm添加@ref -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel" style="margin-right:100px;">Add New Server</h5>
                <button type="button" style="background-color: white !important;" data-bs-dismiss="modal">X</button>
            </div>
            <EditForm @ref="editFormRef" Model="@sn" OnValidSubmit="submit">
                <DataAnnotationsValidator></DataAnnotationsValidator>
                <ValidationSummary style="color:red"></ValidationSummary>
                <div class="modal-body">
                    <div class="d-flex flex-row bd-highlight mb-3">
                        <div class="p-2 w-100 bd-highlight">
                            <div class="form-group row">
                                <label for="example-text-input" class="col-3 col-form-label">Server Name</label>
                                <div class="col-9">
                                    <input type="text" class="form-control" @bind="@sn.Server_Name" />
                                    <ValidationMessage For="@(() => sn.Server_Name)" style="color:red"></ValidationMessage>
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary">Create</button>
                        </div>
                    </div>
                </div>
            </EditForm>
        </div>
    </div>
</div>

步骤2：在@code块中实现重置与Modal控制逻辑 #

注入IJSRuntime用于调用Bootstrap的Modal方法，并编写打开时的重置逻辑：

@inject IJSRuntime JS

@code {
    private ServerNames sn = new ServerNames();
    private EditForm? editFormRef;

    private async Task OpenAddServerModal()
    {
        // 1. 重置Model实例，清空表单数据
        sn = new ServerNames();
        // 2. 清除所有已存在的验证消息
        editFormRef?.EditContext?.ClearValidationMessages();
        // 3. 调用Bootstrap JS API打开Modal
        var modal = await JS.InvokeAsync<IJSObjectReference>("bootstrap.Modal.getOrCreateInstance", "#exampleModal");
        await modal.InvokeVoidAsync("show");
    }

    private async Task submit()
    {
        // 这里编写表单提交逻辑（如保存到数据库）
        // ...

        // 提交成功后关闭Modal
        var modal = await JS.InvokeAsync<IJSObjectReference>("bootstrap.Modal.getOrCreateInstance", "#exampleModal");
        await modal.InvokeVoidAsync("hide");
    }
}

方式二：关闭Modal时自动重置 #

如果希望在Modal关闭后自动清理状态，可以监听Modal的hidden.bs.modal事件：

步骤1：给Modal添加关闭事件绑定 #

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);" @onhidden="OnModalHidden">

步骤2：实现关闭事件的处理方法 #

@code {
    private ServerNames sn = new ServerNames();
    private EditForm? editFormRef;

    private void OnModalHidden()
    {
        // 重置Model实例并清除验证消息
        sn = new ServerNames();
        editFormRef?.EditContext?.ClearValidationMessages();
    }

    // 原有submit方法保持不变
    private async Task submit()
    {
        // 提交逻辑
        // ...
        var modal = await JS.InvokeAsync<IJSObjectReference>("bootstrap.Modal.getOrCreateInstance", "#exampleModal");
        await modal.InvokeVoidAsync("hide");
    }
}

关键说明 #

• 必须创建新的Model实例（sn = new ServerNames()），而非仅清空属性——Blazor的EditContext会跟踪实例状态，仅清空属性无法完全重置验证标记。
• EditContext.ClearValidationMessages()方法会清除所有已显示的验证错误，确保表单回到无提示的初始状态。

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