Blazor服务器- EditForm提交-两个按钮点击集中和提交?

Question

所以我有点困惑，我认为一些提交逻辑是如何在Blazor服务器上工作的(可能与Blazor WebAssembly相同)。

我有一个EditForm与一个字段和一个提交按钮(类型提交):

<EditForm EditContext="@_editContext" OnValidSubmit="@HandleValidSubmit">
<DataAnnotationsValidator />
<ValidationSummary />
<label for="firstName" class="form-label">First Name</label>
<InputText class="form-control" @bind-Value="_formModel.FirstName" />
<button type="submit" class="btn btn-primary">New Person</button>
</EditForm>

@code {

private void HandleValidSubmit()
{
System.Diagnostics.Debug.WriteLine("SUBMIT!");
}

private class FormModel
{
[Required(AllowEmptyStrings = false, ErrorMessage = "Provide a first name")]
public string FirstName{ get; set; }
}

}

在浏览器中，我做了以下操作:

1. 提供将根据我的FormModel和DataAnnotationsValidator评估为无效的输入，并且我被告知只需单击一个按钮。
2. 我纠正了名字文本输入的值，并且在浏览器中仍然有焦点，我单击Submit
3. 所发生的一切是数据验证似乎已经运行(酷，这总是很好)，但是点击Submit按钮并没有出现触发我的c#代码运行OnValidSubmit。(正如您在我的示例中看到的，我使用Debug.WriteLine
进行测试)

是否有一种方法可以避免这种情况，同时保持使用OnSubmit/OnInvalidSubmit/OnValidSubmit和按钮类型="提交">

(我读到在Blazor和状态更新中使用submit类型的按钮与button类型的按钮有一点不同……不知道这是不是一个因素)

从用户的角度来看，他们为了一个动作按了两次按钮。这当然会让人觉得有点奇怪或困惑。

从我的测试来看，当涉及到DataAnnotationsValidator时似乎就是这种情况，这在一定程度上是有意义的，直到需要在客户机上按两个按钮才能真正击中我的c#代码。(即我理解数据验证发生在焦点变化时)

我觉得我部分地误解了一些东西，部分地遗漏了一些额外的代码或设置在我的表单中以避免这种情况。

是否有一种方法可以做我想做的事情，同时保持DataAnnotationsValidator?

提前感谢您的帮助!

Answer 1

我认为，当你"点击"在按钮上(显示验证消息)，首先发生的是输入控件失去焦点。这会导致一个验证事件——数据条目通过验证，ValidationSummary更新并消失。呈现事件将按钮在页面上分流，因此当浏览器应用click事件时，它位于屏幕的空白部分，而不是按钮。在下面的测试代码中，我在ValidationSummary上面添加了一个提交按钮，因为它不会移动。它发生得如此之快，以至于你错过了它!

解决这个问题的一个方法是改变输入的行为来验证数据输入，而不是失去焦点。

这是一个自定义的InputText控件:

@namespace MyNameSpace
@inherits InputText
<input type="text" value="@this.CurrentValue" @oninput="OnInput" @ref="Element" />
@code{
public ElementReference? Element { get; set; }
private void OnInput(ChangeEventArgs e)
=> this.CurrentValueAsString = e.Value.ToString();
}

它与原来的唯一不同之处在于响应事件现在被设置为"oninput";而不是"onchange"。

测试页面如下所示。控件的两个版本都显示出来，因此您可以看到不同的行为。

@page "/Test2"
<EditForm EditContext="@_editContext" OnValidSubmit="@HandleValidSubmit" OnInvalidSubmit="HandleInValidSubmit">
<DataAnnotationsValidator />
<div class=" m-2 p-2">
<button type="submit" class="btn btn-primary">New Person</button>
</div>
<ValidationSummary />
<label class="form-label">First Name (Only Updates on Exit)</label>
<InputText class="form-control" @bind-Value="this._formModel.FirstName"></InputText>
<label class="form-label">First Name (Updates on Typing)</label>
<InputTextOnInput class="form-control" @bind-Value="this._formModel.FirstName"></InputTextOnInput>
<button type="submit" class="btn btn-primary">New Person</button>
</EditForm>
<div class="m-3 p-3">@_submitType</div>
@code {
private EditContext? _editContext;
private FormModel _formModel;
private string _submitType;
private void HandleValidSubmit()
{
_submitType = "VALID SUBMIT!";
System.Diagnostics.Debug.WriteLine("VALID SUBMIT!");
}
private void HandleInValidSubmit()
{
_submitType = "INVALID SUBMIT!";
System.Diagnostics.Debug.WriteLine("INVALID SUBMIT!");
}
private class FormModel
{
[Required(AllowEmptyStrings = false, ErrorMessage = "Provide a first name")]
public string FirstName { get; set; }
}
protected override Task OnInitializedAsync()
{
_formModel = new FormModel();
_editContext = new EditContext(_formModel);
return base.OnInitializedAsync();
}
}

输入控件

的源代码链接