为什么Blazor在不按下submit类型的按钮的情况下调用OnValidSubmit

Question

我有一个编辑表单，每次我点击一个按钮，即使它不是提交类型，Blazor都会调用OnValidSubmit，但我不知道为什么。下面是我的代码的简化摘录(分成两个块，以便在Stackoverflow中更好地突出显示语法，实际上它是一个文件(：

@page "/BaseConfiguration"
@using TeslaSolarCharger.Shared.Dtos.BaseConfiguration
@inject HttpClient HttpClient
@if (_dtoBaseConfiguration == null)
{
<p><em>Loading...</em></p>
}
else
{
<EditForm Model="@_dtoBaseConfiguration" OnValidSubmit="@HandleValidSubmit">
<DataAnnotationsValidator />
<ValidationSummary />
@*Next line is the button I am talking about*@
<p><button class="btn btn-success" @onclick="AddNewGridHeader">Add new header</button></p>
<button type="submit" class="btn btn-primary">Submit</button>
</EditForm>
}

@code {
private DtoBaseConfiguration? _dtoBaseConfiguration;
protected override async Task OnInitializedAsync()
{
_dtoBaseConfiguration = await HttpClient.GetFromJsonAsync<DtoBaseConfiguration>("/api/BaseConfiguration/GetBaseConfiguration");
}
private void AddNewGridHeader()
{
}
private async Task HandleValidSubmit()
{
await HttpClient.PutAsJsonAsync($"api/BaseConfiguration/UpdateBaseConfiguration", _dtoBaseConfiguration);
}
}

当我按下按钮Add new header时，会调用HandleValidSubmit方法，我的Blazor应用程序会发送put请求。为什么会这样？我该如何避免这个问题？

Answer 1

更改

<button class="btn btn-success" @onclick="AddNewGridHeader">Add new header</button>

到类型"；按钮"；

<button type="button" class="btn btn-success" @onclick="AddNewGridHeader">Add new header</button>

如果未指定按钮类型，则默认提交。

• submit--提交当前表单数据。(这是默认设置。(
• reset--重置当前表单中的数据
• 按钮——只是一个按钮。它的影响必须由某种东西来控制其他

submit-默认reset-用于重置表单按钮-事件必须手动处理