Blazored / Modal

A powerful and customizable modal implementation for Blazor applications.
https://blazored.github.io/Modal/
MIT License
774 stars 185 forks source link

Modal can't redirect when inside of a form tag #234

Closed ktaze1 closed 4 years ago

ktaze1 commented 4 years ago

I was trying to use Modal in my user profile page and after I clicked to Modal button, I thought it killed the page but after few minutes I came to conclusion that it just tries to redirect and gives 404 Not Found.

First I thought it might be happening because it takes time to fetch the data from a database and I've something like this:

@if (currentUser == null)
{<p> ...</p> }
else
{
    <button @onclick="ShowModal" class="btn btn-primary">Show Modal</button>
}
@if (!string.IsNullOrWhiteSpace(_message))
{
    <hr />
    <p><strong>Your message was:</strong></p>
    <p>@_message</p>
}

@code {

    private AspNetUsers[] currentUser;

    protected override async Task OnParametersSetAsync()
    {
        currentUser = await http.GetFromJsonAsync<AspNetUsers[]>($"api/AspNetUsers/");
    }

    [CascadingParameter] public IModalService Modal { get; set; }

    string _message;

    async Task ShowModal()
    {
        var messageForm = Modal.Show<MessageForm>();
        var result = await messageForm.Result;

        if (!result.Cancelled)
            _message = result.Data?.ToString() ?? string.Empty;
    }

}

But no. Problem happens if button is inside of a form tag.

@if (currentUser == null)
{<p> ...</p> }
else
{
<form method="post">
    <button @onclick="ShowModal" class="btn btn-primary">Show Modal</button>
</form>
}

To Reproduce Steps to reproduce the behavior: Try to call button with ShowModal inside of a form tag

Hosting Model (is this issue happening with a certain hosting model?):

I don't need to use form tag on this particular time but some people might in the future.

larsk2009 commented 4 years ago

I think it is because the button threated as an implicit submit button for the form, thus submitting the form. If you change the button to be:

<button @onclick="ShowModal" type="button" class="btn btn-primary">Show Modal</button>

It should work again. This is because you explicitly set the button type, so it can't be the implicit submit button anymore.

ktaze1 commented 4 years ago

Seems like it. Thanks!