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

【问题标题】：Blazor EditForm Submit handler not called when the form is in a bootstrap modal end the submit button is the modal dismissal command当表单处于引导模式结束时，未调用 Blazor EditForm 提交处理程序提交按钮是模式解除命令
【发布时间】：2019-05-25 07:17:39
【问题描述】：

让我们考虑客户端 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");
    }
}

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

1) 这是预期的行为吗？

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

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

【问题讨论】：

您是尝试按原样使用 BS 模态，还是将其转换为 Blazor？
我按原样使用它

标签： bootstrap-modal blazor

【解决方案1】：

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

我建议切换到 Blazor 领域的引导库之一，例如 BlazorStrap。或者，如果你只是想了解我写的一个名为 Blazored.Modal

的模态

【讨论】：

【解决方案2】：

我猜dismiss="modal" 仅在您使用<button type="button"></button> 时才可行，但这不会启用“提交表单”。要真正解决这个问题，我建议你使用<form> 标签和<button type="button"> 标签。

但更好的解决方案是遵循 Chris Sainty 在他的回答中提出的建议。

我可以补充一点，在 Blazor 中嵌入 Bootstrap 对话框对我来说似乎不是一个好习惯，因为这样的对象可以在 Blazor 中轻松实现...

因此，我建议您自己创建一个对话框组件，一个模板化的组件，也许基于 Bootstrap 对话框...毕竟，我想和我们所有人一样，您正处于学习阶段布雷泽。所以它可以是一个很好的锻炼。

希望这会有所帮助...

【讨论】：

【解决方案3】：

所有好的建议。但是，为了完整起见，我找到了一种方法来实现我想要的，即使它不是一个非常优雅的解决方法：

@page "/test"
@using System.ComponentModel.DataAnnotations;

<div id="modalDialog" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <EditForm EditContext="@EC">
                    <DataAnnotationsValidator />
                    <ValidationSummary />

                    <div class="form-group d-flex justify-content-between">
                        <label class="col-form-label col-3" for="editDT">Time</label>
                        <InputText bind-Value="@model.Name" id="editDT" Class="form-control" />
                    </div>
                    @if (EC.Validate())
                    {
                        <button type="button" onclick="@SubmitHandler" class="btn btn-primary" data-dismiss="modal">Submit</button>
                    }
                    else
                    {
                        <button type="button" onclick="@SubmitHandler" class="btn btn-primary">Submit</button>
                    }
                </EditForm>
            </div>
        </div>
    </div>
</div>
<button data-toggle="modal" data-target="#modalDialog" class="btn btn-primary">Open</button>

@functions {
    public class ModelClass
    {
        [Required]
        public string Name { get; set; }
    }
    private ModelClass model { get; set; } = new ModelClass { Name = "My Name" };
    private EditContext EC { get; set; }
    private void SubmitHandler()
    {
        Console.WriteLine("Submit");
    }
    protected override void OnInit()
    {
        EC = new EditContext(model);
        base.OnInit();
    }
}

【讨论】：

【解决方案4】：

要使表单在引导模式中提交，请执行以下操作：

给你的表单一个 id <EditForm id="my-form-ref">

然后将属性form添加到提交按钮，其值为form id
<button type="submit" class="btn btn-danger" form="my-form-ref">Submit Form</button>

【讨论】：