bootstrap-modal - 当表单处于引导模式结束时，Blazor EditForm 提交处理程序未调用，提交按钮是模式解除命令

Question

让我们考虑客户端 blazor 应用程序中的以下页面:

@page "/test"

<div id="modalDialog" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <EditForm Model="@model" OnSubmit="@SubmitHandler">
                    <div class="form-group d-flex justify-content-between">
                        <label class="col-form-label col-3" for="editDT">Time</label>
                        <InputText bind-Value="@model" id="editDT" Class="form-control" />
                    </div>
                    <button type="submit" class="btn btn-primary" @*data-dismiss="modal"*@>Submit</button>
                </EditForm>
            </div>
        </div>
    </div>
</div>
<button data-toggle="modal" data-target="#modalDialog" class="btn btn-primary">Open</button>

@functions {
    private string model { get; set; } = "Model";
    private void SubmitHandler()
    {
        Console.WriteLine("Submit");
    }
}

当我单击“打开”按钮时，模态会按预期显示。然后单击模式中的提交按钮，“提交”再次按预期打印在浏览器控制台中。
但我还需要在单击“提交”时关闭模态，以便取消对数据关闭属性的注释。
现在，模态按预期关闭，但不再调用 Submit 处理程序(浏览器控制台保持为空)。

1)这是预期的行为吗？

2)如果是，有没有办法在没有javascript互操作的情况下关闭提交处理程序中的模式？

3)如果没有，是否有另一种方法可以关闭模​​态并在单击提交按钮时调用提交处理程序，再次没有js互操作？

Answer 1

您最大的问题是按原样使用 bootstrap 。 BS 使用它自己的 JS 来操作 DOM，这不适用于 Blazor，因为 Blazor 需要控制 DOM。与 Angular、React 或 Vue 相同。如果其他东西修改了 DOM，那么奇怪的事情就会发生，正如你所发现的。

我建议更换到 Blazor-fied bootstrap 库之一，例如 BlazorStrap .或者，如果你只是在追求一种模式，我写了一个名为 Blazored.Modal