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

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

Answer 1

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

我建议交换到Blazor配置的引导程序库之一，例如BlazorStrap。或者，如果您只是使用模态，我已经写了一个叫做Blazored.Modal

的模态。

Answer 2

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

但是更好的解决方案是遵循克里斯·桑迪（Chris Sainty）在回答中提出的建议。

我还可以补充一点：在Bootstrap对话框可以轻松地在Blazor中实现的情况下，将Bootstrap对话框嵌入Blazor中似乎不是一个好习惯。

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

希望这对您有帮助...

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

Answer 4

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

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

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

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

4 个答案: