Blazor Button Onclick function submitting form

Question

I am facing strange issue while working on Blazor. I have a form for creating and editing records, on the same form I have table with rows and columns. In one column I am rendering delete button as shown in the screenshot.When I click on delete button it shows modal box for confirmation.

Code : <td><button @onclick="(() => ExecuteDelete(file.fileName))">x</button></td>

When I click on this button, confirm modal box gets opened however behind the scene it is submitting the form and validation messages appear on the form. I have separate button for submitting the form.

Is this behavior correct ?? how to prevent this.

Could anyone please help in solving this issue.

Thanks

Answer 1

As per spec, <button> elements are by default of type="submit" when placed within a form. Set delete buttons to explicit type="button".

<form>
  <button type="button" @onclick="(() => ExecuteDelete(file.fileName))">x</button>
</form>