Multiple submit buttons in Blazor EditForm? - button

Question

Using AspNet Blazor and its EditForm:
I am creating a simple form that should contain both an update and a delete button. I do not seem to find any examples of how to pass parameters to the submit.
I have tried to place an #onclick in the delete button pointing towards DeleteObject, but then I get no validation (I actually do not need validation in this case, but I want to do it anyway), plus that the SaveObject was also called after the delete...
<EditForm Model="#selectedCar" OnValidSubmit="#SaveObject">
<DataAnnotationsValidator />
<ValidationSummary />
....My <InputText>'s for all values I have in my object
<button type="submit" class="btn btn-primary" value="Save">Spara</button>
<button type="submit" class="btn btn-primary" value="Delete">Delete</button>
</EditForm>
#code {
[Parameter]
public string Id { get; set; }
CarModel selectedCar;
protected override async Task OnInitializedAsync()
{
selectedCar = await _CarService.GetCar(int.Parse(Id));
}
protected async Task SaveObject()
{
selectedCar.Id = await _CarService.SaveCar(selectedCar);
}
protected async Task DeleteObject(int Id)
{
selectedCar.Id = await _CarService.DeleteCar(selectedCar);
}
}
I want to be able to call specific functions for each button, without going around validation.
Anyone have a good idea how to do this?

Answer 1

Ok, I ended up with the following solution. It seems to work as expected.
<EditForm Model="#selectedCar" Context="formContext">
<DataAnnotationsValidator />
<ValidationSummary />
....My <InputText>'s for all values I have in my object
<button type="submit" class="btn btn-primary" #onclick="#(() => SaveCar(formContext))">Save</button>
<button type="submit" class="btn btn-primary" #onclick="#(() => UpdateStockQuantity(formContext))">Update stock quantity</button>
<button type="submit" class="btn btn-secondary" #onclick="#(() => DeleteCar(formContext))">Delete</button>
</EditForm>
#code {
[Parameter]
public string Id { get; set; }
CarModel selectedCar;
protected override async Task OnInitializedAsync()
{
selectedCar = await _CarService.GetCar(int.Parse(Id));
}
protected async Task SaveCar(EditContext formContext)
{
bool formIsValid = formContext.Validate();
if (formIsValid == false)
return;
selectedCar.Id = await _CarService.SaveCar(selectedCar);
}
... plus same approach with UpdateStockQuantity and DeleteCar.
}

Answer 2

The two buttons will submit the form with the validations.
And then you can check on the Boolean and call any logic you want:
<EditForm Model="#Input" OnValidSubmit="#UpdateAsync">
<DataAnnotationsValidator />
<div class="row">
<div class="form-group col-md-12">
<label class="required"> Name</label>
<InputText class="form-control" #bind-Value="Input.Name" />
<span class="err"><ValidationMessage For="#(() => Input.Name)" /></span>
</div>
</div>
<div class="text-center">
<button type="submit" #onclick="#(()=> Input.IsNew = false)" class="btn">save 1</button>
<button type="submit" #onclick="#(()=> Input.IsNew = true)" class="btn">save 2</button>
</div>
</EditForm>
#code{
async Task UpdateAsync()
{
if (Input.IsNew)
{
//do somthing
}
else
{
//do another somthing
}
}
}

Answer 3

If you use type="button" then only the #onclick method is called and not the OnValidSubmit method. But this way there's no validation.