Principes de base de Blazor : rappels d’événements Blazor

Les rappels d’événements complètent le cercle de communication du composant Blazor en permettant à un composant enfant d’envoyer des informations à son composant parent lorsque l’utilisateur déclenche une action.

Blazor utilise un modèle d’application basé sur les composants. Nous construisons une arborescence de composants pour former une application Blazor.

Il est courant que les composants parents communiquent avec leurs composants enfants. À l’aide de paramètres, nous pouvons fournir des données du parent à l’enfant.

Dans cet article, nous utiliserons rappels d’événements pour envoyer des informations de l’enfant à son composant parent.

Composants parent et enfant

Aujourd’hui, nous allons créer une application de quiz Blazor. Tu peux accéder au code sur GitHub.

Commençons par le Question composant. Il contient un Title propriété et un AnswerA et AnswerB propriété. Toutes les propriétés sont de type string.

<b>@Title</b>
<p>
    Answer A: <button type="button" class="btn btn-primary">@AnswerA</button>
</p>
<p>
    Answer B: <button type="button" class="btn btn-secondary">@AnswerB</button>
</p>

@code {
    [Parameter]
    public string Title { get; set; }
    [Parameter]
    public string AnswerA { get; set; }
    [Parameter]
    public string AnswerB { get; set; }
}

L’idée est que chacun Question Le composant affiche une question suivie de deux options de réponse. L’utilisateur peut fournir une réponse à l’aide du bouton représentant chaque option.

Toutes les informations sont fournies à l’aide des paramètres des composants. Le Parameter L’attribut appliqué à chaque propriété indique à Blazor d’exiger l’attribut lors de l’utilisation du Question composant.

Apprenez-en davantage sur le fonctionnement des composants Blazor et sur la façon dont les paramètres fournissent des informations du composant parent à ses enfants dans le Principes de base de Blazor : création d’un composant Blazor article de cette série.

Dans notre exemple, le composant parent est le Index page de la demande.

@page "https://www.telerik.com/"
<PageTitle>Blazor Quiz</PageTitle>

<h1>Blazor Quiz</h1>
<p style="margin-bottom: 24px">Welcome to the Blazor Quiz!</p>

<h2>Questions</h2>
<Question Title="Does Blazor support event callbacks?" AnswerA="Yes" AnswerB="No" />

Outre le titre et les autres informations affichées à l’écran, le Index la page utilise le Question composant, fournissant trois chaînes à son Title,
AnswerA et AnswerB les attributs.

Ajout de rappels d’événements

Jusqu’à présent, nous avons fourni des données du composant parent au composant enfant, mais nous ne communiquons pas en retour.

Modifions cela en ajoutant un rappel d’événement qui se déclenche lorsque l’utilisateur appuie sur l’un des boutons de réponse dans le Question composant.

[Parameter]
public EventCallback OnAnswerASelected { get; set; }
[Parameter]
public EventCallback OnAnswerBSelected { get; set; }

Tout d’abord, nous ajoutons deux propriétés de type EventCallback au Question composant et nommez-les OnAnswerASelected et OnAnswerBSelected.

Nous ajoutons également le Parameter attribut car nous voulons fournir le gestionnaire du composant parent.

Comme leurs noms l’indiquent, ces rappels seront déclenchés lorsqu’un utilisateur sélectionne la réponse A ou B. Nous déclenchons les événements en ajoutant une référence à chacun des boutons de réponse à l’aide de leur onclick attribut.

La totalité Question Le composant ressemble maintenant à ceci :

<b>@Title</b>
<p>
    Answer A: <button type="button" class="btn btn-primary" onclick="@OnAnswerASelected">@AnswerA</button>
</p>
<p>
    Answer B: <button type="button" class="btn btn-secondary" onclick="@OnAnswerBSelected">@AnswerB</button>
</p>

@code {
    [Parameter]
    public string Title { get; set; }
    [Parameter]
    public string AnswerA { get; set; }
    [Parameter]
    public string AnswerB { get; set; }

    [Parameter]
    public EventCallback OnAnswerASelected { get; set; }
    [Parameter]
    public EventCallback OnAnswerBSelected { get; set; }
}

Gestion des rappels d’événements

Ensuite, nous devons fournir un gestionnaire pour chaque rappel d’événement lors de l’utilisation de Question composant sur le Index page.

@page "https://www.telerik.com/"
<PageTitle>Blazor Quiz</PageTitle>

<h1>Blazor Quiz</h1>
<p style="margin-bottom: 24px">Welcome to the Blazor Quiz!</p>

<h2>Questions</h2>
<Question 
    Title="Does Blazor support event callbacks?" 
    AnswerA="Yes" 
    AnswerB="No"
    OnAnswerASelected="@AnswerASelected"
    OnAnswerBSelected="@AnswerBSelected" />

<p>The user pressed: @State</p>

@code {
    public string State { get; set; } = "Nothing";

    public void AnswerASelected()
    {
        State = "A";
    }

    public void AnswerBSelected()
    {
        State = "B";
    }
}

Noter la OnAnswerASelected et OnAnswerBSelected propriétés ajoutées au Question composant qui fait tous deux référence à une méthode de la section de code.

Nous utilisons une logique simple qui modifie le texte à l’écran en fonction du bouton sur lequel vous avez appuyé. Dans une véritable application de quiz, vous pouvez vérifier si l’utilisateur a cliqué sur la bonne réponse et ajouter ou supprimer des points.

Notez que nous n’avons pas besoin d’appeler manuellement le StateHasChanged méthode parce que le EventCallback type le gère en interne et force commodément un nouveau rendu des composants impliqués.

Déclenchement d’événements à partir du code C#

Au lieu d’utiliser le OnAnswerASelected rappel d’événement directement comme argument du onclick attribut du buttonnous pouvons déclencher des événements à partir des méthodes C#.

Le code ressemblerait à ceci :

public void OnButtonAClicked()
{
    OnAnswerASelected.InvokeAsync();
}

Le EventCallback type fournit un InvokeAsync méthode que nous pouvons utiliser pour déclencher l’événement à partir de n’importe quelle méthode C#.

Le câblage du OnButtonAClicked La méthode du modèle de composant ressemble à ceci :

@onclick="OnButtonAClicked"

Comme vous pouvez le constater, nous pouvons soit utiliser le EventCallback propriété comme le onclick gestionnaire d’un buttonou nous pouvons déclencher un rappel d’événement depuis n’importe quel code de composant C#.

Transmission de données au gestionnaire de rappel d’événement

Jusqu’à présent, nous avons défini un EventCallback à l’intérieur du composant enfant et ajouté une méthode de gestionnaire dans le composant parent en la fournissant via les paramètres du composant.

Mais que se passe-t-il si nous voulons transmettre des informations du composant enfant au composant parent lorsque l’événement se déclenche ?

Blazor propose une implémentation typée génériquement du EventCallback taper. Nous pouvons l’utiliser pour fournir un contexte lorsque l’événement se déclenche.

Définissons ce qui suit enum tapez la racine du projet, afin qu’elle soit disponible à la fois dans le Index page et le Question composant:

namespace BlazorQuiz;
public enum QuizAnswer
{
    AnswerA,
    AnswerB
}

Ensuite, nous souhaitons utiliser ce type pour transmettre des informations du composant enfant à son parent. Nous modifions la mise en œuvre du Question composant comme celui-ci :

<b>@Title</b>
<p>
    Answer A: <button type="button" class="btn btn-primary" @onclick="() => AnswerSelected(QuizAnswer.AnswerA)">@AnswerA</button>
</p>
<p>
    Answer B: <button type="button" class="btn btn-secondary" @onclick="() => AnswerSelected(QuizAnswer.AnswerB)">@AnswerB</button>
</p>

@code {
    [Parameter]
    public string Title { get; set; }
    [Parameter]
    public string AnswerA { get; set; }
    [Parameter]
    public string AnswerB { get; set; }

    [Parameter]
    public EventCallback<QuizAnswer> OnAnswerSelected { get; set; }

    public void AnswerSelected(QuizAnswer answer)
    {
        OnAnswerSelected.InvokeAsync(answer);
    }
}

Nous avons supprimé les rappels d’événements spécifiques nommés OnAnswerASelected et OnAnswerBSelected et les a remplacés par un seul OnAnswerSelected rappel d’événement. Remarquez le QuizAnswer tapez l’argument.

Ensuite, nous avons ajouté un AnswerSelected méthode qui accepte un seul paramètre de type QuizAnswer et tire le OnAnswerSelected événement utilisant son
InvokeAsync méthode et en passant la valeur reçue par son paramètre de méthode.

Nous avons également modifié le câblage des balises de bouton dans le modèle de composant. Nous appelons le AnswerSelected méthode à partir du onclick attribut et fournir la valeur correcte de l’attribut
QuizAnswer enum, en fonction du bouton.

Dans le Index composant de page, nous devons également apporter quelques modifications.

@page "https://www.telerik.com/"
<PageTitle>Blazor Quiz</PageTitle>

<h1>Blazor Quiz</h1>
<p style="margin-bottom: 24px">Welcome to the Blazor Quiz!</p>

<h2>Questions</h2>
<Question 
    Title="Does Blazor support event callbacks?" 
    AnswerA="Yes" 
    AnswerB="No"
    OnAnswerSelected="@AnswerSelected" />

<p>The user pressed: @State</p>

@code {
    public string State { get; set; } = "Nothing";

    public void AnswerSelected(QuizAnswer answer)
    {
        if( answer == QuizAnswer.AnswerA)
        {
            State = "A";
        }
        else if( answer == QuizAnswer.AnswerB)
        {
            State = "B";
        }
    }
}

Tout d’abord, nous fournissons un rappel d’événement unique au OnAnswerSelected propriété du Question composant. L’implémentation accepte une valeur de type QuizAnswer comme premier paramètre de méthode. Nous fixons le State propriété en fonction de sa valeur.

L’implémentation utilisant le générique EventCallback la police est beaucoup plus concise et offre une meilleure lisibilité.

Au lieu d’avoir plusieurs rappels avec des noms verbeux, tels que OnAnswerASelected et OnAnswerBSelectednous utilisons un seul OnAnswerSelected rappel d’événement.

Cercle de communication des composants Blazor

Lorsque nous utilisons un composant enfant dans un composant parent, nous référençons le composant enfant à l’aide d’une balise HTML personnalisée dans le modèle du composant.

Si le composant enfant nécessite un paramètre, nous utilisons des attributs HTML pour fournir les informations pour chaque paramètre.

Lorsque nous souhaitons envoyer des informations d’un composant enfant à un parent en fonction d’une action de l’utilisateur, nous utilisons des rappels d’événements.

Différences entre les événements .NET et Blazor EventCallback

Le Blazeur EventCallback le type peut ressembler beaucoup aux événements .NET classiques. Il existe cependant quelques différences notables.

Premièrement, les événements .NET peuvent avoir plusieurs gestionnaires d’événements. Considérez le code suivant :

Window.OnCloseEvent += HandleWindowClose;

Nous ajoutons le HandleWindowClose méthode à une collection de méthodes de gestionnaire. Lors de l’utilisation de Blazor EventCallbacknous ne pouvons fournir qu’un célibataire méthode du gestionnaire. En revanche, nous n’avons pas besoin de Se désabonner à partir d’événements comme nous aurions besoin de le faire en utilisant des événements .NET classiques.

Deuxième, Les événements .NET sont des classestandis que le Blazor EventCallback<T> le type est un structurer. L’avantage d’utiliser des structures ici est que nous ne pouvons pas attribuer null à une propriété d’un type struct. Par conséquent, nous n’avons pas besoin de vérifier les valeurs nulles lors du tir d’un Blazor. EventCallback. Considérez le code suivant :

OnAnswerSelected.InvokeAsync(answer);

Nous pouvons appeler le InvokeAsync méthode sans vérifier null car le compilateur s’assure que le OnAnswerSelected la propriété contient toujours une valeur.

Lors de l’utilisation d’événements .NET classiques, le code ressemblerait à ceci :

OnCloseEvent?.Invoke(this, value);

Il existe quelques différences mineures supplémentaires entre les événements .NET classiques et Blazor EventCallback les types. Cependant, ces deux points constituent les différences les plus importantes à retenir.

Conclusion

Le EventCallback type fournit une API simple pour la communication entre les composants enfants et parents dans les applications Blazor.

Le générique EventCallback<T> type nous permet de fournir des informations contextuelles lors du déclenchement de l’événement. Cela nous aide à écrire du code concis, lisible et maintenable.

Les rappels d’événements complètent le cercle de communication entre les composants Blazor. Nous utilisons paramètres pour fournir des données d’un parent à son composant enfant. Et nous utilisons rappels d’événements pour fournir des informations du composant enfant à son parent.

Essayez l’interface utilisateur Telerik pour Blazor

Vous souhaitez vous plonger dans le développement de Blazor avec tous les composants que vous pourriez souhaiter déjà construits nativement pour vous ? Progrès Interface utilisateur Telerik pour Blazor vous aide à créer des projets Web de qualité professionnelle en deux fois moins de temps avec une grille haute performance et plus de 100 composants Blazor faciles à personnaliser pour répondre à toutes les exigences. Essayez-le gratuitement avec notre essai de 30 jours et profitez de notre assistance de pointe.

Essayez maintenant