Quando clico em Cancelar, o fluxo entra no meu método Cancelar, mas depois disso entra na minha ação Salvar? Huh? Por que? (Apenas para sua informação: este é um componente filho de um componente pai)
<h3>EditPage</h3>
@inject AppState _appState
@inject IJSRuntime _jsRuntime
<div class="container">
<EditForm Model="@_model" OnValidSubmit="@Save">
<div class="row">
<div class="col">
<button type="submit" class="btn btn-primary">Save</button>
<button @onclick="CancelEdit" class="ms-3 btn btn-secondary">Cancel</button>
<button @onclick="()=>Delete(new MyClass())" class="ms-3 btn btn-danger">Delete</button>
</div>
</div>
</EditForm>
</div>
@code {
[Parameter] public EventCallback<string> OnClick { get; set; }
MyClass? _model;
async Task Delete(MyClass item)
{
if (!await _jsRuntime.InvokeAsync<bool>("confirm", $"Are you sure you want to delete item?"))
return;
//do delete
_appState.IsEdit = false;
_appState.EditingId = "";
}
protected override void OnInitialized()
{
_model = new();
}
void CancelEdit()
{
_appState.IsEdit = false;
_appState.EditingId = "";
OnClick.InvokeAsync("Cancel action occurred");
}
void Save()
{
//persist work Add or Update
_appState.IsEdit = false;
_appState.EditingId = "";
OnClick.InvokeAsync("Save occurred");
}
}
Isso ocorre porque a
button
está em um formuláriosubmits
por padrão e a ação de envio do seu formulário éSave
.<button type='button'>
deveria parar com isso.