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

Xeevis · Accepted Answer · 2021-07-04T20:21:35.527

25

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>

edited Jul 04 '21 at 20:21

answered Apr 09 '20 at 06:42

Xeevis

4,325
25
26

1

Oups, I post at the same time than you, I delete – agua from mars Apr 09 '20 at 06:45
Thanks its working after explicitly specifying type=button – ZKS Apr 09 '20 at 06:53

Blazor Button Onclick function submitting form

1 Answers1