Blazor EditForm Submit handler not called when the form is in a bootstrap modal end the submit button is the modal dismissal command - bootstrap-modal

Question

Let's consider the following page in a client side blazor app:
#page "/test"
<div id="modalDialog" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<EditForm Model="#model" OnSubmit="#SubmitHandler">
<div class="form-group d-flex justify-content-between">
<label class="col-form-label col-3" for="editDT">Time</label>
<InputText bind-Value="#model" id="editDT" Class="form-control" />
</div>
<button type="submit" class="btn btn-primary" #*data-dismiss="modal"*#>Submit</button>
</EditForm>
</div>
</div>
</div>
</div>
<button data-toggle="modal" data-target="#modalDialog" class="btn btn-primary">Open</button>
#functions {
private string model { get; set; } = "Model";
private void SubmitHandler()
{
Console.WriteLine("Submit");
}
}
When I click the Open button, the modal appears as expected. Then clicking on the Submit button in the modal, "Submit" gets printed in the browser console, again as expected.
But I need also to close the modal when I click Submit so I uncomment the data-dismiss attibute.
Now, the modal closes as expected, but the Submit handler is not called anymore (browser console remains empty).
1) Is this the expected behaviour?
2) If yes, is there a way to close the modal in the Submit handler without javascript interop?
3) If not, is there another way to both close the modal and have the Submit handler called when clicking on the Submit button, again without js interop?

Answer 1

Your biggest issue is using bootstrap as is. BS uses it’s own JS to manipulate the DOM, this won’t work with Blazor as Blazor needs to control the DOM. Same as Angular, React or Vue. If something else modifies the DOM then odd things can happen, as you’re finding.
I would suggest swapping to one of the Blazor-fied bootstrap libraries such as BlazorStrap. Or if you’re just after a modal I’ve written one called Blazored.Modal

Answer 2

To make the form submit inside the bootstrap modal do the following:
Give your form an id
<EditForm id="my-form-ref">
Then add attribute form to the submit button with the value of the form id
<button type="submit" class="btn btn-danger" form="my-form-ref">Submit Form</button>

Answer 3

I guess that dismiss="modal" is viable only if you use <button type="button"></button>, but this would not enable "submission of the form". To really solve this issue, I'd suggest you use the <form> tag
and <button type="button"> tag instead.
But a better solution is to follow what Chris Sainty suggested in his answer.
I may add that it doesn't seem to me a good practice to embed the Bootstrap dialog box in Blazor, when such object can easily implemented in Blazor...
Hence, I would suggest that you yourself create a dialog-box component, a templated one, perhaps based on the Bootstrap dialog box...After all, I guess that like all of us, you are in the learning phase of Blazor. So it can be a good exercise.
Hope this helps...

Answer 4

All good suggestions. However, for the sake of completeness, I found a way to achieve what I wanted, even if it is a not very elegant workaround:
#page "/test"
#using System.ComponentModel.DataAnnotations;
<div id="modalDialog" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<EditForm EditContext="#EC">
<DataAnnotationsValidator />
<ValidationSummary />
<div class="form-group d-flex justify-content-between">
<label class="col-form-label col-3" for="editDT">Time</label>
<InputText bind-Value="#model.Name" id="editDT" Class="form-control" />
</div>
#if (EC.Validate())
{
<button type="button" onclick="#SubmitHandler" class="btn btn-primary" data-dismiss="modal">Submit</button>
}
else
{
<button type="button" onclick="#SubmitHandler" class="btn btn-primary">Submit</button>
}
</EditForm>
</div>
</div>
</div>
</div>
<button data-toggle="modal" data-target="#modalDialog" class="btn btn-primary">Open</button>
#functions {
public class ModelClass
{
[Required]
public string Name { get; set; }
}
private ModelClass model { get; set; } = new ModelClass { Name = "My Name" };
private EditContext EC { get; set; }
private void SubmitHandler()
{
Console.WriteLine("Submit");
}
protected override void OnInit()
{
EC = new EditContext(model);
base.OnInit();
}
}