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应用程序中的以下页面：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
@page"/test"


   
       
           
                <EditForm Model="@model" OnSubmit="@SubmitHandler">
                   
                        <label class="col-form-label col-3" for="editDT">Time</label>
                        <InputText bind-Value="@model" id="editDT" Class="form-control" />
                   
                    <button type="submit" class="btn btn-primary" @*data-dismiss="modal"*@>Submit</button>
                </EditForm>
           
       
   

<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互操作的情况下关闭Submit处理程序中的模式？

3)如果没有，是否还有另一种方法可以关闭模??式并在单击Submit按钮时调用Submit处理程序，而又无需js互操作？

相关讨论

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

我建议交换到Blazor-fied引导程序库之一，例如BlazorStrap。或者，如果您只是在模态Ia之后写了一个叫做Blazored.Modal

的代码，

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

但是更好的解决方案是遵循克里斯·桑迪(Chris Sainty)的回答。

我可能还会补充说，在Bootstrap对话框中可以方便地在Blazor中实现该对象的情况下，将Bootstrap对话框嵌入Blazor中似乎不是一个好习惯。

因此，我建议您自己创建一个对话框组件，一个模板化的组件，也许是基于Bootstrap对话框...毕竟，我想像我们所有人一样，您正处于学习阶段西装外套。因此，这可能是一个很好的练习。

希望这对您有帮助...

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

提供您的表格ID
<EditForm id="my-form-ref">

然后使用表单ID的值将属性表单添加到"提交"按钮
<button type="submit" class="btn btn-danger" form="my-form-ref">Submit Form</button>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
@page"/test"
@using System.ComponentModel.DataAnnotations;


   
       
           
                <EditForm EditContext="@EC">
                    <DataAnnotationsValidator />
                    <ValidationSummary />

                   
                        <label class="col-form-label col-3" for="editDT">Time</label>
                        <InputText bind-Value="@model.Name" id="editDT" Class="form-control" />
                   
                    @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>
           
       
   

<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();
    }
}