Exercice - Ajouter un composant

  • 4 minutes

Dans cet exercice, vous ajoutez un composant Razor à la page d’accueil de votre application.

Ajouter le composant Counter à la page d’accueil

  1. Développez les dossiers dans l’Explorateur de solutions Visual Studio. Si l’Explorateur de solutions n’est pas affiché, sélectionnez Afficher>l’Explorateur de solutions.

  2. Sélectionnez Composants/Pages pour afficher les pages Razor existantes.

  3. Sélectionnez le fichier Home.razor pour l’ouvrir.

  4. Ajoutez un composant Counter à la page en insérant un élément <Counter /> à la fin du fichier Home.razor.

    @page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<Counter />

Si vous avez toujours l’application en cours d’exécution, enregistrez le fichier et sélectionnez la commande Rechargement à chaud (Alt+F10) afin que le Counter composant s’affiche sur la page d’accueil. Dans l’application en cours d’exécution, vérifiez que le compteur s’affiche en sélectionnant un autre onglet, puis en sélectionnant l’onglet Accueil pour revenir à la page d’accueil. Si vous avez arrêté le débogage précédemment, recommencez l’application en sélectionnant Déboguer>démarrer le débogage.

Lorsque vous êtes prêt à arrêter, revenez à Visual Studio et appuyez sur Maj+F5 pour arrêter l’application.

  1. Développez les dossiers dans l’explorateur Visual Studio Code. Si l’Explorateur n’est pas affiché, sélectionnez Vue>Explorateur.

  2. Sélectionnez Composants/Pages pour afficher les pages Razor existantes.

  3. Sélectionnez le fichier Home.razor pour l’ouvrir.

  4. Ajoutez un composant Counter à la page en insérant un élément <Counter /> à la fin du fichier Home.razor.

    @page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<Counter />

Si l’application est toujours en cours d’exécution, revenez à Visual Studio Code, puis appuyez sur Maj+F5 pour arrêter l’application. Enregistrez le fichier et recommencez l’application en sélectionnant Exécuter>démarrer le débogage.

Lorsque vous êtes prêt à arrêter, revenez à Visual Studio Code, puis appuyez sur Maj+F5 pour arrêter l’application.

Capture d’écran du composant compteur sur la page d’accueil.

Modifier un composant

Les paramètres des composants sont spécifiés à l’aide d’attributs ou de contenu enfant, ce qui vous permet de définir des propriétés sur le composant enfant. Définissez un paramètre sur le composant Counter pour spécifier de combien il s’incrémente à chaque clic du bouton :

  • Ajoutez une propriété publique pour IncrementAmount avec un attribut [Parameter].
  • Modifiez la méthode IncrementCount pour qu’elle utilise IncrementAmount lors de l’incrémentation de la valeur de currentCount.

Mettez à jour le code dans le fichier Counter.razor comme suit :

@page "/counter"

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    [Parameter]
    public int IncrementAmount { get; set; } = 1;

    private void IncrementCount()
    {
        currentCount += IncrementAmount;
    }
}

Dans Home.razor, mettez à jour l’élément <Counter> en ajoutant un attribut IncrementAmount qui modifie la taille de l’incrément sur 10, comme indiqué par la dernière ligne du code suivant :

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<Counter IncrementAmount="10" />

Redémarrer l’application

Le Home composant a maintenant son propre compteur qui incrémente de 10 chaque fois que vous sélectionnez le bouton Cliquer sur moi , comme illustré dans l’image suivante. Le compteur Counter (counter.razor) sur /countercontinue à être incrémenté d’un.

Capture d’écran de la page d’accueil avec mise à jour du compteur.