3
votes

Le gestionnaire de soumission Blazor EditForm n'est pas appelé lorsque le formulaire est dans un mode d'amorçage et le bouton d'envoi est la commande de rejet modal

Considérons la page suivante dans une application blazor côté client:

@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");
    }
}

Lorsque je clique sur le bouton Ouvrir, le modal apparaît comme prévu. Ensuite, en cliquant sur le bouton Soumettre dans le modal, «Soumettre» est imprimé dans la console du navigateur, à nouveau comme prévu. Mais je dois également fermer le modal lorsque je clique sur Soumettre afin de décommenter l'attibute de rejet de données. Maintenant, le modal se ferme comme prévu, mais le gestionnaire Submit n'est plus appelé (la console du navigateur reste vide).

1) Est-ce le comportement attendu?

2) Si oui, y a-t-il un moyen de fermer le modal dans le gestionnaire de soumission sans interopérabilité javascript?

3) Sinon, existe-t-il un autre moyen de fermer le modal et de faire appeler le gestionnaire de soumission en cliquant sur le bouton Soumettre, encore sans js interop?

blazor bootstrap-modal

2 commentaires

Essayez-vous d'utiliser le modal BS tel quel ou l'avez-vous converti en Blazor?

Je l'utilise tel quel

4 Réponses :

5
votes

Votre plus gros problème est d'utiliser le bootstrap tel quel. BS utilise son propre JS pour manipuler le DOM, cela ne fonctionnera pas avec Blazor car Blazor doit contrôler le DOM. Identique à Angular, React ou Vue. Si quelque chose d'autre modifie le DOM, des choses étranges peuvent se produire, comme vous le trouvez.

Je suggère de passer à l'une des bibliothèques d'amorçage Blazor-fied telles que BlazorStrap . Ou si vous êtes juste après un modal, j'en ai écrit un appelé Blazored.Modal

0 commentaires

1
votes

Je suppose que licencier = "modal" n'est viable que si vous utilisez , mais cela n'activerait pas la "soumission du formulaire". Pour vraiment résoudre ce problème, je vous suggère d'utiliser la balise

et balise

0 commentaires

0
votes

Toutes les bonnes suggestions. Cependant, dans un souci d'exhaustivité, j'ai trouvé un moyen d'atteindre ce que je voulais, même si ce n'est pas une solution de contournement très élégante:

@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();
    }
}

0 commentaires

0
votes

Pour soumettre le formulaire dans le modal bootstrap, procédez comme suit:

Donnez un identifiant à votre formulaire

Ensuite, ajoutez un formulaire d'attribut au bouton d'envoi avec la valeur de l'identifiant du formulaire

0 commentaires